The Google Web Fonts API helps you add new and different web fonts to any web page.

Benefits of the Google Web Fonts API include:

  • A choice of high quality open source fonts.
  • Works in most browsers.
  • Extremely easy to use.


Google webfonts offers many ways to load webfonts, including:

  • loading a css file trough html with the link tag
  • loading a css file trough css @import selector
  • loading fonts and style trough a javascript loader, using specific code or trough the google js api.

The recipe

I tend to like having at first everything on the server-side and not using any javascript.

It kind of goes against the trends in web design and web programming these days.

The non-js method of loading/configuring things on the server side is so small in footprint that it is really nothing.

If things get too heavy, AFAIK, one can always serve site contents trough CDNs, as prices are getting cheaper AND there are public and free CDNs out there as well.

Loading webfonts on the client-side looks nice but, will not be available to those with javascript off. The css and html methods would not fail for the user.

I've chosen the @import method as it is the simplest way of doing it.

Apparently this doesn't work, so the link method will be used.

Perhaps in the future, I will include an option to use the javascript loader.

The structure

We have an array, each key becomes the name of the web fonts that were preconfigured, holding options for each font.

The key can follow the scheme bellow:

font-family + font-style + character-set





or even


Or it can be anything you want, this is just a sugestion.

The array name could be named creatively like:

You'll have to remember the name of the keys, to call it from a page with this markup:

The markup will not render anything and a css @import url(url-of-web-font); <link> tag will be set in $HTMLHeaderFmt.

From this point on, you can use wikistyles to set new font-family and other font options with css "font-*" properties.

Perhaps it would be also good idea to set predefined wikistyles, like:

But the amount of combinations we get if we use all font-* css properties, makes this unpratical.

The Change

This is not the best way to do this script, we will try to make it better.

What we can change is that the markup can be requested more than one time in each page, more then one font can be request each time, but will generate one <link> in html markup.

So, many calls to (:font font-name, font-name:) will have to fill a variable somewhere and after all the wikipage is processed, we process the variable changing key names per values and than we send ONE <link> to $HTMLHeaderFmt.

That solution is much better than the first one.

So now we will have just:

There is a markup change as well, because now we just reserve fonts:

When we process the in page request at the end of a wiki page, we generate a family variable and append all the values, separated by comas, in exchange for the requested keys as above, and we also create a subset variable where we append all the subset requests.

After that we will build the url with the query variables that match the variables we have just created after processing all requests.

The source - v2

The source - v1


We have detected some problems with family selector names, as it was not possible to use the font "Source Sans Pro", as you can see in the section bellow. We don't know why this happens, we tested and tried everything.


This is the Source Sans Pro webfont!!!

This is the plaster webfont!!!

This is the Emblema one webfont!!!

This is the Henny-Penny webfont!!!

This is the butcherman webfont!!!

This is the creepster webfont!!!

This is the dr sugiyama webfont!!!

This is the monoton webfont!!!

This is the ewert webfont!!!

This is the eater webfont!!!

This is the nosifer webfont!!!