WebSite X5Help Center

 
Nicolai Stoltt H.
Nicolai Stoltt H.
User

Google Fonts Directory use in WebSiteX5  en

Author: Nicolai Stoltt H.
Visited 1146, Followers 4, Shared 1  
Tags: fonts,google

How to implement and refer to Google Fonts Directory in WebSiteX5?
Please read Question in the end of this post if you do not want to read it all :-)

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.

Question:

Is there any other way for me in WebSiteX5 to use these fonts other than to download the fonts from google,  transfer them via their software to control panel / fonts, and then refer to them within WebsiteX5 styles and Models ?


Posted on the
1 ANSWERS - 1 USEFUL - 1 CORRECT
Incomedia
Claudio D.
Incomedia

Hello Nicolai,

The methods to use the google fonts are the ones you described but I would like to suggest that you open an "Idea" Post where you describe to us the feature you would like to see implemented in the future releases of WebSite X5.

Many thanks!

Read more
Posted on the from Claudio D.