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 some 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 devices. So start off with your chosen font and finish with a generic font in case the reader’s device 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”

While some serif fonts can look good for headings, I don’t recommend serif fonts for paragraphs 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


Please scroll down for comments.

1 thought on “CSS: Change Font Family Site-Wide”

Leave a Comment

>
Skip to content