Cannot add custom fonts to templates

Developer Support CMS Development
, ,
1

Hello, I am trying to add the Myriad Pro font to a website page using the Atlas Free template. I understand that I have to use a stylesheet and have added my stylesheet via Settings --> Website --> Pages, but nothing has changed. I also tried adding it to the website page by selecting Edit on the website site page --> Settings --> Advanced options --> Stylesheet, but there is still no apparent change. I’m assuming my stylesheet itself has something wrong with it? Any help would be appreciated, thank you!

@font-face { 
 font-family: 'Myriad Pro Bold Condensed'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDCOND.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDCOND.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDCOND.ttf') format('truetype');
}/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
@font-face { 
 font-family: 'Myriad Pro Bold Condensed Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDCONDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDCONDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDCONDIT.ttf') format('truetype');
}
/*****************************************/
/* Start your style declarations here */
@font-face { 
 font-family: 'Myriad Pro Bold Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDIT.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myraid Pro Condensed'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-COND.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-COND.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-COND.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Condensed Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-CONDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-CONDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-CONDIT.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Light'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MyriadPro-Light.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MyriadPro-Light.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MyriadPro-Light.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Regular'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-REGULAR.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-REGULAR.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-REGULAR.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Semibold'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-SEMIBOLD.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-SEMIBOLD.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-SEMIBOLD.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Semibold Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-SEMIBOLDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-SEMIBOLDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-SEMIBOLDIT.ttf') format('truetype');
}
2

Hi @AOuyang,

the font-face settings seems right.

How do you use it?

Implementing custom fonts as font-face isn’t enough.

You should have it like

body{
font-family: 'Myriad Pro', Arial, sans-serif;
font-weight:400;
}

h1, h2, h3, h4, h5, h6{
font-family: 'Myriad Pro Semibold', Arial, sans-serif;
font-weight:600
}
...

Just a tipp: Upload/use only those fonts you really need for the design. Otherwise it can lead to a negative page speed impact.

best,

Anton

3

Okay, thank you so much I was not aware I needed that portion. I tested the HTML code on a custom coded email template and it worked! However, now I am having trouble applying it to the theme we want to use for our website, which is Atlas Free by Kalungi. All the bolding from the original theme seemed to have diappeared, but the font itself has not applied.

The stylesheet is applied via Settings --> Website --> Pages. I don’t see an option to add the stylesheet under “Edit theme settings.” Could you advise on this?

Thank you so much,

Angie

4

Hi @AOuyang,

awesome - happy to hear that it’s working for you!

you’re doing custom fonts for emails?

That’s a whole other story :grinning_face:

For emails you have to apply everything in the template for best client support.

So for instance if your <head> looks currently like this

<head>
...
<style>
...
body{
font-family: 'Myriad Pro', Arial, sans-serif;
font-weight:400;
}

h1, h2, h3, h4, h5, h6{
font-family: 'Myriad Pro Semibold', Arial, sans-serif;
font-weight:600
}
...
</style>
...
</head>

some email clients will show Arial instead of Myriad since the font isn’t installed on the recievers device.

To provide better support for custom fonts (still not guaranteed that it will work in every client) you should implement the @font-face part into it so your <head> will look like this:

<head>
...
<style>
@font-face { 
 font-family: 'Myriad Pro Bold Condensed'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDCOND.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDCOND.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDCOND.ttf') format('truetype');
}/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
@font-face { 
 font-family: 'Myriad Pro Bold Condensed Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDCONDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDCONDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDCONDIT.ttf') format('truetype');
}
/*****************************************/
/* Start your style declarations here */
@font-face { 
 font-family: 'Myriad Pro Bold Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-BOLDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-BOLDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-BOLDIT.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myraid Pro Condensed'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-COND.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-COND.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-COND.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Condensed Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-CONDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-CONDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-CONDIT.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Light'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MyriadPro-Light.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MyriadPro-Light.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MyriadPro-Light.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Regular'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-REGULAR.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-REGULAR.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-REGULAR.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Semibold'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-SEMIBOLD.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-SEMIBOLD.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-SEMIBOLD.ttf') format('truetype');
}

@font-face { 
 font-family: 'Myriad Pro Semibold Italic'; 
 src: url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.eot/MYRIADPRO-SEMIBOLDIT.eot') format('eot'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.woff/MYRIADPRO-SEMIBOLDIT.woff') format('woff'), url('https://20780731.fs1.hubspotusercontent-na1.net/hubfs/20780731/Fonts/Myriad%20.ttf/MYRIADPRO-SEMIBOLDIT.ttf') format('truetype');
}

body{
font-family: 'Myriad Pro', Arial, sans-serif;
font-weight:400;
}

h1, h2, h3, h4, h5, h6{
font-family: 'Myriad Pro Semibold', Arial, sans-serif;
font-weight:600
}
...
</style>
...
</head>

also just a few tipps:

  • rename the files so they don’t contain spaces. This will eleminate possible loading issues since spaces are translated to “%20” and a browser or client might have issues to find/connect the file.
  • When copying the path to file - select a different domain which is connected to your Hub. Just for a .1% more proffessional look if somebody inspects the mail. (Don’t forget to change the path in the font-face settings)

For the theme part - unfortunatelly I don’t know this theme but in general it’s the same approach everywhere:

  • if you can’t modify the theme, create a child-theme or clone/duplicate it
  • open the theme.css(might be called theme-overrides or similar) which is located in the css folder of the theme
  • place your font-face code at the very top of it
  • search for something like (it’s different in every theme)
    {% set secondary_font = theme.fonts.secondary %}
  • look for the usecases of each part - it will be used as
    {{ secondary_font }} in the css
  • once you know which font setting is used for what part replace it with your informations like this
    {% set secondary_font = “‘Myriad Pro’, Arial, sans-serif” %}
  • If you want - write your own settings and modify the theme.css to your needs.

The last part (completly optional) would be to modify the fields.json of your theme by searching for something like

...
{
"name": "font_settings",
"label": "Font settings",
"required": false,
"locked": false,
"children":[
...],
"type": "group",
"inline_help_text": "",
"help_text": "",
"default": {...} 
},
...

And leave a inline_help_text for everybody who might go to the theme settings later.

Something like “The font’s are loaded not through this option. Please contact XYZ if you want some changes”

If you know what you do you could even delete the whole font part. But unless you’re 110% sure what you’re doing - I wouldn’t suggest modifying the fields at this level.

best,

Anton