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,
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.
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>
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.
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.
(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