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.