WordPress: Use a webfont in a theme

You can use an online font, for example from Google Webfonts in your theme.

The easiest way to add an online font to your theme is to edit the style.css file (eg. via Appearance > Editor in the Dashboard) and paste the fonts import-code that you got in the @import tab at Google Webfonts, like this:

@import 'https://fonts.googleapis.com/css?family=Yatra+One';

However, this is not the most efficient way to do it in terms of performance, because the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. This alternative method will result in better performance:

As an alternative, load the font via the functions.php file of the theme in two simple steps:

1. Load the webfont in the functions.php file of the theme:

// Load a webfont:
function child_theme_load_fonts() {
wp_register_style('googleFontsDroid', 'https://fonts.googleapis.com/css?family=Droid+Serif');
wp_enqueue_style( 'googleFontsDroid');
add_action('wp_enqueue_scripts', 'child_theme_load_fonts');

2. Use the font in the stylesheet of the theme. An example:

html, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
	font-family: "Droid Serif", Georgia, Times, serif;

Ref: Using a different Google Web Font in a Twenty Twelve Child theme

Example font “Droid Serif” used in this line of text.