Fonts in website builder and on websites differ
› › ›
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 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.

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