CSS Fonts

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





CSS Fonts

The text we see on the web page has a significant effect, and CSS has many options for defining text styles. Font properties also enable us to change the appearance of text by assigning a font family, font size, thickness and more

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:

'sans-serif': normal fonts without serifs
Helvetica, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Verdana, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Avantgarde, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif The Quick Brown Fox Jumps Over The Lazy Dog



'serif': normal fonts with serifs
Times, serif The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif The Quick Brown Fox Jumps Over The Lazy Dog
serif The Quick Brown Fox Jumps Over The Lazy Dog

CSS Font family

Font family allows us to specify a typeface for the text in an element. Whatever value we specify is the name of the typefase we wanted to use on the web page.

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


Syntax Example

<family-name>:

The name of a font-family of choice.

<generic-family>:

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)
Example
Watch GIF Try It Now

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

Font Family Property Video Live Example
Helvetica, sans-serif Watch GIF Try It
Times New Roman, serif Watch GIF Try It
Palatino, serif Try It
New Century Schoolbook, serif Try It
Bookman, serif Try It

CSS Font style

CSS font-style property is used to specify the font style for text.

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.



Syntax

The table below shows some different styles. Unless you have a very rich collection of fonts, many of the rows will be the same.


rule serif sans-serif Video Live Example
font-style: normal The Quick... The Quick... Watch GIF Try It
font-style: italic The Quick... The Quick... Watch GIF Try It
font-style: oblique The Quick... The Quick... Watch GIF Try It

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

Example Watch GIF Try It Now

CSS Font Size

CSS font-size property allows us to set the size of a font.

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:

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

Relative size:

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

Example
Watch GIF Try It Now

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.

Note:

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


CSS font-weight Property

CSS font-weight property sets how thick or thin characters in a text should be displayed.


Syntax
Property Values
  1. normal
  2. bold
  3. bolder
  4. lighter
Example
Watch GIF Try It Now

The following table show the different font-weight properties we can use

rule serif sans-serif Video Live Example
Weights
font-weight: 100 The Quick... The Quick... Watch GIF Try It
font-weight: 300 The Quick... The Quick... Watch GIF Try It
font-weight: normal The Quick... The Quick... Try It
font-weight: 600 The Quick... The Quick... Watch GIF Try It
font-weight: bold The Quick... The Quick... Watch GIF Try It
font-weight: 900 The Quick... The Quick... Watch GIF Try It




CSS font-variant Property

CSS font-variant property specifies whether or not text should be displayed in small caps font, which is a font where the lowercase letters appear as smaller versions of the uppercase letters.

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


Syntax Property Values
  1. normal
  2. small-caps
  3. initial
  4. inherit
Example
Try It Now

Different types of Font variant Properties

rule serif sans-serif Live Example
Variants
font-variant: normal The Quick... The Quick... Try It
font-variant: small-caps The Quick... The Quick... Try It


CSS3 font-stretch Property

The font-stretch property allows you to make text wider or narrower.

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.

Syntax

Property Values

Value Description
ultra-condensed Makes the text as narrow as it gets
extra-condensed Makes the text narrower than condensed, but not as narrow as ultra-condensed
condensed Makes the text narrower than semi-condensed, but not as narrow as extra-condensed
semi-condensed Makes the text narrower than normal, but not as narrow as condensed
normal Default value. No font stretching
semi-expanded Makes the text wider than normal, but not as wide as expanded
expanded Makes the text wider than semi-expanded, but not as wide as extra-expanded
extra-expanded Makes the text wider than expanded, but not as wide as ultra-expanded
ultra-expanded Makes the text as wide as it gets
initial Sets this property to its default value.
inherit Inherits this property from its parent element.


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

CSS Font Property

Setting all of the properties we just learned in 1 declaration.
Example

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.



Browser Support
Property
font-family 1.0 1.0 1.0 3.5 4.0 Supported Supported


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

CSS Font Family Property Exercises

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

CSS Font Style Property Exercises

Exercise 1 Exercise 2 Exercise 3

CSS Font Weight Property Exercises

Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5

CSS Font Variant Property Exercises

Exercise 1 Exercise 2



Sources and Credits

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