• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    How Can I Change the Typeface in WordPress?

    August 5, 2020 by ProfK 1 Comment

    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.

    Goudy typeface family

    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:

    1. 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.
    2. Plugin. If you are uncomfortable editing code, use a plugin.
      – – – – –
    3. Embed. Uses an external web server to load the fonts onto your website.
    4. 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:

    Google Fonts SansSerif typeface filter
    • 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.

    Google Fonts Review of Asap typeface
    Google Fonts Embed for typeface code

    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-fonts', '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.

    FontSquirrel home page showing typefaces
    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

    Filed Under: Typography, WordPress Tagged With: @font-face query, embed fonts, enqueue fonts, font, Fontsquirrel, free web fonts, functions file, Google Fonts, stylesheet, typeface, upload fonts

    Reader Interactions

    Comments

    1. David Henry says

      July 22, 2023 at 12:18 pm

      Very Informative article! I really appreciate your struggle. I searched for such type of article for a long time and finally, I saw it on your website. This article is very helpful for my upcoming projects. Thanks for sharing.

    Leave a 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

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    WP Engine
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Built on the WordPress Genesis Framework · Customization and design by ASK Design