Goodbye Google Fonts, hello @font-your-face!

For years it was a struggle to implement non-default fonts in your website. And as a result, many websites still use Verdana or Arial as their default font. Designers were limited to use the 13 or so web safe fonts. And for years, we needed several difficult techniques to add those stylish fonts: either using a script that generates images (createfont.php?string=Mytext) or with font replacement solutions like sIFR, Cufón, FLIR or Typeface.js.

Many of these solutions had downsides: you can’t select the text, it does not work without JavaScript, it isn’t accessible, etc. But that was then. Since a while it is possible to use @font-face definitions in your website to use font files (.ttf, .otf, .eot) that exist on the webserver. The cool thing about @font-face is that it works on all browsers (yes, even IE6!), that it doesn’t rely on JavaScript and that it is fully accessible. Plus that you can use literally thousands of online hosted fonts, free or paid.

Google Web Fonts

When Google released their Font API in May 2010, it took me less than a day to release a Drupal module that enables web developers to use Google Fonts on their website without programming. And in the following months, I’ve spent quite some time to improve it and to keep the font list up-to-date. A year after releasing the module, the team at Google contacted me. They wanted me to know that they were working on an API service that can be used to fetch the whole list of available fonts and they asked for my input and to test it. I’ve implemented their API a few weeks later. Which was a great thing, because this saved me from having to update the module almost weekly as new fonts were now released almost every day. At this time, over 5000 Drupal sites are using the module. 

And then there was @font-your-face!

A while after I’ve released the Google Fonts module, Scott Reynen (sreynen) contacted me to ask if I were interested in joining him on his @font-your-face module. His vision was to have one font module that implemented all avaliable font libraries. At the time, the module did not impress me and I didn’t see the need to use one container module for several font providers. But that has changed.

During DrupalCon London I met Jason Pamental (jpamental) who gave a great talk about Web Fonts. We spoke about the Google Font module and he connected me the Ed Platz, Engineering Manager at Monotype. Ed asked me to help on the @font-your-face module to make it load the Google Fonts dynamically, just as I did with the Google Fonts module. He even offered me to pay me for my work. An offer I couldn’t refuse and so I decided to give @font-your-face another try.

And boy, what was I wrong the first time. The module actually turned out into a great, user-friendly solution to implement thousands of fonts from 7 font providers. It does not only supports Google Fonts, but also Typekit, Font Squirrel, KERNEST, Fontdeck and Fonts.com. It even supports adding your own Fonts!


The admin interface of @font-your-face


Enabling fonts in the admin interface

A long story short...

I decided to stop working on the Google Fonts module and join Scott in making @font-your-face the one-stop solution for integrating Web Fonts in Drupal. I became a co-maintainer and implemented some new features:

  • Make Google Fonts load dynamically
  • Add fonts using the THEMENAME.info file
  • Make fonts exportable with Features
  • And some more minor improvements

So if you happen to use the Google Fonts module on one of your sites, please try out @font-your-face (the 7.x-2.x version) and let me know what you think in the comments. You won’t regret it ;)

Next post

A fresh breeze in my life

Read More »

Comments

What is the current support

What is the current support for @font-your-face for mobile? Is it consitent? How much longer for loading? what kind of latforms/mobile browsers support this?

That depends on the font provider

Hi Nigel. The point is that each platform supports its own font format:

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

Further, mobile browsers like Safari on the iPad and iPhone require SVG.

Some font providers (like Google Fonts) do a browser detection on their server and send you the right @font-face declaration. So when I load:

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

the contents of that CSS file differs when I request it with Opera than when I request it with IE. Pretty cool huh? Google Fonts work perfectly well on iOS devices using iOS 4 and up, but I'm not sure how that goes for the other font providers.

Remember that there is always a fall-back; if the browser can't show the first font, it will fall back on the second declaration. Like this:

h1, p {
  font-family: 'Comfortaa Regular', Helvetica, Arial, sans-serif;
}

So make sure you pick a fall-back font that matches the ideal font, so the differences are minimal. 

For more info, check out this post on Six Revisions.

Still prefer cufon as my font

Still prefer cufon as my font solution. The fonts are so much cleaner cross browser. I have used @fontyourface byt in chrome the font still looks very bumpy , maybe it was just the font i was using but ... I dont have any problem with cufon. I might be overlooking something .

How about my fonts?

Hi Tim,

do you find my fonts bumpy? I use Chrome as well and I think they look good. It might indeed be the font you are using. The problem with Cufon is tht the user should have Flash (so no iPhone support) and that you cannot select the text. Plus that you see a flicker as the default font is replaced with the flash version by Javascript. I don't say Cufon is bad (it really helped before @font-face was available) but at the moment I don't see any added value above @font-face. 

Add new comment | Baris Wanschers

créateur du ÉLEVÉ FOIRE de la VOYANCE de Paris. ensuite référencés parmi les meilleurs voyants dans ces Guides de la Voyance Vous-même tant, profitez de la simplicité d'utilisation de Cosmospace ! Sinon chez'a 2 voyantes audiotel particulièrement qui m'ont bluffées ! unique a été très équitable dans ses prédictions. L'autre est dégourdi d'entrée dans l'état d'raison de la être, de lui-même apposer des demande alors la unité lui répond ! rare télépathe personnalité pense ? Voyance avec paypal ensuite Renaissance uniquement sur RDV précédemment ! En compagnie de la voyance par Audiotel, vous êtes incontestable d'renfermer perpétuellement bizarre voyant à votre écoute , disponible au contraire vous. Vous pas du tout restez pas un estampe à vos doutes après vos crainte. marche chère et sérieuse toi-même permettant d'obtenir bizarre voyance de très élevée qualité ? 7J/7 après 24h/24

Problem with Google fonts and iPad Safari

I replaced the site title and slogan on a Drupal 7 site using the MAYO theme and font-your-face. Looks good on Safari and Chrome for the Mac but on my iPad the lines are just empty space, no text at all. I used two fonts from Google. The site is live at the URL I entered above.

Narrowed down the issue a little

The problem appears isolated to assigning the fonts to the #site-name and #site-slogan tags, at least from what I can see thus far. I applied a third Google font to the H1 tag and that is displaying fine on my iOS devices.

Okay, think I fixed it?

I disabled all the associated modules and the theme, and re-enabled everything from scratch. Now it all appears to be working so I believe the problem was something in my installation.

Add new comment | Baris Wanschers

Have you ever considered writing an e-book or guest authoring on other sites? I have a blog based on the same ideas you disccuss and would really like to have you share some stories/information. I know my readers woupd value your work. If you are even remotrely interested, feel free to shoot me an e mail.

love it

@font-your-face is an awesome tool in my drupal bag.  thanks for the effort to put this together and make it free to the world.

Q: I'm trying to import  a local OTF file, but seems to be failing because of extension.  What is the recommended solution?

Jason.

Add new comment | Baris Wanschers

People with the Clarisonic's scientifically proven ingredients on the skincare and beauty products like moisturizers, acne scar removal sun damage. No doubt we spent a lot. Normally, acne scar removal when you have read the recommendations in The Scar Solution Guide. Laser treatments performed by using pure skincare products.

Quite fast

It's actually quite fast, faster than Flash replacements. The fonts are cached by your browser, so once you have them, the loading goes smooth. By using a font provider like Google Fonts it's even faster, because they use a CDN to deliver the fonts from the nearest webserver in your location.