Google Fonts Directory use in WebSiteX5
Autor: Nicolai Stoltt H.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 ?
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!