Use free webfonts in Sandvox
As you probably know, a well-formatted web page should use only some specific fonts and this is because the web designer has to be sure that the font used is available on the visitor’s computer. If you create a page and choose “Arial” for your text, your visitor will see that page more or less the same way you see it, because Arial is installed on (almost) any computer.
While many elements of the page (colors, boxes, margins, font sizes and so on) are created by the browser following the instructions found in the css file, to display a specific font family the browser has to ask the OS, because neither it nor the css file have any information on how to draw, for example, an “A” using Times New Roman or Arial: for them an “A” is just an “A”.
To be sure that users will see your page as close as possible to what you planned, you need to add some other choices to your style. It’s so conventional that, if you take a look at any css file, you will probably see this text somewhere:
this means: my text has to be displayed in Arial, but if you haven’t got it on your computer, you should use Helvetica instead. If you’re unlucky and don’t have Helvetica neither, just use your default sans-serif font, whatever it is. For serif fonts, the usual formula is:
During the last years the number of fonts available on most computers has increased, giving us more choice (Trebuchet and Verdana for sans-serif fonts, Georgia for serif and so on). For example, this was the default style for text in the previous version of this website:
font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
Lucida Grande is available to every Mac with MacOS X and Lucida Sans Unicode (which is very similar to Lucida Grande) is available on many recent PCs; the other ones will use Arial.
So we have now more choices and our pages are a little less boring than ten years ago, but still we have to stick to a small number of typefaces.
The good part is that:
- they are available for 99% of your visitors
- most of them are designed specifically for the screen and look pretty good on it
- most of them are available both on Mac and PC, so they look – more or less – the same way on both platforms (actually there are many other variables here, but this is another story and it’s not related to fonts)
What if I need more?
In certain situations you may want to add some spice to your website, to make it really peculiar. Till now, you had to use some complex tecniques to display fonts not available on the user’s computer (for example using an image instead of a text, or using flash), but the downsizes have always been, in my opinion, much more than the advantages.
Now (thanks God!) we have many modern browsers around, so we can rely on CSS2 and CSS3 tecniques to enrich our visitor’s experience, and things are much easier. If your visitor uses an old browser, he simply won’t enjoy the extra feature you’re offering, but will be able to access its content without problems. If, on the other hand, he uses a modern browser (Safari, Firefox, Chrome, Opera and for some features even the latest versions of Internet Explorer), he will see a richer page.
In this tutorial I’ll explain how to use a font that is not on your visitor’s computer for your page: there are many ways to do this and you can use virtually any font, but for now I’ll stick to the simplest one (it’s the easier one and you won’t have licensing problems – remember that many fonts are released under a specific licence and if you use them you’re supposed to be allowed to!).
Let’s pretend I want to change the font for this post to Cantarell: I’m sure this is not a popular font. If I change my style to:
font-family:Cantarell, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
only an irrelevant part of my visitors will see it (who’s got Cantarell on his computer?). But Cantarell is released under a SIL Open Font Licence, so I could download it and embed it into my website using a recent CSS tecnique.
Since we want to keep thing simple, we still aren’t satisfied. Luckily, Google has placed this font on its servers and allows anyone to use it. You don’t even need to download it on your server, you can just link their version.
Let’s do it
Let’s customize a website created with Sandvox and, for example, my Lake design. Lake uses Georgia for its header, according to this style:
font-family: Georgia, "Times New Roman", Times, serif;
text-shadow:#999 1px 1px 3px;
and we want to change it to Cantarell. First of all, let’s write down the new style the usual way (we don’t care about the other properties, so we just tweak font-family omitting the others – remember to add the
!important word at the end):
font-family: Cantarell, Georgia, "Times New Roman", Times, serif !important;
This doesn’t work yet: we have to tell the browser where to find Cantarell. Google gives us the correct link: http://code.google.com/webfonts/family?family=Cantarell#code.
You have two choices: you’ll find the code in that page, and these are the two final possible results (for what it worths, I prefer the second one):
Now your header will be displayed using Cantarell instead of Georgia. Let’s dare more and change every paragraph of the main body to Cantarell (which used to be Arial):
You can choose between many different fonts, starting from the Google Font Directory.
Things you should be aware of
- You won’t see the difference inside Sandvox, so try to export your website locally to take a look (menu “Site” > “Export…”) before you go online.
- A font family looks pretty different at different sizes: Arial 11px looks good, Cantarell 11px maybe not; you sometimes have to change the size too, not just the family and this could be tricky. I suggest you to use these fonts only for headings or for simple websites that make you feel in control of what’s going on.
- Try to visit your website from a different computer too, to see if it looks good.
- Remember that only modern browsers will display the new font, older ones will still display just Georgia (in this case), so don’t rely on it totally, just consider it as an extra feature.