Custom fonts added but not displaying

[Taytertots]

Hello!

I tried adding a couple of custom fonts to my site yesterday, and I'm not sure what I'm missing in the setup. I'm using the Vast theme, and the code looks like this:

/* @import url('http://example.com/example_style.css'); FONTS BELOW*/

/*Proxima Nova*/
@font-face {
    font-family: 'proxima_novalight';
    src: url('proximanova-light-webfont.woff2') format('woff2'),
         url('proximanova-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaregular';
    src: url('proximanova-reg-webfont.woff2') format('woff2'),
         url('proximanova-reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaregular_italic';
    src: url('proximanova-regit-webfont.woff2') format('woff2'),
         url('proximanova-regit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaextrabold';
    src: url('proximanova-xbold-webfont.woff2') format('woff2'),
         url('proximanova-xbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novablack_italic';
    src: url('proxima_nova_black_it-webfont.woff2') format('woff2'),
         url('proxima_nova_black_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novablack';
    src: url('proxima_nova_black-webfont.woff2') format('woff2'),
         url('proxima_nova_black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_rgbold_italic';
    src: url('proxima_nova_bold_it-webfont.woff2') format('woff2'),
         url('proxima_nova_bold_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_nova_rgbold';
    src: url('proxima_nova_bold-webfont.woff2') format('woff2'),
         url('proxima_nova_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novalight_italic';
    src: url('proxima_nova_light_it-webfont.woff2') format('woff2'),
         url('proxima_nova_light_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novalight';
    src: url('proxima_nova_light-webfont.woff2') format('woff2'),
         url('proxima_nova_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaregular_italic';
    src: url('proxima_nova_reg_it-webfont.woff2') format('woff2'),
         url('proxima_nova_reg_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novabold';
    src: url('proximanova-bold-webfont.woff2') format('woff2'),
         url('proximanova-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novalight';
    src: url('proximanova-light-webfont.woff2') format('woff2'),
         url('proximanova-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaregular';
    src: url('proximanova-reg-webfont.woff2') format('woff2'),
         url('proximanova-reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaregular_italic';
    src: url('proximanova-regit-webfont.woff2') format('woff2'),
         url('proximanova-regit-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'proxima_novaextrabold';
    src: url('proximanova-xbold-webfont.woff2') format('woff2'),
         url('proximanova-xbold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

I placed it in its own folder, according to the Hubspot instructions here but the fonts aren't showing up as options in the templated landing pages.

This is the folder location for the fonts:

The step that I think I might be missing has to do with importing the font URL into the regular stylesheet. I tried by copying the URL from the Actions menu, then placing it here: (bolded area w  "figure this out" is my import attempt)

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
@import url(http://fonts.googleapis.com/css?family=Montserrat:700,400);
@import url(//designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css);

/*figure this out: */
@import url({{ get_public_template_url('Vast/Fonts-EnSight.css') }})

  /**
 * CSS @imports must be at the top of the file.      
 * Add them above this section.                             
 */


/* ==========================================================================
   HS COS Boilerplate v1.3.0   
*/

/* This responsive framework is required for all styles.*/ 
{% include "Vast/Coded_Files/vast-modules.css" %}

If anyone knows where I went wrong/what I should be doing w the import URL, I'd really appreciate it.

Thank you,

Lena

[Anton]

@Taytertots

you should also write at some point(in the CSS) where to use which font

like

html,body{
font-family:'THE-NAME-OF-YOUR-FONT-FAMILY-WHICH-STANDS-ABOVE-THE-SRC', sans-serif;
font-weight:THE-WEIGHT-WHICH-STANDS-BELOW-THE-SRC;
}
h1{
font-family:'THE-NAME-OF-YOUR-FONT-FAMILY-WHICH-STANDS-ABOVE-THE-SRC', sans-serif;
font-weight:THE-WEIGHT-WHICH-STANDS-BELOW-THE-SRC;
}
...

regards,

Anton

[Taytertots]

@Antonvery true, haven't gotten around to organizing it all yet since I'm still trying to just get them usable. Appreciate the note though!

[dennisedson · Accepted solution]

when you go to the kit settings you should see a input field to add domains

per typekit:

"Add up to ten domains, e.g. “*.example.com, local.dev, cdn.ampproject.org, amp.cloudflare.com”. "

[tjoyce]

@Taytertots - I think, ultimately, your problem is that you are referencing a relative file but I'm skeptical that is going to work because you should be using the cdn link for the font files... e.g.

@font-face {
    font-family: 'proxima_novalight';
    src: url('proximanova-light-webfont.woff2') format('woff2'),
         url('proximanova-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

 proximanova-light-webfont.woff2 should be the CDN url you copy from the file manager after uploading your .ttf or .woff font files

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

[Taytertots]

@tjoyce,

Thanks for responding! I'm a little confused since these fonts aren't Google fonts, they were purchased from Typekit and so there isn't an actual URL to add in, just the font names. In the HubSpot instructions that I tried following, it said to copy the URL from the dropdown and that would include all necessary elements for the theme's stylesheet to read. If the fonts don't have any attached URLs, wouldn't this affect the process (whether I write the code as you did or add in the copied link from the dropdown, as I tried before)?

[dennisedson]

@Taytertots,

If you purchased with typekit, i believe you have to create a "kit".  That is where you will assign the domain using the font.  Once you have that set, it should give you 3 options to use on your site.  I use the @import option and place at the top of my stylesheet. 

After that, you should be good to go 🙂

[Taytertots]

@dennisedsonwhich URL did you tie the kit(s) to? I'm working with a site that isn't yet live. The URL is ensightplus.com but we're working with a dev version for now and of course the landing pages are through HubSpot so they don't actaully share that domain.

Thanks!