Working With Fonts and Text in CSS

By: Daniel Imbellino
Updated: Feb 28, 2013

Setting Font and Text Properties in Your Webpages With CSS

There are a few basic types of fonts you can use in your CSS.
Ex:
This is a "Serif" font. Serif fonts tend to have small extending lines from the ends of characters. A few Serif fonts are "Times New Roman", and Georgia.

This is a "Sans-Serif" font. Sans-serif fonts do not have any additional extensions on the end of their characters, unlike serif fonts. Sans literally means "without". A few of the sans-serif fonts are Arial, and Verdana.

This is a monospace font. All monospace fonts have the same character width. A few of the monospace fonts are "courier new", and "lucida console".

Font Family:
You use the font family property to specify a font or set of fonts for a given element in your CSS like this:
h1 {font-family: "times new roman", helvetica, arial; }
Font names that consist of more than one word should be enclosed in quotation marks. You can create a comma separated list of fonts as we've shown here. If the first font is not available, then the next font to the right is used instead.

CSS Font Style:
You can display text using three different font styles, such as "font-style: normal;" (this specifies no change in the default font), "font-style: italic;" (this displays the text in italics), or "font-style: oblique;" (displays text leaning forward further than italics. It is less supported).
Ex: h2 {font-family: "times new roman"; font-style: italic; }

CSS Font Size:
You can specify the size of your fonts in CSS using percentages, pixels, and em.
Ex: p {font-family: Arial; font-size: 25px; } This sets the font to be 25 pixels in width on the screen.

h1 {font-family: "times new roman"; font-size: 130%; } when using percentages, 100% refers to the actual default size of the font being used. To make your fonts smaller use smaller values, and larger use larger percentage values. 150% would be one and a half times larger than the default font size for example.

ul {font-family: "times new roman"; font-size: 0.5em; } One em equals 16px.

What if I want to use custom fonts in my web pages? Can I do this?

Specifying a font in css relies on the persons computer who is viewing the page to already have that particular font installed in their operating system. Specifying the use of non standard fonts in your web pages will cause users not to be able to see the content in the way it was supposed to be presented. However, with CSS3 there is a new "@font-face" property that can be used to embed fonts into your web pages.

First you need to declare your font in CSS before you can use it as shown below:

@font-face { font-family: "name-of-font.otf"; src: url('path/to/cool.otf') format('opentype'); }

Notice that we must point to our fonts location, whether this be on your current local system, or a web server. Just as with any other fonts used in CSS you must use quotes when specifying a font name that consists of more than one word. Also, you must include the file extension of the given font you are specifying, such as ".otf", or ".ttf". Failing to do so, will result in no text or the systems default text to display the content improperly, depending on the browser. While the W3C (world Wide Web Consortium) made the rule that "you must use quotes to encase font names that consist of separate words", honestly, this didn't always work. Infact, I personally ran into problems with this back in 2008 as not all browsers supported the use of quotes when parsing font names in CSS. I still don't use them now when working with my font names. I guess you have to know when to break the rules and when not to. This problem isn't the first time that standards have been set but not implemented in major browsers. Many past technologies that were set to be a standard were never implemented.

Now we need to call our font that we just declared. We do this the same exact way we do any other fonts as shown below:

h1 {font-size: 45px; font-family: "cool"; text-align: center; } Notice we didn't have to specify the file extension of the font, as we are merely pointing to the name of the font that we declared using the "@font-face" property above.

Using Images to Embed Fonts: Their is yet another way to use various non standard fonts in your web pages. You can use a graphics editing program to create web page banners, buttons, etc, while using alternative fonts of your choosing, and then saving the images as a .jpg, or .png image file. For instance, if you created a banner for your web pages displaying the title of your site, you could use any font you wanted since the banner itself is an image file, and there is no need for the user to have that font installed on their system. Adobe Photoshop is a great program for developing graphics with embeded fonts for websites. There are also free graphics editing programs available like "Paint.net", which can be used to create and edit graphics using free plugins with no fees to users, we use this program more than photoshop here at PCTECHAUTHORITY.

Working With Fonts and Text in CSS - Part 2