WebSite X5Help Center

 
Nicolai Stoltt H.
Nicolai Stoltt H.
User

Google Webfonts in Website X5  en

Author: Nicolai Stoltt H.
Visited 2549, Followers 3, Shared 0  

Implementation and reference to Google Fonts Directory in WebSiteX5?

This is almost a "must have" feature in Website X5 - Why not ?
Implemented in the "kernel" so that the fonts are visible in the GUI when selecting a font under styles and models. (Building the CSS in X5)

FYI:  I little more about Google font directory:

To build the CSS in WebSiteX5 one has to go to Advanced Settings / Styles and Models.
Here one can e.g. define the default font and size for page text.
This is only possible if the font is installed on the local machine.

but

Google came with a new idea in their list of web toys. A font directory that allows you as a web developer to include some “fancy” fonts in your pages without struggle

There are two ways to use this on your site

The first one is simple and only requires a css file retrieved from Google’s servers like below:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">   <style> body { font-family: 'Tangerine'; font-size: 48px; } </style>

You need to specify the family of the font and if it contains spaces you need to replace this with a “+” (plus character) sign

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans">

You can load multiple fonts in a single call. This will decrease the loading time because you use only one http request. The multiple fonts will be separated by a “|” ( pipe character ) sign.

The second option

The second option to load the fonts is to use the webloader (Javascript) that Google offer for this. This script can be called directly ( which is faster) or using their AJAX API functions. The main advantage of this method is that you can load fonts provided by TypeKit and Google or from any other font provider at the same time from the same library.

WebFont.load({   google:{ families:['Tangerine','Cantarell']},   typekit:'myKitId',   custom:{ families:['OneFont','AnotherFont'], urls:['http://myotherwebfontprovider.com/stylesheet1.css','http://yetanotherwebfontprovider.com/stylesheet2.css']}});

The disadvantage of this method is the increased loading time comparing to the simple method.

Posted on the
1 ANSWERS
Incomedia
Claudio D.
Incomedia

Hello Nicolai,

Thank you very much for the suggestion. We will take it in consideration for the future releases of the program.

Many thanks!

Read more
Posted on the from Claudio D.