# Custom font not available.

**URL:** <https://community.hubspot.com/t/custom-font-not-available/62969>\
**Category:** CMS Development\
**Tags:** design-manager, css\
**Created:** [August 15, 2022, 10:21am UTC](https://community.hubspot.com/t/custom-font-not-available/62969 "2022-08-15T10:21:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TvanDonselaar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tvandonselaar/32/196111_2.png) [@TvanDonselaar](https://community.hubspot.com/u/TvanDonselaar)\
**Post date:** [August 15, 2022, 10:21am UTC](https://community.hubspot.com/t/custom-font-not-available/62969/1 "2022-08-15T10:21:14Z")

</div>

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](http://onomondo-3988323.hs-sites.com/paid-search-template)

/\* @import url(‘[http://example.com/example\_style.css](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](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](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](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](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](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](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;  
}

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 15, 2022, 11:12am UTC](https://community.hubspot.com/t/custom-font-not-available/62969/2 "2022-08-15T11:12:18Z")

</div>

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:

```lia-code-sample
{% 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

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [August 15, 2022, 3:14pm UTC](https://community.hubspot.com/t/custom-font-not-available/62969/3 "2022-08-15T15:14:01Z")

</div>

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

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity)

---

<div class="post-metadata">

**Author:** ![TvanDonselaar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tvandonselaar/32/196111_2.png) [@TvanDonselaar](https://community.hubspot.com/u/TvanDonselaar)\
**Post date:** [August 16, 2022, 9:54am UTC](https://community.hubspot.com/t/custom-font-not-available/62969/4 "2022-08-16T09:54:12Z")

</div>

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](http://onomondo-3988323.hs-sites.com/paid-search-template-0)

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

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [August 16, 2022, 10:24am UTC](https://community.hubspot.com/t/custom-font-not-available/62969/5 "2022-08-16T10:24:51Z")

</div>

Hi @TvanDonselaar,

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

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

![Anton_0-1660645363444.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/0/b0bb2f329f275e081daf2e63b22520b80b8f74bd.png)

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

```lia-code-sample
{{ 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

```lia-code-sample
{% 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

```lia-code-sample
{# 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