Not a Good Font

Developer Support CMS Development
1

Hello everyone,

I’ve an issue with one of my fonts, the heading one.
I’ve a custom font, not a Google Font. I’ve followed this documentation to import it : Use fonts in HubSpot

So I’ve on the top of my CSS one line :
@font-face { font-family: ‘Druk’; src: url(‘https://f.hubspotusercontent40.net/hubfs/7721299/Druk-Medium.otf’) format(‘eot’), url(‘your_font_file.woff’) format(‘woff’), url(‘your_font_file.ttf’) format(‘truetype’);}
And an other one below :
{% set heading_font_family = “Druk, Sans-serif” %} /* Heading Font */
like this :

38331iCBDE8B7F59C78368.png

But it’s still not working, I’ve the first screenshot on my chrome browser and the second is in every other browser (inclunding mine, inclunding in private nav)

38329i552933E69E87FFF0.jpg
38329i552933E69E87FFF0.jpg999×466 50.9 KB

The font I have on Chrome Desktop (Druk)
38330i079A2EC44A79595E.jpg
38330i079A2EC44A79595E.jpg998×421 58 KB

The font I have on every other desktop :cry:

You know how can I manage to have the Druk font on every H1 ?

Thanks a lot,

Pierre

2

Hi @pierrelevi , can you send a published link or a preview of your page for us to analyze in production?

Big hug! :slightly_smiling_face:

3

Hi @pierrelevi,

Your font format is wrong; EOT font format is only supported by IE. Change your format to opentype (which is what OTF stands for)

@font-face {
 font-family: 'Druk';
 src: url('https://f.hubspotusercontent40.net/hubfs/7721299/Druk-Medium.otf') format("opentype");
}
4

It worked perfectly !!!

Thanks a lot,

Pierre