How to add custom fonts to WordPress without plugins

Text fonts play a crucial role in User experience as the size and styling matter a lot to readers when it comes to articles. So let’s see how to add custom fonts to WordPress without plugins.

---

Font Source

You can either download any font in ‘Webfont’ or in ‘TTF’ format or use Google font which is comparatively faster than the former.

Open up Google fonts and search for any font you would like to add to your WordPress website. You can also check the font styling by adding custom text.

---

Once you’ve made up your mind about choosing a font, click on it to open up the following interface. Choose the font weight and other styling options.

On the right-hand side of the page, you’ll be introduced to the Stylesheet link for CSS that you need to add to your page header as well as the font-family property of CSS.

---

Linking stylesheet

The code is to be inserted into your Article pages in order to apply the fonts to your texts.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

There are multiple ways to do so. If you like customizing your WordPress website, you probably already have Insert Headers and footers options, if not then you may install the lightweight plugin which can manage all your header stylesheet and scripts.

This free extension is one of the easiest ways to manage your stylesheets. Get ‘Insert Headers and Footers’ from the WordPress Plugin repository.

If you’re not sure how to use the plugin, You may check out other tutorials covering that same topic.

Related: 2 Ways to Customize WordPress Login page Without Plugins

---

As this article is mentioned to be plugin-free, we’ll move forward to that portion.

In this method, you are needed to edit the ‘functions.php‘ file of your theme. Before doing any changes make sure you’ve Backed up your website just to be on the safe side in case of any errors.

function add_font() {
    $font_script = <<<'WebFonts'
<link href="https://fonts.googleapis.com/css?family=poppins+Slab" rel="stylesheet">
WebFonts;
    echo $font_script;
}
add_action('wp_head', 'add_font');

Add the function at the bottom of the file, and save the file after you’ve completed editing.

---

CSS

The below code applies the font styling to your texts available on the pages, specifically paragraphs. In case the font does not load properly, it switches to the ‘sans-serif’ font by default.

You can change the secondary and later priority fonts separated by commas which are not necessary at all.

p {
    font-family: 'Poppins', sans-serif;
}

To add the CSS code, Open up the WordPress dashboard.

Navigate to the left Menu bar > Appearance > Customize > Additional CSS

Copy the following code and append it to the CSS area and you’ll instantly see the difference.

Don’t forget to publish the changes made in Customize section and you’ll be good to go.

Changing Font Properties

If you’ve liked the font but not the size, spacing, or neither weight, You can change it all with simple CSS code snippets.

Here are some of the basic styling you can follow to tweak your fonts.

p {
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2rem;
    letter-spacing: 1px;
}

In order to get to know how the basics work, follow this guide to CSS font styling.

Conclusion

This was a complete tutorial on ‘How to add custom fonts to WordPress without plugins’. I hope this tutorial has solved all your issues, if you’re facing any problems don’t mind commenting below and we’ll reach you as soon as possible.