Font Change on Production

Support
, ,
1

Hey, I need help trying to get the Playfair font right.

The font is a link to Google Fonts which uses three fonts: Playfair, Roboto and JetBrains Mono. JetBrains and Roboto work fine, but Playfair seems to not be right, it’s the ‘2nd’ that identifies it the most.

Here is the code for the font:

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Playfair:wght@500&family=Roboto:ital,wght@0,400;1,900&display=swap');

dev
dev1906×1636 261 KB

top: https://jessedoka.co/

bottom: Development server.

I have checked the network tab and it does return with a status code 200, so I know that all the fonts have been retrieved. (wish I could show it but I can only upload one image).

I can see that when I click on the permalink from the deployment it works, but the main domain seems to ignore the font.
https://649397f6365f4b00088b724d--jessedoka.netlify.app/

Could it be something to do with licensing? Any help would be appreciated.

2

No, it just looks like there is a mismatch between what you’re loading and what you have specified.

As you’ve mentioned, the URL in the head has:

https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=Playfair:wght@500&family=Roboto:ital,wght@0,400;1,900&display=swap

The important part being:

family=Playfair:wght@500

That particular element has a font-family of:

font-family: Playfair Display,serif;

There is no Playfair Display so it’s appearing as serif, but if you change it to Playfair,serif then you’ll see the font change.

Note that if you have Playfair Display installed on your computer locally, it would explain why you may see it there while others may not.

1 Like