Unable to add custom fonts within HubSpot Design Manager

[DCarlyle]

Hi all, I added two new company fonts we use based on the instructions here:

https://knowledge.hubspot.com/website-pages/use-fonts-in-hubspot

Once I created a new font folder and added all the various font formats, I went into a _typorgraphy.css file and added them using @font-face. Then I called the fonts within some test headings. The custom fonts added don't pick up properly and don't display.

I am not sure if perhaps the relative/absolute paths for the font locations is the problem. I added the fonts as a folder within the file driectory as well as the main root file folder, and tried to link from both, but no luck. 

Any help would be greatly appreciated!

[Anton]

Hi @DCarlyle, 

my recommendation is:

put your @font-face code at the very top of the "theme-override.css"(or somethign like that) or "main.css" and overwrite some default hubls. 

By default the loading order is as following
- Single CSS files are combined in the main.css file
- main.css is getting loaded in your base.html
- the theme-override.css overrides a few settings of the main.css with the settings you set in the design/theme settings

While there is no right or wrong how to add a custom font, my personal solution looks like this(theme-override.css)

{# headline font #}
@font-face {
font-family: 'headline-font'; {# change the name to the name you'd like #}
src: {# add source(s) here #}
font-weight: {# the font weight of the font #};
font-style: normal; {# unless it's a italic font it's 'normal' #}
}

{# text font #}
@font-face {
font-family: 'text-font'; {# change the name to the name you'd like #}
src: {# add source(s) here #}
font-weight: {# the font weight of the font #};
font-style: normal; {# unless it's a italic font it's 'normal' #}
}

...
{# other hubls #}
...

{% set main_font = "'text-font', Arial, sans-serif" %}
{% set main_font_weight = 400 %}
{% set head_font = "'headline-font', Arial, sans-serif" %}
{% set head_font_weight = 700 %}

...
{# other hubls #}
...

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 }};
}

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

Just a tipp: Don't just copy paste this in your theme-override.css since it might get overwritten by already existing CSS. 

Search for the body, h1-h6 and p element in your CSS and edit it to match the logic. 

(You might need to add those font hubls in other classes, too)

best, 

Anton

[DCarlyle · Accepted solution]

Thanks for the tips Anton, I'll give this a shot, cheers!