We build easy to manage, secure and Mobile friendly Websites.

How to Add Google Fonts to WordPress theme


In this tutorial, I will be showing you how to add google font to your WordPress page using wp_enqueue_style() method.

wp_enqueue_style is used to enqueue css style sheet. Usage below

wp_enqueue_style( $handle, $src, $deps, $ver, $media);

Parameters

$handle – The stylesheet name. Its required, should be string and unique.

$src – Path of stylesheet relative to WordPress root directly or full URL of the stylesheet. Should be string and its optional.

$deps – An array of registered stylesheet handles this stylesheet depends on. Should be an array of strings. Default value: array()

$ver – (string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

$media – (string) (Optional) The media for which this stylesheet has been defined. Accepts media types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’. Default value: ‘all’

Now let us go ahead and implement this into our WordPress Page.

Open function.php

Add the code below and click save.

function themeslug_style()
{
wp_enqueue_style('google-fonts-style', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap', array(), '', 'all');
}
add_action( 'wp_enqueue_scripts', 'themeslug_style' );

Open your style.css and add the code below

h1{font-family: 'Montserrat', sans-serif;}

You have successfully create a custom font style for H1 into your WordPress Page.

Leave a Reply

Your email address will not be published. Required fields are marked *