Changing the font of a WordPress theme is quite easy 一 you can use the Kirki plugin to do so. 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 to change the font 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 appeared at the bottom of your screen, right after you clicked 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 to click 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.
Using 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. In case something goes wrong, you’ll have backup files.
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.
7. 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.
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 in 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!
