Top

support.dinosaurstew

help & support

How To Change Your Theme’s Fonts

Changing fonts on our themes requires some basic CSS knowledge. This tutorial should walk you through everything! We can also help you if you contact us.

Preliminary Step 1: What font are you using?

First, we need to determine what type of font you’re using. Click on the type of font to be brought to specific instructions for that font.

Preliminary Step 2: What font do you want to change?

Our themes typically use 2-3 fonts. This tutorial assumes you want to completely swap one font out for another in every place that it occurs. Check the font list section of the theme installation guide to see what fonts are used in your theme. You can then open Appearance >> Editor and find the style.css file for the theme. Search the file (control + F on your keyboard, or Edit >> Find from your internet browser’s toolbar) for the name of the font and you’ll see each area where it occurs.

* The .body selector font will be the one found throughout the main content. If you write a page, this will be the font used on the paragraphs.
* The h1, h2, h3, and so on font will be used for the larger headings.

Web-Safe Font Instructions

A web-safe font is a font that considered “safe” for the web because it’s found on most everyone’s computers. This is the easiest way to change a font since it cuts down on additional steps.

Step 1:

In WordPress, go to Appearance >> Editor and edit the style.css file. Make a back-up copy and keep it somewhere safe in case you make a mistake.

Step 2:

Search the file (control + F on your keyboard, or Edit >> Find from your internet browser’s toolbar) for the name of the font. Let’s say I want to replace the font “Raleway”. If I search Raleway, I’ll be brought to a section that looks like this:

    font-family: "Raleway", Helvetica, Arial, sans-serif;

I want to replace Raleway with the web-safe font “Tahoma”. Using this resource, I’ll click on “Tahoma” to find the proper font stack. Then, I’ll copy it and replace the original line in my style.css file with the font stack so that it looks like this:

    font-family: Tahoma,Verdana,Segoe,sans-serif;
Step 3:

Repeat step #2 for all other instances of that font.

Step 4:

Save!

Google Font Instructions

Google fonts can be found in the Google font library.

Step 1:

Go to Appearance >> Editor and find the functions.php file for the theme. Make a back-up copy and keep it somewhere safe in case you make a mistake. ** Be sure you know how to access your site files via FTP or your hosting account’s cPanel. In this tutorial, you’ll be editing core PHP files for the theme, and one small mistake can result in the white screen of death. **

Step 2:

Search this file (control + F on your keyboard, or Edit >> Find from your internet browser’s toolbar) for: google-font. You’ll see a line that looks something like this:

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Raleway:400,600', array() );
Step 3:

In a new internet browser tab, going back to Google fonts, click the “quick use” tab on the font you want to use (visual here). Select the styles you want, if applicable, then scroll down to the box and choose “import” (visual here). Copy & paste this code into a text editor program.

Step 4:

From that code, highlight the font information and copy it to your clipboard. The part you should grab is in red:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600);
Step 5:

Now, go back to that functions.php and paste in the font information like so:

wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Raleway:400,600|Open+Sans:400,700,600', array() );

Note how I added a | in front of the font name. This is to seperate it from the first font there.

Step 5:

Save the file.

Step 6:

Now, go to Appearance >> Editor and edit the style.css file. Make a back-up copy and keep it somewhere safe in case you make a mistake.

Step 7:

Search the file (control + F on your keyboard, or Edit >> Find from your internet browser’s toolbar) for the name of the font you want to replace. Let’s say I want to replace the font “Raleway”. If I search Raleway, I’ll be brought to a section that looks like this:

    font-family: "Raleway", Helvetica, Arial, sans-serif;

I want to replace this font with the Google font I just added, Open Sans. So, I’ll copy and paste “Open Sans” where “Raleway” occurs, like this:

    font-family: "Open Sans", Helvetica, Arial, sans-serif;
Step 8:

Repeat for all other instances of that font.

Step 9:

Save!

Other Font Instructions

If the font you’re using is not a web-safe font or a Google font, you’ll need to follow these instructions.

Step 1:

Check the licensing on your font and make sure you have the proper license to embed it into the website. 100% free or public domain fonts are always okay.

Step 2:

You’ll need the font you’re using in the following formats: .eot, .svg, .ttf, .woff, .woff2 If your purchased your font through MyFonts or another similar site, you should be able to download those versions directly from the site. If not, you can create a font kit at Font Squirrel. Make sure you choose the “Expert” option so you can select all the font formats that you need.

Step 3:

Now, you need to access your site files via FTP or your hosting account’s cPanel. Once you’re in your files, navigate to wp-content/themes/your-theme-name. If there is a font folder already, open it. If not, create a new folder called fonts. Upload the .eot, .svg, .ttf, .woff, and .woff2 files into this folder.

Step 4:

Open the stylesheet.css file that came with the webfont kit. There will be a code that looks something like this:

@font-face {
    font-family: 'ostrich_sansmedium';
    src: url('ostrichsans-medium-webfont.eot');
    src: url('ostrichsans-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('ostrichsans-medium-webfont.woff2') format('woff2'),
         url('ostrichsans-medium-webfont.woff') format('woff'),
         url('ostrichsans-medium-webfont.ttf') format('truetype'),
         url('ostrichsans-medium-webfont.svg#ostrich_sansmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

Copy that code to your clipboard.

Step 5:

In WordPress, go to Appearance >> Editor and edit the style.css file for the theme. Make a back-up copy and put it in a safe place in case you make a mistake. Near the top of the file, there is a section labeled:

/*
HTML5 Reset

Directly above that, copy and paste the font code, then add fonts/ in front of the font file names, like so:

@font-face {
    font-family: 'ostrich_sansmedium';
    src: url('fonts/ostrichsans-medium-webfont.eot');
    src: url('fonts/ostrichsans-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ostrichsans-medium-webfont.woff2') format('woff2'),
         url('fonts/ostrichsans-medium-webfont.woff') format('woff'),
         url('fonts/ostrichsans-medium-webfont.ttf') format('truetype'),
         url('fonts/ostrichsans-medium-webfont.svg#ostrich_sansmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

Make note of the font name as well, which I have put in bold (ostrich_sansmedium).

Step 6:

Search the file (control + F on your keyboard, or Edit >> Find from your internet browser’s toolbar) for the name of the font you want to replace. Let’s say I want to replace the font “Raleway”. If I search Raleway, I’ll be brought to a section that looks like this:

    font-family: "Raleway", Helvetica, Arial, sans-serif;

I want to replace this font with the font I just added, ostrich_sansmedium. So, I’ll copy and paste “ostrich_sansmedium” where “Raleway” occurs, like this:

    font-family: "ostrich_sansmedium", Helvetica, Arial, sans-serif;
Step 7:

Repeat for all other instances of that font.

Step 8:

Save!

Other Font Tips

You may need to change other CSS for the font. You can change the values for font-size, font-weight, letter-spacing, and line-height as you see necessary.

Google Fonts — If You Don’t Have the Google Font Code in Functions.php

If you don’t have the google-fonts code in your functions.php file already you can add it in:

//* Enqueue Lato Google font
add_action( 'wp_enqueue_scripts', 'DS_load_the_google_fonts' );
function DS_load_the_google_fonts() {
    wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Lato:300,700', array() );
}