Author MarionBlack
2014
2
58
Premium
Ambassador
Rank 58
Unfollow

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.

Join the Discussion
Write something…
Recent messages
ChristinaT10 Premium
Great stuff! Thanks Marion!
Reply
MarionBlack Premium
It's a pleasure Christina.
Reply
Kickbacked Premium
Thanks!
Reply
MarionBlack Premium
You're welcome.
Reply
SantaFez Premium
Thanks for this Marion, much appreciated!
Reply
MarionBlack Premium
You're very welcome Orion.
Reply
GlenPalo Premium
Excellent training, Marion. Thanks!
Reply
MarionBlack Premium
Thanks Glen.
Reply
CowboyJames Premium
Thanks, Marion. Very interesting.
Reply
MarionBlack Premium
Thank you James.
Reply
Top