While the terms “typeface” and “font” are often used interchangeably, there are clear distinctions in their actual meaning. “Typeface” refers to an entire family of type styles: Neuton, Garamond, Goudy Old Style, and Lato are examples of typefaces. “Font” is the individual member of a typeface family: roman (or regular), italic, bold, and bold italic are font examples. It’s very simple to change the font in WordPress. You just have to select the word(s) or sentence(s) and click on the “B” (bold) or “I” (italic) in the editor menu. It’s more work to change the typeface and I’ll show you 2 methods in this tutorial.
Each WordPress theme comes with its own set of default typefaces. There are usually 2 or 3 type families built into the theme. Heads may use a serif style, while the body text uses a sans serif. For various reasons, you may not like these defaults. There are 4 ways to change the typeface; we will talk in-depth about methods #3 and #4:
- Theme Customizer. Some themes will give you a set of alternative typefaces. Check here first: Appearance > Customize. If you don’t see a list of fonts, use the other methods discussed below.
- Plugin. If you are uncomfortable editing code, use a plugin.
– – – – – - Embed. Uses an external web server to load the fonts onto your website.
- Upload the fonts to your website. Host them on your own server.
IMPORTANT NOTE: The Embed and Upload methods are for loading the fonts. They each require a second step: editing the CSS file. Full details are in the instructions below.
Before Doing Anything: Back up all of your files and database!
You can use a backup plugin: Duplicator, Backup Buddy, and All-in-1 WP Migration are 3 of my top choices. You can also log into your web host account, navigate to the File Manager area, and manually download a .zip archive of the files and the database. It’s safer to edit files on your computer (rather than in the WordPress Theme Editor) and then upload them to your theme folder when done.
EMBED METHOD
1. Visit the Google Fonts site
Google fonts are free. The extensive Google library has over 900 font families. Through their open-source license, they are readily available for use on your website. Go to the Google Fonts site and browse through the catalog. Use filters to narrow the offerings:
- Categories: serif, sans serif, display, handwriting, monospace
- Language
- Font properties: number of styles, thickness, slant, width
- Variable fonts: single font files that contain data for multiple weights, widths, and slants.
When you find the font(s) that you want, click on the family, and select the styles. I recommend using a typeface family that has a minimum of 3 variations: regular, italic, bold, (and bold italic ideally). Use only what you need, because each style and weight will add load time to your site.
Find the Review window on the right side of the screen. Click Embed to see the code for loading the typefaces into your website. You have 2 choices: <link> (best for the enqueue method) and @import (best for the stylesheet method).
2. a. <link> – Enqueue script in functions.php file
The enqueue method (recommended by Google) is more efficient, since it places the code inside the head via the functions.php file. This script links the fonts on external sites to your website. Go to the folder on your desktop that contains the backup files. Inside the theme folder, find the functions.php file (wp-content > themes > themename > functions.php) and duplicate it (in case you make a mistake).
Copy the href value of the link code. Find the fonts-related Enqueue script in the functions.php file. Replace the existing href value with the new value you copied from Google. You may need to make some adaptations. When done, upload the edited file to the theme folder on your server (wp-content > themes > themename > functions.php).
GOOGLE’S <link> CODE
<link href="https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,700;1,400;1,700&
family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap" rel="stylesheet">
ORIGINAL FUNCTIONS.PHP CODE
//* Enqueue Google font
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Oswald:400,300|Open=Sans:200,300,400,600,700', array(), CHILD_THEME_VERSION );
}MODIFIED FUNCTIONS.PHP CODE
//* Enqueue Google font
add_action( 'wp_enqueue_scripts', 'genesis_sample_google_fonts' );
function genesis_sample_google_fonts() {
wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,700;1,400;1,700&
family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap', array(), CHILD_THEME_VERSION );
}2. b. @import – Add to the style.css file
If you’d rather not edit the functions.php file, an alternative method is to copy and paste the Google import code at the top of the style.css (stylesheet) file. Do one or the other, not both! When done, upload the edited file to your server (wp-content > themes > themename > style.css).
GOOGLE’S @import CODE
@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,700;1,400;1,700&family=Neuton:ital,wght@0,200;0,300;0,400;0,700;0,800;1,400&display=swap');UPLOAD FONTS METHOD
1. Visit the Fontsquirrel site
This method is good when you can’t find your desired font on an external server. Or maybe you just prefer to upload the fonts. Fontsquirrel offers thousands of free fonts. Go to their site and browse through the catalog. The numerous filters help narrow the offerings.
There are 4 kinds of font formats that are web-compatible:
- TrueType Font (TTF)
- OpenType Font (OTF)
- Web Open Font Format (WOFF)
- Web Open Font Format 2.0 (WOFF2)
WOFF has become the new industry-standard as it uses less bandwidth than the other two formats. But, TTF and OTF have been around for a long time, are dependable, and are easier to find. So, go with the best that is offered. Fontsquirrel labels their fonts with icons: look for the globe symbol, which indicates that you can embed this font in the CSS. Download the desired font to your desktop. It will likely be a zip archive.
2. Upload the fonts to your website
Open the File Manager in your web host’s cPanel or an FTP client (such as Filezilla), and navigate to:
wp-content > themes > themename > fonts
(create a fonts folder if one doesn’t exist)
Unzip the folder that you downloaded. With File Manager, you can upload the zip archive, then unzip it. With FTP, it’s probably best to unzip prior to uploading. Make a note of the file path so that you can use it in the CSS file.
3. @font-face query – Add to the style.css file
UNIVERSAL @font-face CODE
@font-face {
font-family: 'CustomFont';
src: url('public_html/wp-content/themes/your-theme/fonts/CustomFont-Regular.otf');
font-weight: normal;
}ASAP @font-face CODE
@font-face {
font-family: 'Asap';
src: url('https://WebsiteUrl/wp-content/themes/genesis-optimal-ask/fonts/Asap-Regular.otf');
font-weight: normal;
}
@font-face {
font-family: 'Asap';
src: url('https://WebsiteUrl/wp-content/themes/genesis-optimal-ask/fonts/Asap-Italic.otf');
font-style: italic;
}
@font-face {
font-family: 'Asap';
src: url('https://WebsiteUrl/themes/genesis-optimal-ask/fonts/Asap-Bold.otf');
font-weight: bold;
}
@font-face {
font-family: 'Asap';
src: url('https://WebsiteUrl/themes/genesis-optimal-ask/fonts/Asap-BoldItalic.otf');
font-style: italic;
}MODIFY THE CSS FONT FAMILY
No matter which method you use (embed vs. upload), you must also edit the stylesheet. Without this second step, your typeface will not change. The CSS file tells the browser what font weight and style to apply to the heads and text. Duplicate the style.css file (in case you make a mistake) and edit the font-family property wherever you want it changed. The example below changes the typeface for the body selector.
STYLE RULES to indicate the font families
font-family: 'Asap', sans-serif;
font-family: 'Neuton', serif;ORIGINAL STYLE.CSS CODE
body {
background: #f5f5f5;
color: #666;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 300;
line-height: 1.625;
}MODIFIED STYLE.CSS CODE
body {
background: #f5f5f5;
color: #666;
font-family: 'Asap', Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 300;
line-height: 1.625;
}Other Sources for Free Web Fonts
- www.dafont.com
- https://www.1001fonts.com/ (free with restrictions)
- https://fonts.adobe.com/typekit (free with Creative Cloud subscriptions)
- https://www.fonts.com/ (over 600 free typefaces)
Related Posts
How to Choose a WordPress Theme
Introduction to Web Design
Top 10 Typography Books
Choosing the Correct Font Format
Design Inspiration: A.M. Cassandre
Leave a Reply