HTML and CSS Reference
In-Depth Information
Listing 4-14. Using CSS3 Web Fonts (CSS)
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'),url('
eAWT4YudG0otf3rlsJD6zOvvDin1pK8aKteLpeZ5c0A.woff ' ) format('woff');
When we link to the Google provided CSS file, notice that the CSS syntax is essentially declaring a new font face
rule for Oxygen so that the rest of the document can understand what Oxygen is when the font family property gets
assigned to it. In the listing, font family, font style, font weight, and a source to the font file are set for the browser
to use. This portion may seem confusing, but it's really just targeting a WOFF font file. The arbitrary characters are
simply generated at serve time by Google, most likely to mask the file name on their server and count requests to the
file. The WOFF font file is one of many formats in the fragmented web font space (which we'll cover in more detail in
the following sections). What's nice about Google's service is that it detects what browser is requesting the font and
serves up the appropriate format for that particular browser.
Starting off with the one we've just discussed, the WOFF (web open font format) font file is a developing standard for
serving web fonts to browsers. WOFF files are essentially TrueType files compressed for delivery over the Web and
with additional metadata information. The overall goal of the WOFF format is to have one standard that's accepted
across all browsers and light enough to serve to browsers and devices with minimal bandwidth (like mobile). At the
time of writing the WOFF format has been supported by Mozilla's Firefox version 3.6 and up, Google's Chrome version
5 and up, and Opera; it is also supported by Microsoft's IE9. For Apple and Safari, starting at release 5.1, support is
available only on Mac OS X Lion. Many assume that WOFF files will be the de facto standard for delivery of web fonts
in the very near future. My hope is that it does so fragmentation in this space goes away.
TrueType Fonts
TrueType fonts (TTF) are the oldest font formats I'll be discussing. Developed back in the 1980s by Apple, TrueType
fonts are used in Apple's Safari browser before OS X Lion (version 10.7) and Safari version 5.1. If you try validating this
by viewing our Oxygen style sheet URL in a Safari browser, you get the following response from Google:
@font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), url('
WNVARKadHCfwbQ2n3MQeIOvvDin1pK8aKteLpeZ5c0A.ttf ' ) format('truetype');
Thankfully Google is doing the browser detection for you as you can see, the font space is already becoming
pretty fragmented.
Search WWH ::

Custom Search