One of the most important aspect of a page that can be controlled with CSS
is the font.
A font is a
collection of pictures of letters. A letter
is some
kind of Platonic ideal, like perfect circles or archetypal chairs. It's
also a unit of information. Any particular letter is drawn by
some person. Some are simple block letters, others are works of art
(like medieval illuminated manuscripts). A font is a
collection of these pictures, one for each character in the character set.
Fonts are studied in the field of typography, and their study is outside the scope of this course. If you are interested in their history and technique you should take the ART 222: Introductory Print Methods course offered by the Book Arts program.
For many years, fonts in web pages were restricted by the fonts that came already pre-installed in a computer. This didn't allow for a lot of variety in styling. This changed with CSS3 and the introduction of web fonts, which don't need to be installed in one's computer. Furthermore, with the use of the Google Fonts API it is very easy to incorporate such fonts in a website, as we will demonstrate in these notes.
Read the suggested chapter 8 in Head First HTML and CSS for a more detailed account on styling fonts. In the following, we give a very concise summary.
There are systematic ways in which fonts can be characterized:
xx-small
,x-small
,small
,medium
,large
,x-large
,xx-large
You can also use abstract relative
sizes named larger
and
smaller,
that are relative to the surrounding font.
In the following we show two examples of using different font families for
the elements <p>
and <em>
. Notice
how the text changes when the second rule is added.
As we mentioned, with traditional fonts that come pre-installed in our machines, we have only a limited number of choices (since the fonts need to be installed in the machine of the viewers of the page too, not only your own). However, with web fonts (supported by all modern browsers) there are new ways to deliver fonts (either by having your files as part of your website, or by linking to other web servers) so that everyone can see the pages with the font we intended.
Be aware that not all fonts on the Web are free. For some of them you need to pay. Thus, it is better to start your search with one of the services that aggregate fonts that are free for use. Such a website is Font Squirrel, from which you can download the fonts you like. Suppose after browsing the available fonts, you decided to use the handdrawn font Desyrel.
Clicking on the Download TTF
button, you can get the file with the font (after unzipping),
desyrel.ttf
. Then, you can create a subfolder fonts
in the folder
where your HTML and CSS files are stored and then use this font as shown below:
@font-face { font-family: desyrel; src: url("fonts/desyrel.ttf") format("truetype"); font-weight: normal; font-style: normal; } p { font-family: desyrel, cursive; font-size: xx-large; }
This sentence was written with the Desyrel font, downloaded from FontSquirrel.
Unfortunately, things are not so simple. Because there are so many browsers and platforms, to make
sure that all of them will display the desired font, we will need to provide the font in many
different formats (Chapter 8 in your book explains these formats). Thus, the rule for
@font-face
will look a bit more complicated. The good news is that this
code and all the files can be automatically created for you by
Font Squirrel, using its menu for
WebFont Generator, after you upload the file desyrel.tff
(or some other font).
Here is how the automatically generated CSS will look like:
@font-face { font-family: 'desyrelregular'; src: url('desyrel-webfont.eot'); src: url('desyrel-webfont.eot?#iefix') format('embedded-opentype'), url('desyrel-webfont.woff') format('woff'), url('desyrel-webfont.ttf') format('truetype'), url('desyrel-webfont.svg#desyrelregular') format('svg'); font-weight: normal; font-style: normal; }
Notice that the files are referred directly, and you might need to add the relative path to the folder you'll be storing these files.
If this looks like a lot of work, there is an easier way, that doesn't involve having to keep the font files on our own server, we explain this method in the next section.
The easiest way to incorporate fancy fonts in your pages is to use the free service provided by Google Fonts API. API stands for Application Programming Interface. With this method, you only need to perform a few simple steps:
Add to Collection.
Useand verify your choices.
<link>
code from Step 3to your HTML file (it goes in the
<head>
section).Step 4to the CSS rules you want.
You're done. Google takes care of providing all needed format files, you don't have to provide such formats as part of your website.
Here is an example of the code you need to write to create the shadowed header below:
The <link>
line goes into the HTML file:
<head> ... <link href='http://fonts.googleapis.com/css?family=Wallpoet' rel='stylesheet' > </head>
The font-family
style goes in the CSS file (inside the rule for the desired element):
h2 { font-family: 'Wallpoet', cursive; font-size: 200%; color: black; text-shadow: 4px 4px 4px gray; }
We showed here three different ways of styling fonts and that can be confusing at first. Here are some tips for you to decide what to use: