InMotion Hosting Support Center

Default font WordPressWordPress Templates 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 9: How to Change your Font Globally in WordPress
Section 8: How to Remove the WordPress Footer Branding

Support Center Login

Our Login page has moved, Click the button below to be taken to the login page.

Social Media Login

   
Social Login Joomla

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
2017-10-27 4:22 pm

Hi,

Thanks for sharing this info. I tried changing my font to Garamond with your code and it worked. But I am not liking the way it is looking, so I want to undo the change. I removed the line and saved again. But it is still retaining the changes. I cleared the cache, still no change! How do I restore my older settings?

Thanks

Staff
1,598 Points
2017-10-27 5:12 pm
Try accessing the site from a Private Browsing Session. This forces a non-cached page upon the first visit to the site in a new private browsing session. Otherwise, you may need to just replace the style.css file with the default in the theme or restore that file from a recent backup.
n/a Points
2017-10-06 8:39 pm

We are using WP, Theme 1498 (1506). There is a large script font used as a column title on some  pages that is not readable on iPhones. It is readable but quite light on Android devices. In going into the Editor, I found this code:

h6{

   font-family: 'Squada One', cursive,

   font-weight: normal;

Is it possible that this font is either not on the server or not recognized on some devices? Is there a more standard font that would be similar but work better?

Staff
422 Points
2017-10-09 10:54 am
Hello,

The font would generally be included in your themes files or would be specified somewhere as an include URL in your CSS file for the theme. Its possible that the browser being used on the iPhone may not be able to understand the font, Your best bet would be to reach out to the developer of the theme and see if they know of any issues with that font an iPhones, You can also change the font to anyone you would like. Google has a large selection of free fonts you can use here.

Best Regards,
KyleM
n/a Points
2017-08-26 3:45 am

Want to change my whole website the into museo-sans-rounded, Helvetica, Arial,sans sarif. Don't know how to do. A slight help would be really appreciated.

Staff
9,867 Points
2017-08-26 9:10 am
The steps in this article will work, but you will need a copy of those fonts on your server to make sure the style remains consistent across different browsers or platforms. There are WordPress plugins that can accomplish this for you.
n/a Points
2017-07-19 9:09 am

I followed the steps & tried using the code, but wasn't working. This is the website am trying to change its font; http://www.officeplus.com.ng. Kindly help out please.

Staff
40,163 Points
2017-07-19 9:46 am
Hello Temitope,

Can you please provide more information on the website? Are you using WordPress? If so, what version? Do you have a specific theme? Note that some themes may have code that specifically controls the fonts being used within the site. Provide us a little more information and we can look further into the issue.

Regards,
Arnel C.
n/a Points
2017-07-18 4:51 pm

Thanks sir, It has worked like a charm. Thanks

Staff
13,791 Points
2017-06-19 8:02 am
It worked for me when I tried it on a test site running 2017 theme. I'd suggest opening up Chrome and testing there. Then choose Inspect Element after right clicking on text. When you see a reference to the style.css file click on it and examine the file so you can see if your code is in the file. It took a few tries of clearing the cache to get it to show up for me.
n/a Points
2017-06-18 6:36 am

I'm using WordPress free theme twenty seventeen and I did as you say but nothing has changed. (cleared my cache as well both on firefox and chrome).

this is my code:

 

* {

    font-family: Poppins, sans-serif

}

n/a Points
2017-05-25 1:28 am

That my friend was brilliant!. I'm working on a project for a client using the Twenty Sixteen theme and the only thing that did the trick was your instructions. Thank you for sharing.

n/a Points
2017-04-06 12:39 am

Hi. I'm happy with the default font in my theme (Ascent) but would like to change the size. I have a plugin that I use to change selected text but if I change from 18 (default) to 20 it reverts back whenever I press ENTER or sometimes when I click UPDATE. Also, the headings don't work if I am within the larger text.

I can't believe that this wasn't one of the first options to consider when creating a WP theme.

Thanks in anticipation,

Thomas.

Staff
30,194 Points
2017-04-06 8:50 am
I recommend following our WordPress troubleshooting guide to narrow down the specific cause.

Thank you,
John-Paul
n/a Points
2017-03-27 3:23 pm

Thank you

n/a Points
2016-12-27 8:13 pm

Thank you so much! Worked amazingly on my theme - The producer, i had tried everything to override the fonts in the headinds, even within the stylesheet css, but putting it above everything really helped. 

THANK YOU :) ! x

n/a Points
2016-11-21 10:14 am

Instead you can change the fonts of your body

body {font-family: Verdana, Arial, Helvetica, 
     Futura, sans-serif; 
     font-size: 1em; 
     padding:0; 
     margin:0; }as i did on my blog

http://www.logicadda.com

 

n/a Points
2016-11-20 9:10 pm

The code for changing the font is * {font-family:"Courier New", Courier, monospace}

I am not sure what the purpose of the second listing of Courier; and I have learned that monospace means all characters are of the same width & not variable. If I want to change to Verdana, would I do the following? * {font-family:"Verdana", Verdana, proportional} Or, could it just be * {font-family:"Verdana"} ?

 

Staff
40,163 Points
2016-11-09 6:52 pm
Hello Virak,

It looks like you need to edit the post that you have created. If you highlight the text you should be able to change it in the editor. There you will need ot make sure that the text is not set to a header type. It should be paragraph. Also, per the instructions in this tutorial, make sure that the font for the paragraph type (or whatever you're using in the post) has not been changed.

I hope this helps to answer your question, please let us know if you require any further assistance.

Regards,
Arnel C.
n/a Points
2016-11-09 3:45 pm

Hello!

 

I notice that my static post font size display bigger than normal, and i want to rest it to the same before small and easy to read, BUT i dont know how to do that, can help! here my site www.scholar4us.info and i use wp.

n/a Points
2016-10-19 1:07 am

How do I change the font size for ONLY for pages and posts? I have a custom css plugin installed. Can you let me know the commands/code to enter?

Staff
13,791 Points
2016-10-19 6:59 am
So you want to set the font size to be the same on all pages and posts? Typically, the font size is set on the individual page or post, not globally on those post types.
n/a Points
2016-10-02 5:56 am

He, I want to change my font size sitewide but I have entered that code (the first one given) on my style sheet and pressed save but it has not worked AND I have cleared my cache, I am using activello theme :( please help. the website is http://whatisweightlossabout.com and yes it is mine but do you see what I mean about the font size :)

Staff
9,867 Points
2016-10-03 11:01 am
The above article is general, the code may differ in your theme. It's possible the element you updated is overruled by code somewhere else in the stylesheet. It is always recommended, but you can try adding an "important" tag to your code. For example,
body {
font-family: "Courier" !important;
}


You may also want to check to make sure you have the font itself available either in your theme files or on the web.
n/a Points
2015-02-20 6:25 am
Improve? There's nothing to improve in your article. It's the simplest ever, really idiot proof, and above all it solved the issue with ONE simple line of code.
n/a Points
2015-01-29 3:35 pm
It was perfect. I was having a problem knowing where to look to make the changes in php and the css file. Now I think I can make any change I want to. Thank you.
n/a Points
2014-10-15 3:55 pm

Thanks a lot for tutorial

How to put google fonts at twenty twelve ?

Thanks

Staff
40,163 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
40,163 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.
n/a Points
2014-07-16 7:55 am
yes Its Good info is available on the site.
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
40,163 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-05-06 8:14 am

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

 

Staff
11,186 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-05-06 3:45 am

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

Staff
11,186 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.

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.

39 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!