Information Technology Reference
In-Depth Information
Web Fonts
You might have remembered that we briefly touched base on working with web fonts in
Chapter 2 when building our "Who's That Tweet?" application. Over the past year and a
half, all of the most popular Desktop browsers have rolled out updates and can now use
web fonts in their markup. Almost all of Android's mobile browsers can use them as
well.
Adding web fonts to your web site or application is easy as pie, as seen in Listing 8-1.
Listing 8-1.
Loading the Droid Sans font into our web browser with a little CSS magic.
<style type="text/css">
@font-face {
font-family: 'Droid Sans';
font-style: normal;
font-weight: normal;
src: local('Droid Sans'), local('DroidSans'), url('droidsans.woff') format('woff');
}
body {
font-family:'Droid Sans', Arial, Helvetica, sans-serif;
}
</style>
Let's take a quick look at the code in Listing 8-1 so you can understand what we are
doing here. The first property we are going to define in our
@font-face
code is the
font-
family
property. Here we can name the font anything we want. We are using the font's
real name here, Droid Sans, but I could have called it "Turtle Wax" if I really wanted to.
Using a custom name may be helpful if you want to use an internal naming structure,
although it might be confusing if you want to use the same font for two different
products.
Next, we are going to define the
font-style
of our new font. This is important because
we can have different variants of our Droid Sans font load depending on what the
font-
style
is. This is the area where you, as a developer, will want to be careful to make sure
you don't go overboard and load 10 different variants of a font when they're not needed.
Not only does this clutter up your code, it also loads resources unnecessarily, which
bogs down the user experience. In this case, we simply want to use the default or
'normal' look for this font; i.e., we do not want italics.
After our
font-style
we have our
font-weight
. This, just like the property before it, can
be used to load different versions of a font, such as Droid Sans Bold.
Last, but not least, we have our
src,
which is used to tell your computer where to find
our font on the server as well as what the font might be called on the user's computer. If
the font is on the user's machine, this could end up saving us some bandwidth by not
having to download a file we already own. While local loading is preferable much of the
time, you might run into situations where you want the font loaded from another
location, such as when you are testing a variety of font styles to determine the best fit.
