How to add new fonts to your WordPress website
Google Fonts
Google fonts give you an awesome way to add beautiful typography to your design projects, and WordPress users can add these Google fonts on their websites with relative ease.
Start off by visiting the Google fonts library and selecting a font that you want to use. Then, click on the quick use button below the font.
You’ll land on a page of styles to use. After you choose the style, scroll down to the embed code section. Copy the embed code under the standard tab and paste it in your theme or child theme’s header.php file at the top, just after .
That’s how you add a Google font.
Use this font in your theme’s stylesheet like this:
.h1 site-title {
font-family: ‘Open Sans’, Arial, sans-serif;
}
Adobe Typekit
First, you need to select a font from Typekit library and add it to your kit.
Then get the embed code for your kit and head over to your WordPress site’s admin area.
Now you need to install and activate the Typekit Fonts for WordPress plugin. Upon activation, simply visit Settings » Typekit Fonts and paste the embed code on plugin’s settings page.
That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:
h1 .site-title {
font-family: ‘modesto-condensed’, Arial, sans-serif;
}
Direct CSS3 @font-face
First, have your font file on hand, in this case we are talking about .ttf/.otf/.woff files.
Now place that file on a hosted server, i.e. FTP that file to your webserver in a ‘fonts’ folder in the child theme directory.
Then load the font in your theme’s stylesheet using CSS3 @font-face rule like this:
@font-face {
font-family: Arvo;
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
font-weight: normal;
}
Don’t forget to replace the font-family and URL with your own.
After that you can use that font anywhere in your theme’s stylesheet like this:
.h1 site-title {
font-family: “Arvo”, Arial, sans-serif;
}