In this video you’re going to learn how to change the font family for your entire website in one quick and easy lesson.

There are 800+ Google Fonts but most of them won’t work off the bat. And that’s getting too technical for this simple tutorial.

And not all fonts are supported on all computers. So start off with your chosen font and finish with a generic font in case the reader’s computer doesn’t support your chosen font.

Sans serif fonts are easier to read on the screen and serif fonts are easier to read on paper.

Some of the Sans Serif fonts you can use are:

Trebuchet
Verdana
Arial
Helvetica
And finish with “sans-serif”

And Serif fonts include:

Times New Roman
Georgia
And finish with “serif”

But I don’t recommend serif fonts for reading on the screen.

If you want something fancy for your headings then try “Comic Sans MS” with the generic “cursive” and "sans-serif".

Don’t use more than 2 font families on one page. And when a font name has spaces between the words use quotation marks around it.

OK, here’s the code:

p {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}H1 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}H2 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}H3 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}

p {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
H1 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
H2 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
H3 {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}

Or if you really like serif fonts [shudder]

p {font-family: “Times New Roman”, Georgia, serif;}H1 {font-family: “Times New Roman”, Georgia, serif;}H2 {font-family: “Times New Roman”, Georgia, serif;}H3 {font-family:  “Times New Roman”, Georgia, serif;}

p {font-family: “Times New Roman”, Georgia, serif;}
H1 {font-family: “Times New Roman”, Georgia, serif;}
H2 {font-family: “Times New Roman”, Georgia, serif;}
H3 {font-family: “Times New Roman”, Georgia, serif;}

Sans Serif Body and Fancy Headings

p {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}H1 {font-family: "Comic Sans MS", cursive, sans-serif;}H2 {font-family: "Comic Sans MS", cursive, sans-serif;}H3 {font-family: "Comic Sans MS", cursive, sans-serif;}

p {font-family: Trebuchet, Verdana, Arial, Helvetica, sans-serif;}
H1 {font-family: "Comic Sans MS", cursive, sans-serif;}
H2 {font-family: "Comic Sans MS", cursive, sans-serif;}
H3 {font-family: "Comic Sans MS", cursive, sans-serif;}

For unordered lists (bullets) and ordered lists (numbered) you have to add a couple more items. Replacing 'p' with 'ul' and 'ol'.

Related Training:

Custom CSS: Change Font Size Site-Wide

Custom CSS: Change Font Color Site-Wide

Custom CSS: Change Link Color Sitewide

Training by Marion Black - Sorted

As always, I'm here to help you,

Please share the love, click 'Like This' (if you do). Ask a question, share something or leave a comment.