CSS: Change Font Family Site-Wide

CSS: Change Font Family Site-Wide with Custom CSS in WordPress. Quick and Easy, Even for Beginners

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;
}

etc.

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;
}

etc.

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;
}

etc.

Which fonts are you using on your website?

More stuff you can do with CSS

Change Font Size Site-Wide
Change Font Colors Site-Wide
Change Link Colors Site-Wide


Please scroll down for comments.

Marion

About the Author

Marion

Marion is the founder and owner of Marion Black Online. When she's not creating "How to" videos, she enjoys spending time with her family, shopping, and binge-watching an entire TV series in one day.

"10 Steps to Start Blogging"
Free Mini-Course


Step by step video training to launch your own online business

  • Matt Johnson says:

    Thanks! This css trick actually help me a lot!

  • >