Change the font of text with CSS

bateto — Sat, 10 Oct 2009 13:53:52 +0000

We can specify the font, with which the text to be displayed. This made using the property font-family. Then we have to assign a value to this property.

p{
    font-family: "Times New Roman";
}

Discussion

As well as specific fonts, such as Times New Roman or Tahoma, CSS allows the use of some more generic font families, which are:

serif
sans-serif
monospace
cursive
fantasy

When we specify fonts, we should not forget that there is a possibility that the user doesn’t have the defined font installed on its computer. If we define a font and it happens that the user does not have, then the text will be displayed with the default Web browser’s font.

We can simply use generic font names and let user’s systems to decide which font to apply. If we want the document to look like it uses Arial (sans-serif font) for example, then we could use the following code:

p{
    font-family: sans-serif;
}

It could be used also more complex declarations. Then the first font will be used, but if it is not available then the second font will be used. So there is a reason to make the last font a generic, which we will be used at any case.

p{
    font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}

Replace font tags with CSS

bateto — Sat, 10 Oct 2009 13:47:23 +0000

We can style text with CSS for a lot of time. So there is no big reason to continue to use the tag to style text. Instead of this deprecated tag we could easily use CSS.

When we use font tags, we need to set the style for each paragraph in a document.

This is a paragraph, that uses the deprecated font tag. If we want to make more one like it we should use another font tag. This makes the system unsafe, because if we want to change something, then we will have to edit all the tags.

Solution

Using CSS, we would simply define in the style sheet that the color property of the

tag is #0000aa and that the font-family should be “Lucida Grande”,Verdana,Arial,”Bitstream Vera Sans”,sans-serif:

p{
     color: #0000aa;
     font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
}

Using this rule, we make this style the default for every paragraph in the document. That makes it much easier when we want to change for example the font or the color of the paragraph.

Dev Corner » CSS Basics

Change the font of text with CSS

Discussion

Replace font tags with CSS

Solution