Webflow not showing Google font correctly

Hello there, I’m having the following issue and no clue what is going wrong.

For this project I’m using the Google font ‘Cinzel’.
On the Google font page the letters ‘ž’ and ‘ě’ are shown in the preview text in the Cinzel font.

But when loaded into the Webflow project, these letters are not recognised and are shown with another font.

You can find the problem in project headers in the last projects on the ‘portfolio’ page.

https://preview.webflow.com/preview/alice-kim-web?utm_medium=preview_link&utm_source=designer&utm_content=alice-kim-web&preview=c1d31fa87e4ac6dc3e44d6b7b7d65d5b&pageId=606adfc3bd18463029f57df2&workflow=preview

Hi @wouterjesse if I can I will say a few notes as you have problem with fonts for Czech language.

  1. Your page doesn’t load Cinzel fonts and fonts used on your page are Cormorant Infant.

and doesn’t load even in preview mode

  1. You have choose Cinzel but there is big difference in thickness and proportions of glyphs above é and ě and your Czech client may not be happy with that.

Try to use Cinzel decorative as there is good balance between ˇ and ' also doesn’t have missing letters.

There is no many free fonts that offer glyphs for Czech language believe me when I have find font face I like it was a challenge to find alternative for Czech language finally I have ended up by buying fonts. As you are using uppercase in titles you can look for font type display as they are optimised (designed) for that.

In meantime check your fonts in WF settings to figure out why they not loading properly and I hope that fonts you will find will work for you once will be loaded into site. As I do not have access to your setting I cant help more. Maybe @cyberdave or @webdev will have idea why and how to.

Hi @Stan, first of all thank you for you input and time to help me out.

My client doesn’t have a problem with the slight thickness difference of the glyphs, but I wonder why the letters with the glyphs are showing totally different than Google Fonts is showing them.
Do you have a clue? Is there some work around that you maybe found from your experience?

Hi @wouterjesse I have tried to replicate your issue and finally I thing I have found where your problem is as cross my mind one case where user had problem with Google document formatting.

I presume you are not Czech and have no Czech keyboard and you have just copy pasted text from provided document that has format of some word processor as MS Word. The thing is that these processors preserve some values (informations) related to text.

All you have to do is convert provided text to PLAIN text before use it in website. If you are on Apple Mac you can simply paste text from provided document to TextEdit app and from there copy/paste plain text into website.

I was able to replicate your issue on my side only when I used (copied) text from your site but when I have wrote text manually all worked fine.

Try copy/paste this text - Marek Ztracený - Když tě život kope do zadku

But …

You can search internet if you will find free alternative to Juana or Apparel Display (both “thin”)
but they aren’t expensive anyway :wink:

Hope that will help

1 Like

hi @wouterjesse have you have been able to try suggested method how to successfully display titles correctly with Cinzel fonts?

Hi @Stan, yes it worked all fine! Thank you so much for your help!

Really makes me wonder why a lot of apps don’t paste plain text as a standard.
Another example are email clients. Who wants to paste text in an email that has totally different characteristics.

1 Like

Here are shortcuts how to paste plain text from clipboard without external app conversion.

macOS : OPTION+SHIFT+COMMAND+V
Windows: CTRL+SHIFT+V (not sure)

set custom shortcut on macOS

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.