Sign in

Changing the font of your theme is quite easy 一 you can use the Kirki plugin to do so.

However, in cases you when you want to add a character set like Greek or Cyrillic, you might want to opt for checking Google Fonts.

So, the first step you need to take is to go to https://fonts.google.com/ and browse through the collection of fonts to see which one you would like to use on your website. Play with the fonts, and be sure to type random words next to/instead of the pre-entered text to see the font at work. Once you find the one you like the best, click the “+” (plus icon) to add the font to your collection.

Your second step is to click on the black bar that appears on the bottom of your screen when you clicked on the plus icon.

The third step is to click on the Customize tab to customize the font 一 you can make it bold and/or italic, and you can play with the character set 一 Latin extended, Greek, Cyrillic, etc. Please note that not all fonts support all styles and characters.

The fourth step is clicking on the Embed tab. Once you do, you’ll see that there are two methods of embedding a font into your theme – the standard method and using @import

The standard method

Here are the steps you need to take if you want to change the font using the standard method:

Note: Since you are about to make changes in the header.php and style.css files, be sure to back up both of them, just in case something goes wrong, God forbid.

1. Access your theme folder using FTP client and navigate to ../wp-content/themes/theme_name/. Download the header.php file.

2. Open the file using a text editor and under the Title closing tag paste the font link.

3. Save changes and upload the file to its original location.

4. Download the style.css file located in …/wp-content/themes/theme_name/style/. In some of our themes, this file is also located in …/wp-content/themes/theme_name/style/style.css.

5. Open the file using a text editor and search for lines that have the font-family attribute.

6. Replace all those lines with the font-family from Google fonts.

Replacing this line will change the font of all headings. When you are done replacing all lines with the font-family attribute, save changes, and upload the file to its original location.

And you’re all done.

Using the @import method

Here are the steps you need to take if you want to change the font using the @import method:

Note: Once again, since you are about to make changes in the header.php and style.css files, be sure to back up both of them, just in case something goes wrong, God forbid.

1. Download the style.css file located in …/wp-content/themes/theme_name/style/. In some of our themes, this file is also located in …/wp-content/themes/theme_name/style/style.css.

2. Open the file using a text editor and paste the code on the first line. You’ll need just the code between the style tags. The code will look something like this: @import ‘https://fonts.googleapis.com/css?family=Open+Sans’;

3. Next, search for lines that have the font-family attribute.

4. Replace all those lines with the font-family attribute from Google fonts.

Replacing this line will change the font of all headings. When you are done replacing all lines with the font-family attribute, save changes, and upload the file to its original location.

And that’s it 一 you’ve successfully changed the font!

Was this article helpful?
YesNo

We’re here to answer all your questions!

If, somehow, you haven’t found answers to your questions, feel free to contact our chatty & friendly support team.

Support request

Need help configuring your theme?

Don’t want to spend hours building your site from the ground up and perfecting its design? Let us do it 一 we like to get our hands dirty!

Services
New
Help