Custom font not available.

[TvanDonselaar]

Set up a customer font following HS instructions, added stylesheet to page but it's not available when designing the landing page.

Anyone an idea for fixing it?

Page: http://onomondo-3988323.hs-sites.com/paid-search-template

/* @import url('http://example.com/example_style.css'); */
{% include './_pwr-style-settings.css' %}

/* Neue Montreal Medium */
@font-face {
font-family: 'Neue_Montreal-Regular';
src: local('Neue_Montreal-Regular'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Medium.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

/* Neue Montreal Bold */
@font-face {
font-family: 'Neue_Montreal-Bold';
src: local('Neue_Montreal-Bold'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Bold.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Bold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

/* Neue Montreal Italic */
@font-face {
font-family: 'Neue_Montreal-Italic';
src: local('Neue_Montreal-Italic'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Italic.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Italic.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
:root {
--ff-base: 'Neue_Montreal-Regular', sans-serif !important;
--ff-accent: 'Neue_Montreal-Bold', sans-serif !important;
}

[TvanDonselaar]

Thanks for your help guys.

I also included it in the header html (which is probably not the best solution but for troubleshooting sake). See both css and html code when viewing page source but it's not appearing.

http://onomondo-3988323.hs-sites.com/paid-search-template-0

Probably I'm seeing something pretty obvious but lacking real experience here. 

[Anton · Accepted solution]

Hi @TvanDonselaar, 

it's okay for debugging - but for production you should remove it. 

For me the headline(s) are getting the font. 

But you have an enourmous amount of CSS coming in. 

My recommendation is: 

Check your base/layout HTML template

you should find there something like

{{ require_css(get_asset_url("../../css/main.css")) }}
    {# This is intended to be used if a template requires template specific style sheets #}
    {% if template_css %}
      {{ require_css(get_asset_url(template_css)) }}
    {% endif %}
    {{ require_css(get_asset_url("../../css/theme-overrides.css")) }}

the 

{% if template_css %}
    {{ require_css(get_asset_url(template_css)) }}
{% endif %}

part is the part where your head include is getting loaded in. 

So for debug purposes you could cut this part and paste it below 

{{ require_css(get_asset_url("../../css/theme-overrides.css")) }}

by doing this everything that is added in the template/page builder will be loaded after the override and therefore not be overwritten by it. 

BUT

This is defintely only for testing and I don't recommend this for production. 

A better way would be to add this part to your child.css

{# Neue Montreal Medium #}
@font-face {
font-family: 'Neue_Montreal-Medium';
src: local('Neue_Montreal-Medium'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Medium.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Medium.woff2') format('woff2');
font-weight: 500; {# or try 600 #}
font-style: normal;
}

{# Neue Montreal Bold #}
@font-face {
font-family: 'Neue_Montreal-Bold';
src: local('Neue_Montreal-Bold'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Bold.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}

{# Neue Montreal Italic #}
@font-face {
font-family: 'Neue_Montreal-Italic';
src: local('Neue_Montreal-Italic'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Italic.woff') format('woff'),
url('https://3988323.fs1.hubspotusercontent-na1.net/hubfs/3988323/avidly/fonts/NeueMontreal-Italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
}

{% set main_font = "'Neue_Montreal-Medium', Arial, sans-serif" %}
{% set main_font_weight = 400 %}
{% set head_font = "'Neue_Montreal-Bold', Arial, sans-serif" %}
{% set head_font_weight = 700 %}
{% set italic_font = "'Neue_Montreal-Italic', Arial, sans-serif" %}
{% set italic_font_weight = 400 %}


body{
font-family: {{ main_font }};
font-weight:{{ main_font_weight }};
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
font-family: {{ head_font }};
font-weight:{{ head_font_weight }};
}

i, em{
font-family: {{ italic_font }};
font-weight{{ italic_font_weight }};
font-style:italic;
}

p{
font-family: {{ main_font }};
font-weight:{{ main_font_weight }};
}

Hope this helps

best, 

Anton

[BarryGrennan]

When you say it's not available when constructing the landing page are you looking for it as an option in the richtext editor font drop-down? That isn't possible.

Anton's css/hubl solution is absolutely the best way to go about using custom fonts

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact

[Anton]

Hi @TvanDonselaar, 

how (and where) exactly do you put this in? 

Just asking becuase the code seems legit but while inspecting the preview link I couldn't find anything related.

My recommendation would be to put this at the very top of your main CSS file and check again. By doing so you'll avoid possible loading issues.

Also check if your font settings in the h-tags, body, and p-tag do include the desired font-family. Either as Hubl(my personal favorite), :root-variable or plain text(not recommended but would work)

Heres an example with Hubl variables:

{% set main_font = "'Neue-Montreal_Regular', Arial, sans-serif" %}
{% set main_font_weight = 400 %}
{% set head_font = "'Neue-Montreal_Bold', Arial, sans-serif" %}
{% set head_font_weight = 700 %}
...

body{
font-family: {{ main_font }};
font-weight:{{ main_font_weight }};
}

h1,h2,h3,h4,h5,h6{
font-family: {{ head_font}};
font-weight:{{ head_font_weight }};
}

...

hope th is helps.

best,

Anton