Fonts in website builder and on websites differ
When adding Google fonts to your website, sometimes you may notice that the 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, and so on. Each of these options may have its separate width, which is defined as a number like 400, 700, etc. Usually the problem is caused by some style options not being enabled in the Font 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, make sure that the Regular 400 Italic option is enabled for the font. If you use bold text with this font on your page, make sure that the Bold 700 option is enabled. Finally, if you use text that is both bold and italic, enable the Bold 700 Italic option. Inside the editor, all font versions are loaded at once, so you can see the text with a correct font. However, the published website only gets those versions that are enabled in the Font Editing dialog for optimization purposes.
› › ›
AI Website Builder For Resellers

Fonts in website builder and on websites differ

When adding Google fonts to your website, sometimes you may notice that the 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, and so on. Each of these options may have its separate width, which is defined as a number like 400, 700, etc.

Usually the problem is caused by some style options not being enabled in the Font 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, make sure that the Regular 400 Italic option is enabled for the font.

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

Finally, if you use text that is both bold and italic, enable the Bold 700 Italic option.

Inside the editor, all font versions are loaded at once, so you can see the text with a correct font. However, the published website only gets those versions that are enabled in the Font Editing dialog for optimization purposes.

People also found this article using these queries:

  • Fonts are different
  • Text looks different on published website
  • Why does text style change on published website?
  • How to make text style look the same in builder and on website?
  • Text style on website is different
  • Why does text style differ?
  • Font styles in builder differ from those on website
  • Why is font different?
  • Text is displayed differently on website and in builder
  • Text style looks different
  • How to make text style look same in builder and on published website?
  • Visually text is different on website
  • Issue with text font
  • Text fonts used in builder are not the same as on website
  • I see differences between text in builder and on website
  • Why do I see different text styles in builder and on published website?
  • Text styles differ
  • Not same text styles in builder and on website
  • Text style in builder and website is different
  • I have problem with different text style in builder and website
  • Different text font
  • Text in builder and website does not look same