How to define font family / font appearance with CSS

Name: define font family / font appearance with CSS
Ingredients: CSS

created 7.2 y • edited 7.2 y by Richard Foulon • Updates history (4)

● Easy 🚩 1 step

To define font family / font appearance with CSS, you need 1 thing:

CSS ▼

shoppingbag View guides which use CSS blueprint Find info page about CSS workbench Find a guide to know how to make a CSS Find a guide to know how to find a CSS

Let's see how to define the font family / appearance of the characters using CSS.

(?) — Use the property `font-family` in your CSS style sheet to change the appearance of the font.

Example:
`html{ font-family: Arial, Helvetica, sans-serif; }`

You can specify several font families, separated by commas. The web browser will try to use one of them, starting with the first one, then if the browser doesn't have the font installed, it will try the next one etc.
Here are some "web safe" fonts combinations you can use:

Arial, Helvetica, sans-serif

Verdana, Geneva, sans-serif

"Times new roman", times, serif

"Courier New", Courier, monospace

"Comic Sans MS", sans-serif

(i) — Use the property `font-family` in your CSS style sheet to change the appearance of the font.

Example:
`html{ font-family: Arial, Helvetica, sans-serif; }`

You can specify several font families, separated by commas. The web browser will try to use one of them, starting with the first one, then if the browser doesn't have the font installed, it will try the next one etc.
Here are some "web safe" fonts combinations you can use:

Arial, Helvetica, sans-serif

Verdana, Geneva, sans-serif

"Times new roman", times, serif

"Courier New", Courier, monospace

"Comic Sans MS", sans-serif

Try the fonts families directly in your browser using the Webmaster tools (press

F12

), or right-click your text then "Inspect element", then in the CSS section, you should be able to change the value of

font-family

and see the font appearance direclty in your browser!

Then, once your web page is online, remember to check if the font works, for example, on a Windows PC, iphone, android phone, mac computer. Because, for example, some fonts are used by Microsoft but not by Apple