💬

End this chat?

This will clear the conversation and close the window.

Jiinubi ChatPal

Online & ready
Agent is typing…
Documentation

Find What You Need

Browse our documentation by category, search for a topic,
or explore popular articles below.

Back

06. Fonts in website builder and on websites differ

Fonts in website builder and on websites differ

When adding Google fonts to your website, sometimes you may notice that font differs in the editor and on published websites (or when previewing the website).

Each added Google font has extra options, like Regular, Italic, Bold, etc. Each of these options may have its separate width, which is defined in number, like 400, 700, etc.

Usually the problem is caused by some style options not being enabled in Fonts Editing dialog in the editor. To fix it, make sure that all font versions (variants) which you use on your website are enabled.

For example, you connect a font which provides the following options:

Regular 400

Regular 400 Italic

Bold 700

Bold 700 Italic

Then, if you use italic text with this font on your page, then make sure that option "Regular 400 Italic" is enabled for the font.

If you use bold text with this font on your page, then make sure that option "Bold 700" is enabled.

Finally, if you use text which is bold and italic together, then enable option "Bold 700 Italic".

Inside the editor all font versions are loaded at once, therefore you can see text with a correct font. But published website gets only those versions, which are enabled in Font Editing dialog for optimization purpose.

Was this article helpful?
Thanks for your feedback!
More in “03. Text” 13 other articles in this category
01. How to use "Text"?

How to use "Text"?  Adding text: Drag and drop "Text" from main toolbar; Choose text composition;…

02. How to add automatically updating date/time to text?

How to add automatically updating date/time to text? Website builder's text editor can display automati…

03. How to change text colour?

How to change text colour? Click on text you want to edit to select it Click "Edit Text" button to n…

04. Button "Generate Text (AI)" is disabled for Text element

Button "Generate Text (AI)" is disabled for Text element The button is disabled because no OpenAI key i…

05. "googleFontsApiKey is not set"

"googleFontsApiKey is not set" In order to fix this problem just create API key from Google by going to…

Up Next
07. How to insert an image near the text?

How to insert an image near the text? Drag and drop "Layout" from main toolbar; Select layout compos…

08. How to make a multilingual website?

How to make a multilingual website?  Adding languages: Drag and drop "Languages" from main toolbar…

09. How to create a link?

How to create a link? Adding link: Select the text you want to turn into a link and click "Edit Te…

10. How to add additional fonts on your website?

How to add additional fonts on your website? Select text you would like to edit in the website builde…

11. How to use GDPR compliant Google fonts?

How to use GDPR compliant Google fonts? Select  Settings dropdown list and Settings again; Select "F…

12. How comply to GDPR rules with Google fonts?

How comply to GDPR rules with Google fonts? Go to My Licenses page; Expand your brand by clicking …

13. Style is not changed when selecting it in the text editor

Style is not changed when selecting it in the text editor There are 3 types of styles in website builde…

14. How to generate texts using AI?

How to generate texts using AI? How to use AI Text Generator: Select an existing text element in web…