• Skip to main content
  • Skip to primary sidebar

Technipages

Smart phone, gadget and computer tutorials

  • Topics
    • Android
    • Gaming
    • Hardware
    • Internet
    • iOS
    • MacOS
    • Office
    • Software
    • Windows
    • Definitions
  • Product Reviews
  • Downloads
  • About
Embedding Google Fonts Into WordPress Site

Embedding Google Fonts Into WordPress Site

Posted on June 2, 2020 by Mona Leave a Comment

Google Fonts became the go-to resource for custom web typography since its development in 2010. There are three main reasons that Google became the frontrunner here. First, there were no font services which were decent enough, so Google filled the void. Second, even at the beginning, the variety they offered was comparatively great. Currently, there are over 800 fonts available in numerous styles. Third, these fonts are available for free, making them especially attractive.

In addition, they’re surprisingly easy to integrate into your design projects. We’ll show you how you can include these Google Fonts into your WordPress Site.

Google Fonts

To begin, you’ll need to select the font you want to work with. There are a variety of options, so you have a rather large menu to choose from. You can find them by heading over to Google’s Font Page. If you are looking for a specific font, then simply type the name of the font in the Search box and it should come up with a sample.

There are also other search parameters you can use. Right below the Search box is a button called Categories. If you click on this, it will reveal a drop-down menu with five options. These are as follows:

  • Serif – These are fonts with short lines stemming from the upper and lower strokes of a letter. Times New Roman and Sylfaen are good examples.
  • Sans Serif – As the name suggests, these are fonts without those little lines. They tend to have a simple and clean aesthetic.
  • Display – These are what can be called attention-grabbing fonts. They’re best for headings rather than long text.
  • Handwriting –  These fonts make it seem like someone wrote them by hand. You’ll find that many are in cursive or have less consistent spacing.
  • Monospace  – Like a typewriter, their letters occupy the same horizontal width. They are very consistently spaced.

Added to these, you also have other options to choose from, like selecting the Language and Font Properties. The latter includes the number of styles, thickness, slant, and width.

Embedding Fonts in WordPress

If you’re wanting to include these unique fonts into your WordPress site, there are several methods you can try.

Using CSS

Click on the Font from Google’s selection, and it will take you to the detailed font page. At the upper right corner, there is a  “+” sign. Click on that and a side window will open. Click on “Embed.”

Now you can click @import. This will open the CSS code which you need to copy. Go to your WordPress theme’s stylesheet and paste it at the beginning. Make sure that you have copied the import link without the <style> brackets. Make sure you Save, and you’ll have added the font.

Using PHP

Follow the first few steps and copy the link you get after clicking the “+” sign. Now, simply add it to your theme’s header.php file. Remember to save in order for the font to be added.

Using a Javascript Function

You can also try something known as “enqueueing.” You’ll need to use the wp_enqueue_style function for this. Through this method, you can add the chosen font to the header section of all your website pages. It’s a great way to add multiple changes all at once.

Just get the link of the font (from http till the ”), and add this to your theme’s functions.php file with extra code around it. Here’s the code you’ll need to use:

function custom_add_google_fonts() {

wp_enqueue_style( ‘custom-google-fonts’, https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap,false );

}

add_action( ‘wp_enqueue_scripts’, ‘custom_add_google_fonts’ );

Any of these options will work just fine to integrate Google Fonts into your WordPress website, so it’s important to pick the one you feel most comfortable with.

You Might Also Like

  • How To Embed Google Fonts Into PowerpointHow To Embed Google Fonts Into Powerpoint
  • Embedding a YouTube Video in a Powerpoint SlideEmbedding a YouTube Video in a Powerpoint Slide
  • Site to Site VPN Explained in DetailSite to Site VPN Explained in Detail
  • How to Add or Remove Fonts from macOSHow to Add or Remove Fonts from macOS
  • How to Install Fonts in Windows 10How to Install Fonts in Windows 10
  • Changing Fonts on PDF ExpertChanging Fonts on PDF Expert
  • Windows 10: How to Install TrueType FontsWindows 10: How to Install TrueType Fonts
  • Windows 10: Disable Smooth Edges For FontsWindows 10: Disable Smooth Edges For Fonts
  • Installing Free Mac Fonts in macOS CatalinaInstalling Free Mac Fonts in macOS Catalina

Filed Under: Internet

Reader Interactions

Did this help? Let us know! Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Recent Posts

  • WhatsApp 2021: What Features to Expect
  • Troubleshooting Zoom Error 1005
  • Google Duo on Android: How To Enable Data Saving Mode
  • Troubleshooting Zoom Error Code 3113
  • Windows 10: How to Fix Skypebridge.exe Errors
  • Zoom: How to Prevent Chats From Being Muted
  • Zoom: How to Receive Notifications for Messages You’re Following
  • Zoom: How to Configure the Size of Captions

Who’s Behind Technipages?

Baby and Daddy My name is Mitch Bartlett. I've been working in technology for over 20 years in a wide range of tech jobs from Tech Support to Software Testing. I started this site as a technical guide for myself and it has grown into what I hope is a useful reference for all.

Follow me on Twitter, or visit my personal blog.

You May Also Like

  • Top 10 Google Chrome Alternatives to Surf Better

© Copyright 2021 Technipages · All Rights Reserved · Privacy