How to Add Google Web Fonts in Word Press Themes
Google Fonts is a library licensed fonts launched in 2010. Google Fonts library is a convenient & must have factor of any website to make it special, so the tool is a trump card for all web designers worldwide. It caters with almost 900 fonts free of costs. All modern themes support the usage of Google Fonts.
Process to add Google Fonts to Word Press manually
Search the appropriate Font to Add to Website
Searching the best suited font, for website is the first step to initiate. This approach doesn’t depend on a plugin. Instead, adding code directly into the theme is all.
Select the Fonts
Go to the Google Fonts site on your browser. Browse or search your desired fonts and click the “+” symbol to add them. Copy the hyperlink to embed in your site
For adding Google Web Fonts in Word Press Themes, We have mostly seen folks using the first two methods.
METHOD 1 – Embed Font
To embed the selected font into a webpage , copy the below code into the <head> of the HTML document.
@import url(https://fonts.googleapis.com/css?family=Lora);
@import url(https://fonts.googleapis.com/css?family=Oswald);
METHOD 2 – Add the PHP Function
Go to the active theme directory of your site
Open the functions.php file
Copy and paste this code:
<?php
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Playfair+Display|Space+Mono|Stint+Ultra+Expanded&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>
Finally using the Font in CSS Styling
Open the style.css file of your theme
Copy and paste this code:
body {
font-family: 'Stint Ultra Expanded', cursive;
}
h1,h2,h3 {
font-family: 'Playfair Display', serif;
}
button,input {
font-family: 'Space Mono', monospace;
}
