CSS Fonts

CSS Fonts

CSS Fonts are used to style the fonts of HTML elements. Like font-size, font-color, font-family etc..

when talk about “font” we are indeed talking about the font face. The font face is the actual typeface is used for the type. But technically, the font is everything about the type from font-weight, font-size, line height and so on

CSS has two different types of font familes.

1. Generic Family
2. Font family

CSS Generic Font Family

If the user agent viewing your Web page does not have access to the font you have chosen, it will use a different font instead. If you indicate which generic font family you'd like the user agent to use, you can have a little more control over your Web page.

There are two types of generic family name like Serif, Sans-serif, or Monospace.

Serif

Serif fonts have a finishing stroke or tapering ends at the end of some characters, and they're usually proportionately spaced. Examples of Serif typefaces are Times and Georgia.

Sans Serif fonts

Unlike Serif fonts, Sans-serif fonts have stroke endings that are plain without any finishing strokes or ornamentation. Examples of Sans-serif typefaces are Verdana or Helvetica

Monospace

All letters and characters will share the same fixed when we use the Monospace and they each take almost the same horizontal space on the web page. Examples of Monospace typefaces are Courier and Lucida Console.

The following table shows examples of various fonts (your browser may not know all of them) and you can see what your browser does with each of the five generic ones:

CSS Font family

There are 2 types of font-family names, the name of a specific font family such as Verdana, Arial, or Helvetica

Some sample font families are Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit

The name of a font-family of choice.

The last value is a generic family name. The following generic families are defined:

1. 'serif' (e.g., Times)
2. sans-serif' (e.g., Helvetica)
3. 'monospace' (e.g., Courier)

We can specify the fonts as a comma-separated list indicating the alternatives. In case if the user's browser does not have the font installed then the browser will automatically use the alternative font from list In this example, if Georgia is available, it will be used when rendering. If not, then Times will be used. If both Georgia and Times are not available, the browser will then use the generic font family of Serif as a last resort. It's good practice to include a generic font family as a last alternative in the font stack.

If a font family is made up of more than one word, then we knew to put the font inside of quotes. In our paragraph rule, we added a font- family. And as you'll see, Times New Roman is three words, We need to put Times New Roman inside the quotes

Different Font Family Properties

CSS Font style

CSS accepts the most common used font-style values such as normal, italic, and oblique.

normal Text will be shown in normal style

italicText will be shown in italic style

obliqueIt is simialr to oblique the text name is leaning.

Normal is the default value for font-style. It displays a normal font style so nothing changes. The value italic causes the font to appear italic. The browser displays it by selecting the Italic font from the typeface family defined. The value of oblique cause the font to appear as oblique. These are commonly sloped versions of the normal value. Most browsers use italic as substitutes for an oblique. And if no italic or oblique fonts are available, the browser can create a synthetic style by rendering the normal face with a sloping transformation applied.

In CSS3, there is one more style available: 'font-effect' makes the letters look engraved or embossed.

CSS Font Size

The CSS fonts can be styled using either keywords or units. The keyword values are small, medium, and large

The font-size value can be an absolute, or relative size.

Absolute size sets the text to a specified size. Absolute size is useful when the physical size of the output is known

Relative size sets the size relative to surrounding elements Allows a user to change the text size in browsers

The most common way to set a font size is with length units or percentages.

A common way to set a font size is with pixels. Pixels give us precise control over the text size, so if we set a font-size to 20 pixels, each browser will display the size at precisely 20 pixels.

The font size of 100% is equal to 16 pixels, 200% is equal to 32 pixels,

CSS font-weight Property

1. normal
2. bold
3. bolder
4. lighter

CSS font-variant Property

The font-variant property, we can set the font variant that will be used for the text.

1. normal
2. small-caps
3. initial
4. inherit

Different types of Font variant Properties

CSS3 font-stretch Property

The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font. To use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.

Property Values

Finally, the font property is a convenient shorthand property for setting all of the properties we just learned in 1 declaration.

CSS Font Property

Try It Now


When using the shorthand property, it's important to remember that the font size and font family must be specified. If they are omitted, the entire line is ignored.

Also, the order of the values is important and not completely free. The font-style, font-variant, and font-weight values, if they're used, they must be defined before the font-size value. Any optional value that is omitted will be set to its initial value and not its inherited value. Finally, the font family needs to be the last value defined.

Practice with our Interactive Live Code Editors and Take your CSS Skills to the next level

CSS Font Family Property Exercises

CSS Font Style Property Exercises

CSS Font Weight Property Exercises

CSS Font Variant Property Exercises

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM