CSS Change Font and Font Families¶
This lab covers using CSS to change font.
Not all computers can show all fonts. Therefore, to change font with css, you specify a list with backups. The font-family property first looks to display the specific font name such as Arial that in the list. In case some computer can't display that font, you can list backup fonts. Finally, you should list a font family as a catch-all to make sure the displayed font is at least in the right font family.
Fonts are grouped into three major families: serif, sans-serif, and monospace. The below image from w3schools shows what a serif is. Serif fonts have serifs and sans-serif, sans meaning without, don't.
As for monospace family fonts, those fonts all have letters with the same width as the below image from design company Envato shows:
There are two other lesser used font families: cursive and fantasy.
CSS:
1 2 3 |
|
HTML:
1 2 3 4 5 6 7 |
|
A website would combine the above CSS and HTML to show:
Link to Example¶
Experiment Ideas¶
-
Personalize the header & change fonts A List of Built-in Font Options
-
If the HTML link and head elements are understood, try google fonts A List of (Free) Google Fonts