Default font WordPressTemplates will have a default font applied to them. When you want to change the site font globally through out the site, you will need to edit the CSS "style.css" file for your WordPress. This article will explain how to change the font globally for your WordPress site using the "Twenty Twelve" theme.

Note! You can change the font through out your WordPress site by following these steps for any theme. This will work for all themes not just the "Twenty Twelve" theme.

Steps to change your Font Globally

  1. Log into the WordPress Dashboard.
  2. Click the appearance editor WordPressGo to Appearance > Editor.
  3. Styles selected WordPressMake sure you are on the main "style.css" stylesheet. The "Twenty Twelve" theme uses the style.css style sheet. See image to the right.
  4. Paste code into stylesheet WordPressPaste the following code at the top of the "style.css" sheet. In this case the font we are changing to is the "Courier New, Courier, monospace"font type.
    * {font-family:"Courier New", Courier, monospace}

    The ( * ) in the CSS code will apply the Font style to all text in the website.


  5. click update WordPressClick Update.
  6. New Font on site WordPressVisit your website you should see the font applied to your whole website. If you do not see the font change, you may need to Clear your browser cache.

Continued Education in Course 105: Changing the Wordpress Appearance
You are viewing Section 8: Changing your font globally in WordPress
Section 7: Changing the Branded footer text in WordPress
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-05-06 3:45 am

I don't have that editor tab/subheading. Can i still change my font size.

Staff
9,384 Points
2014-05-06 8:04 am
All themes in WordPress have the Editor tab. Be sure that you are correctly within the Appearance menu.
n/a Points
2014-05-06 8:14 am

Nope, mine doesn't. I would include a print screen if this thing allowed me to

 

Staff
9,384 Points
2014-05-06 8:33 am
This would then be the first theme that I have seen disallowing it in the several years that I have been using WordPress. In that case, you would need to edit the theme files directly. You may do so by opening up your file manager of choice and navigating to the /wp-content/themes/ directory. Within there, you will see all of your theme files.
n/a Points
2014-05-06 9:18 am

Thanks I will try that

n/a Points
2014-07-15 3:25 pm

Hi

thanks for sharing. I need to change to this font

awebfont.ir/fonts?cat_id=1&file_id=1116&file_type=ttfawebfont.ir/fonts?cat_id=1&file_id=1116&file_type=otf

But i'm not sure what code is required. it would be kind of you to check it out for me.

Staff
17,716 Points
2014-07-15 3:59 pm
Hello Javad,

First you will need download the font and then give it a legible name. The file name when you initially download is too long. Next you will need to make the font available from the web server. For example, you could create a folder on your website called fonts. Then you can upload the font file into it. The final path would something like this:

htt://domain_name.com/font/example_font.ttf

Then after you have uploaded the font, you would need reference it in your CSS code (please see using custom fonts in CSS). Once you have it properly declared in the CSS, then you can specify for a section of your site.

This is the code I was reviewing in Stack Overflow on using custom fonts:

@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http:// domain.com/fonts/font.ttf'); /*URL to font*/
}


You can then utilize the code listed in the article above. For example:

* {font-family:"Font name", Font, monospace }


You might be interested in a plugin to make this easier as well: Use Any Font.
Or you can find much more in depth information on using fonts in the WordPress Codex- Playing with Fonts.

Hope that helps to provide all the information you need to use your font!

Regards,
Arnel C.
n/a Points
2014-07-16 2:43 am

Thank you , Arn. It was very helpful.

n/a Points
2014-07-16 7:55 am
yes Its Good info is available on the site.
n/a Points
2014-10-15 3:55 pm

Thanks a lot for tutorial

How to put google fonts at twenty twelve ?

Thanks

Staff
17,716 Points
2014-10-15 4:49 pm
Hello Wayan,

Thanks for the question. However, can you please provide a clearer explanation of what you need? We're not sure what you are asking. Please let us know and we will try to help!

Regards,
Arnel C.
n/a Points
2014-10-19 3:36 pm

Dear Arn,

Sorry for confusing, what i mean is how change the fonts at twenty twelve wordpress theme using google web fonts, I see the google web fonts look great and i want to use it at twenty twelve themes.

Regards

Wayan 

Staff
17,716 Points
2014-10-20 2:04 pm
Hello Wayan,

Thanks for the question. The easiest way to incorporate the Google Web fonts is to use a plugin. Check out our article WordPress Font plugins - WP Google Fonts. The article will tell you how to load it and how you can use the fonts.

Hope that helps! Please let us know if you require any further assistance.

Kindest regards,
Arnel C.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

13 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!