The Add web fonts window

Step 4 - Pages > Common features > The 'Web Font' window >

The Add web fonts window

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

The Add web fonts window opens when you click on the Add button in the Web Font window, and it contains the options for adding a new web font to the list of those that can be used in the project.

This window has two sections:

Google Font
Web Font
Click to expand/collapseReference: The commands in the Google Font section

When you are choosing a Google font to add to the project, you can use:

a field to search for the font's name.
commands for ordering the fonts according to criteria such as their popularity, the date they were added or the number of available styles.
options for indicating which categories must be included: Serif, Sans Serif, Display, Handwriting, Monospace
the text and size to be used for displaying the font's preview.

When using Google Fonts, the font files remain on Google's servers and your website pages reference the stylesheets.

WebSite X5 automatically downloads the TTF files for the various Google fonts that are integrated in your projects so that they can be displayed offline.

Click to expand/collapseReference: The commands in the Web Font section

First of all, you have to decide how the web fonts are to be integrated in the project:

Online Web Fonts: you can choose to use font files from the server of the font provider. They are referenced in the stylesheets of your website pages.
Offline Web Fonts: the font files are on the local computer and published on the Web server.

Whether you decide to use an online webfont or integrate an offline web font in your project, you will need to import the following

TTF File for offline display: this is the file in TrueType (TTF) format that is necessary for displaying the font offline. With this file, WebSite X5 can use the font as though it were installed in the computer's operating system and so propose it in the text editor and in any other place where it is possible to indicate the font type to be used for a text.

If you use an online web font, you will also need to specify:

@import Code: this is the code, provided by the font provider, that links the font in the CSS stylesheets of the website pages.

If you use an offline web font, you should also import:

WOFF File (recommended): this is the font file in WOFF format. This format is supported by Internet Explorer, Mozilla Firefox and Google Chrome.
SVG File (iPhone/iPad): this is the font file in SVG format. This format is supported by Mozilla Firefox, Safari, Google Chrome and Opera.
EOT File (IE only): this is the font file in EOT format. This format is only supported by Internet Explorer.

Offline web font files are on the local computer and published on the Web server, with the website pages.

Because the main browsers do not all support web fonts in the same way, as well as the TTF file (obligatory), you should also import the WOFF, SVG and EOT files for the fonts you want to use.

 

Because the main browsers do not all support web fonts in the same way, as well as the TTF file (obligatory), you should also import the WOFF, SVG and EOT files for the fonts you want to use.

 


Read the guides:

-

Safe fonts and web fonts

-

How to add a font from Google Fonts