Question

Want to add multiple custom fonts, where am going wrong?

  • 14 January 2022
  • 3 replies
  • 16 views

Badge

Hi, 

I want to match my website’s custom fonts (headline and body copy): they are both Google fonts.

I followed the instructions of dragging an empty text block at the top of the template and added this code

<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
a, p, ol, li, ul { font-family: Lato, Roboto,
sans-serif; }
</style>
<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
h1, h2, h3, h4, { font-family: Nanum Myeongjo
, Georgia,
serif; }
</style>

However, the fonts in the template didn’t change: am I working this correctly?

I saw another post that suggested I add these code snippets to every text block where I want the font changed: that seems cumbersome.


3 replies

Userlevel 6
Badge +43

Hi @bhas,

Thanks for sharing this with us.

It’s not necessary to paste the custom font code in every text block. The empty text block at the top of the template is the simplest approach.

I recommend using the code format we have in our help center doc on using multiple custom fonts for google fonts. I see the difference between your code and the code below (taken from the documentation) is you use two separate sets of style tags. I recommend trying to contain everything between a single set of style tags like the following:

<style type="text/css">
@import url('FONT_URL');
p, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
}

h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
}
</style>

I am also attaching a video my colleague Anna put together for adding custom google fonts here.

I hope that’s helpful! 

Badge

Hi, this helped in that I got the new fonts working, for anything new that I typed 

Since I am working on an existing template, the font changes didn’t reflect automatically to the existing text as shown in the Loom video, even after saving and refreshing the template

This can be a problem, as I might have to go and redo all existing copy manually in all the templates and flows.

I

Userlevel 6
Badge +43

Hi @bhas,

Thanks for sharing this update with us.

Glad to hear that it’s working for new text.

It sounds like you’re describing a situation in which existing parts of the template contain inline styles (for font family for that specific piece of text, see example screenshot below). You can verify this by clicking on the source of the block. If you have inline styling, it’ll look like the following:

 

If this is the case, it can be remedied by copying and pasting that section as plain text (as I describe in the post below) 

then the custom fonts should apply as long as the text type is specified in the custom fonts code i.e. font X to display for p,h1,h2 etc.

I hope that helps.

Reply