[wfl] Webfontloader

We (twobox.com & delahaye.de) have just released our new extension "Webfontloader".

The Webfontloader enables you to use fonts provided by various suppliers very easy with Contao:

• Google Webfonts[/*:m:rm39qsab]
• Fontsquirrel @Fontface Kits[/*:m:rm39qsab]
• Typekit[/*:m:rm39qsab]
• Monotype (fonts.com)[/*:m:rm39qsab]
• CSS files with @font-face settings (locale and external)[/*:m:rm39qsab]
• Font files (.eot, .woff, .ttf, .svg, locale and external)[/*:m:rm39qsab]
• Ready-to-use code snippets[/*:m:rm39qsab]

Mostly the fonts can use the Google WebFont Loader, which provides more detailed CSS configurations like while-loading etc.. Other ways of embedding are provided per page layout:

• Google WebFont Loader plus CSS[/*:m:rm39qsab]
• Google WebFont Loader plus CSS in noscript-tag (doesn't validate unfortunately)[/*:m:rm39qsab]
• CSS only[/*:m:rm39qsab]
• Google WebFont Loader only (which makes fonts available with Javascript only)[/*:m:rm39qsab]

The Fontsquirrel @Fontface-Kits are automatically downloaded and transferred into the Contao file manager.

Attention: Please read the licenses of the fonts used, because they differ a lot. Some providers e. g. want the website manager to suppress hotlinking of the font files.

We are working on a documentation. But until it's available you'll be fine to use it if you take a look at the hints at the fields.

By now it's a beta version. Please use it, test it and tell us about the bugs you found. But it's already quite stable now :D

Regards,

Christian & Markus

This looks very cool. Thanks for releasing it.

Hi Christian,

As Brian says this looks a cool extension.

Just had a quick play and was hoping to work with fontsquirrel, but I don't see any options for that, am I missing something?

Ta, Gary.

[attachment=0:1ukqnj4u]wfl.PNG[/attachment:1ukqnj4u]

Hi Gary,

you got stuck at the 1st part of the configuration ;-) In the actual version (beta3) I renamed some things to make it clearer until a documentation is out. Maybe I also can add a few help wizards in the BE.

The 1st part is to create a font collection. Just like the news archive or the faq archive. Here you also put in the typekit-id and monotype-id, because you can only use one per site and don't need more configuration.

In the 2nd part you fill the font-collection with font-definitions. This can be Google, Fontsquirrel, self-hosted etc. Even mixed, so you e.g. can have 2 Google fonts, 1 Fontsquirrel and 1 with self-hosted files in a single configuration using only 1 Google WebFont Loader for all of them. Here you are only asked the values needed by the font-supplier.

Finished with that, you address those collections in the page-layout to use them. After this the fonts are usable in your own CSS like system-fonts and you don't need to bother with loading them and getting them into your site. Additionally, you can use the special CSS-selectors Google provides with its WebFont Loader.

Best regards,

Christian


PS: Do you want to take a look over the English translation? Maybe it's a bit "unusually" done by me ;-)

Hello,

Is there somewhere an english documentation for wfl ?

I'm trying to use self-hosted Google web font but I'm experiencing latency when charging webpages. How can I optimize it?

Is it better to use fonts directly from Google website ? But i don't understand how the javascript code has to look like in event fields.

Thanks for your help.