So you want to change your web font?

Background: CSS Stylesheets give web designers many options for deciding how to display text on our websites. A lot of the great functionality that text brings to digital media — screen readers for the visually impaired, small file size compared to images for easier access with slower connections or limited data plans, cross-platform uniformity, and automated indexing — can, through the magic of HTML and CSS, be altered to achieve the right “look” for our design goals.


font family: (Arial, Verdana, Times New Roman, etc)

font size: (in pixels, i.e. 18px, comparative, i.e. extra small, and other typographic measurements)

font design choices: (whether italic style, bolder or lighter weight, small caps variants)

and nitty-gritty web typography such as letter spacing,
word spacing,
and we can even mess with


So how to?

In this post, we’re going to alter the font family using hand-coded CSS.

The preferred way to edit your font family in CSS is to create a separate style sheet that is linked to your HTML document in the header section. (If you need help with how to do this, check out: W3School’s CSS how-to.

In your CSS sheet, called, for example, example.css, you may decide you want to create a ‘style’ that can be used many different times in your web page — maybe you want to quote song lyrics. In your CSS document, you’ll want to create a class.

We do this by adding a new line to our CSS file that looks like the following:
.song { font-family: Arial, Helvetica, sans-serif; }

.song {
font-family: Arial, Helvetica, sans-serif;

Note: the syntax to create a class uses a “.” symbol before the name you choose (I chose ‘song’); the syntax to create an id uses a “#” symbol.

“The font-family property should hold several font names as a ‘fallback’ system. If the browser does not support the first font, it tries the next font.”1

Now that we’ve added the class to our CSS sheet, we have to apply it to our song lyrics in our HTML document.

<span class="song">la la la</span>

We ‘wrap’ the song lyrics in an appropriate tag, making sure to open the tag (<span>) and close it afterwards (</span>). Here we use the ‘span’ tag, which is sort of a generic tag used to carry class styles and javascript. In the opening tag, we add the class element (<span class="????">) and set the value to the name of the class we defined in our external CSS document (<span class="song">).

When we view our HTML document in our web browser, it will render the text in the font family that we’ve chosen, going with the first option in the list that is installed on our computer.

Arial, Helvetica, or sans-serif rendered web fonts

In the next post, I’d like to show you how to use newer CSS features to embed fonts into our web sites, so that the browser will display exactly the font we choose.

Further reading: The W3School has a great tutorial on CSS, and these sections deal with styling texts and fonts:
1. CSS Text Styling
2. CSS Font

(P.S.: You can also view the source on this web page to see what style properties were used to style the examples up at the top of the post.)
This post brought to you by the letter: D


~ by deefb on September 24, 2013.

%d bloggers like this: