Using Web Fonts in WYSIWYG Web Builder

Until a few years ago you could only use a small selection of web-safe fonts. Thanks to @font-face (which is supported by all modern browsers) you can now use (almost) any font without having to worry whether or not the font is also installed on the computer of your website visitors. WYSIWYG Web Builder supports several ways to use web fonts in your pages:
• Automatically use @font-face for non-web-safe fonts.
• Manually specify @font-face fonts.
• Google Fonts

You can find the web fonts options in Tools -> Options -> Fonts

Automatically use @font-face for non-websafe fonts

If you enable this option you will be able to use any TrueType font even if it's not web-safe by using a new CSS3 feature called @font-face. WYSIWYG Web Builder will automatically generate the necessary code and upload the font to the server. Unfortunately, not all browsers support the same font formats. Via the 'Manage' button it is possible to configure which font types will be published. Currently, TTF and WOFF are supported by most modern browsers.

Be aware that font files can be pretty large, so they can add a considerable weight to the page.
Make sure you check the license of the font you wish to use, as most fonts are not licensed to allow this kind of use. Making the font available on your server may violate the font's license agreement.
Not all fonts can be used in websites. Make sure you test the fonts in multiple browsers and on different devices!

Manually specify @font-face fonts

In some cases, it's necessary to manually configure @font-face. For example if it's not possible to automatically determine the filename associated with a specific font or if you want to use separate files for each format. Using this option allows advanced users to manually link font files to a specific font. Note that the (TTF) font should already be installed otherwise it will not appear in the font name list.

Google Fonts Manager

Adding Google Fonts to your website has never been easier. Unlike in previous versions, Google Fonts no longer have to be manually downloaded/installed from the Google website, The Google Fonts Manager takes care of this! Fonts installed through the Fonts Manager will be available in the font selection list, and the necessary CSS code will be generated automatically when you preview or publish the website.

Fonts can have different variants, like light, medium, bold, regular etc. The available variants can be enabled per font.

Check for missing Google Fonts when loading a project.
This will scan the project for missing fonts and prompt to automatically install the missing fonts.
Note that this option may increase the loading time of the project because all pages are checked for missing fonts.

Host Google Fonts locally for better performance and privacy
Normally, Google Fonts are loaded from Google servers. This means that an extra CSS file needs to be loaded and two extra DNS lookups (fonts.googleapis.com and font.gstatic.com). When you do host Google Fonts locally, all the requests will come from the same domain as your other assets. Also, there may be privacy concerns when using Google services. Hosting Google Fonts locally eliminates font-related requests to Google's servers, which can improve privacy and reduce external dependencies.

Variable Fonts

A variable font contains multiple variations of a typeface (such as weight, width, and slant) within a single file. This allows multiple font styles to be stored in a single file, potentially reducing the number of font files required and offering greater flexibility in typography.

The Font Manager has an option ‘Show variable fonts only’. This will hide all classic fonts and only show variable fonts.
When a variable font has been selected, the sliders can be used for adjusting weight, width, and slant, allowing you to preview how a font might appear. The sliders in the Font Manager are for preview purposes only. To apply variations to an object, use the Variations button in its style properties.

If you select a variable font in the style properties, then the ‘Variations’ button will be enabled, to fine-tune the font’s properties.

Notes:

Currently the standard text object (rich text) only supports named variants: condensed, expanded, bold, extrabold etc. Therefore, there are no sliders to fine-tune the font. Rich text uses standard Windows functionality so hopefully Microsoft will give developers more control over this in the future. Alternatively, you can use the 'Heading' object (which also supports a 'paragraph' mode) for text blocks.
Bold, Italic, and font variations are mutually exclusive, so they cannot be active at the same time. If you enable bold or italic, then font variation will be reset (and vice versa)

Not all Google Fonts support variations. In the Font Manager you can select to display variable fonts only.

It is also possible to search for specific 'axes'. For example, if you type 'weight' or 'slant' in the search field then only fonts that support this functionality will be displayed.

Upgrading from legacy Google Fonts