04. Applying Fonts font-family, font-size

After we have chosen which font to use, and loaded them up using the @font-face property, we can now apply them to our webpage.

Applying fonts to text

To specify the text, we use the font-family property.

In case the user does not have a certain font, we list multiple, each separated by a comma. This list is called the font stack.

The user's browser then goes through each font, from left to right, searching for a font that works until it finds one.

p {
  font-family: Consolas, Arial, Helvetica, Serif, "Times New Roman";
}

Notice how we have to use quotation marks ("") when specifying a font that is longer than one word.

There are a few "safe" fonts such as Arial, Verdana and Times New Roman that are guaranteed to work.

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Aching back from coding all day?

Acupressure Mat & Pillow

Aching back from coding all day? Try Back Problems

Relieve your stress, back, neck and sciatic pain through 1,782 acupuncture points for immediate neck pain relief. Made for lower, upper and mid chronic back pain treatment, and improves circulation, sleep, digestion and quality of life.

$$ Check price
144.87144.87Amazon 4.5 logo(1,890+ reviews)

More Back Problems resources

Ad