• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Computers and Internet / Programming / WordPress / Child Themes / Use Google Fonts Locally

Use Google Fonts Locally

By Victor M. Font Jr.
November 17, 201519 Comments

Use Google Fonts Locally, public domain image from pixabay.com

Since the introduction of CSS3, web fonts have become ubiquitous. Instead of depending on a handful of standard system fonts that are loaded on a user’s computer, as a web designer or developer, you can choose from thousands of fonts that are hosted on remote servers and loaded into a user’s web browser. Google is one of the leading providers of web fonts. They have hundreds of free fonts available for your use through https://www.google.com/fonts. Best of all, they are all open source. Here's what Google says:

All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially—in print, on your computer, or in your websites.

How Web Fonts Work

The Advantages

Web fonts offer both advantages and disadvantages for your website. Web fonts are downloaded to the user's browser while rendering the webpage and are then applied to the text. A big advantage of web fonts is that companies can use fonts that integrate with their brand image to achieve a consistent look and feel across all media. Web fonts can also introduce "personality" to your website, especially in headlines and subheads. The font displays on your website even when viewed on smartphones or tablets. Another modern benefit of web fonts is that you can eliminate jpg image headlines as was necessary in old-school development. With web fonts, all words on a page are 100% searchable and index-able. You no longer need ALT tags for search engines to know what your text says. This makes your code cleaner and more manageable.

Some Disadvantages

The main disadvantage of using web fonts is slow or inconsistent performance. They may slow your site's load time because you are making calls to a remote server that is outside of your span of control. They can also produce Cache Validator errors when tested with Google PageSpeed or Expire Header errors with Yahoo YSlow, again because of cross-site access. The images below are from a site tested through GTMetrix.com

Google PageSpeed Cache Validator Error
Google PageSpeed Cache Validator Error
Yahoo YSlow Expires Headers Error
Yahoo YSlow Expires Headers Error

Another disadvantage is that there is limited support for CSS3 in older browsers, which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font, it will fall back on the web safe fonts in the stack.

Overcoming the Disadvantages

Because of the Open Source nature of web fonts, they can be downloaded and served to the end user's browser directly from your website. There have been times where I have seen sites stall waiting for Google to respond. It may not be Google's fault either. It could be a DNS problem with your host or there could be a troublesome "hop" somewhere in the path required to reach Google. Whatever the case, serving Google fonts directly from you server will improve load times and avoid issues that come from downloading content from websites other than your own.

There are only a few steps required to serve Google fonts from your own site. In summary these steps include:

  1. Retrieve the Google Fonts CSS
  2. Download the Google Font(s)
  3. Upload the font to your server
  4. Add the font to your style sheet

The rest of this article will walk through the details of serving Google Fonts from your own local server.

Retrieve the Google Fonts CSS

  1. Go to the Google Fonts website and add your chosen fonts to a collection.

    Google Font Add to Collection

  2. Click the Use Button

    Google Font, Click the Use Button

  3. Scroll down the page to the link to the Google Fonts CSS file.

    Copy CSS Link to Text Editor

  4. Copy this link to a text editor

    Copy href content to browser address bar

  5. From the text editor, copy the content of the href tag and paste it into the browser address bar. Copy these @font-face styles to your text editor. We'll be editing these styles in the last step.

    Google Fonts @font-face styles

Download the Google Font(s)

The names of the Google Font files are in the @font-face styles you just copied to your text editor. For each font, copy the text that is in the URL() tag. For example, for the OpenSans-Light font in the above example, the name of the font file is:

fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2

Copy this to your browser address bar and the font will download. Unless you want to continue referring to the file as DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2, I suggest you rename this when you download it to something more human readable. I generally rename the font file one of the local reference names in the style. In this case, I would rename this file to opensans-light.woff2.

Author's Note: To download all of the web font variations at once (eot, ttf, svg, woff, woff2), visit https://google-webfonts-helper.herokuapp.com/fonts. The site even generates the CSS for you.

Upload the Font(s) to Your Server

Once you've downloaded all of the Google fonts to your computer, upload them through FTP to your child theme directory. I generally create a fonts directory in the child theme directory and copy the fonts to there.

Add the Font(s) to Your Style Sheet

Now it's time to edit the @font-face styles we copied to your text editor. Change the URL() tags to point to the files in your child theme fonts/directory. If you've done everything correctly, the new styles should like this:

Copy all of this @font-face text to your child theme's style sheet.

Make sure you remove any code from your functions.php that may be enqueuing Google fonts through php code.

Using Google Fonts on the Desktop

If you download the full Google Font package of your choice from the alternative source mentioned in the Author's Note above, it should include either a True Type (ttf) or Open Type (otf) font. You can then use your OS font installer to add the font to your desktop font collection.

  • 27shares
  • Facebook8
  • Twitter5
  • Pinterest2
  • LinkedIn7
  • Print
  • SMS5

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Contributing

    January 28, 2018 at 10:19 am

    Here is the screenshot of the new Google Fonts interface where you can see the download button (after chosing what fonts to use).

    https://farm5.staticflickr.com/4756/26074411548_98733f578b_o.png

    Reply
    • Victor M. Font Jr.

      January 31, 2018 at 1:54 pm

      Unfortunately, the Google fonts download only provides you with True Type fonts (ttf). Webfonts are not provided.

      Reply
  2. abiri

    January 14, 2018 at 2:16 am

    thank you Victor.

    Reply
  3. William

    November 30, 2017 at 8:58 pm

    Hi Victor,

    Thank you for the helpful post.

    I just want to point out that http://www.localfont.com/ may no longer be available. I used it for a couple of projects some time back but, lately, over the past few months, the url won’t resolve.

    Thanks

    Reply
  4. Mark Salmi

    October 7, 2017 at 6:58 pm

    Thanks for posting this. I’m hoping the more I do this, the easier it will get; but it’s worth it for localhost use.

    Reply
  5. Abhijeet

    July 10, 2017 at 9:58 am

    i tried this method and nothing happened.

    Reply
    • Victor M. Font Jr.

      July 10, 2017 at 10:42 am

      It probably has something to do with the fact that you are using autoptimize. The style sheet I see in your source code isn’t loading the fonts you are reference in your code. With a plugin like autoptimize, you have to rebuild its cache if you want changes included.

      Reply
  6. David

    February 16, 2017 at 10:23 am

    Thanks, Victor. This helped me a lot. I’m going to consider installing fonts on the sites instead of doing the “go to google” method.

    Reply
  7. ulang tahun

    January 27, 2017 at 1:57 am

    thanks for this share, i want to try it.

    Reply
  8. Paulo França Lacerda

    December 8, 2016 at 8:13 am

    Thank you for the article and for the link to localfont.com .

    Reply
  9. Vincent Wartelle

    November 14, 2016 at 12:45 pm

    Thank your very much for these explanations. What to do with these “woff” files was not easy at first glance.

    Reply
  10. Ataul Ghani

    September 27, 2016 at 1:11 pm

    I was looking for this article so many days ago. Now got it here, I loved this writing and will check more here. Thanks!

    Reply
  11. Hazem Mohammed

    May 22, 2016 at 7:47 am

    Hi Victor!

    Thanks for a very nice tutorials, but I think you forgot a notice that google get a different font files for each browser.
    For example when you open http://fonts.googleapis.com/css?family=Open+Sans on Chrome google will get .woff2 font type, but if you open it on IE google will get .woff font type, and if you open it on safari google will get .ttf font type.
    This is just a note for browsers compatibility.

    Thanks again for the good tutorial.

    Reply
    • Victor M. Font Jr.

      May 22, 2016 at 1:44 pm

      Thanks for the tip Hazem. A site you may want to look into is http://www.localfont.com/. This site will download all Google font variations at one time and generate the CSS for you. It’s a great resource.

      Reply
  12. Micah

    May 19, 2016 at 10:35 am

    There is a download button to download the fonts as a zip.

    Reply
    • Victor M. Font Jr.

      May 21, 2016 at 10:50 am

      Could you please be more specific and share where the button is located? The only download button I’ve ever seen allows you to download and install the Skyfont tool or click through to a Github repository for .ttf versions of all of the Google fonts. Thanks.

      Reply
  13. Christopher K. Ryan

    May 10, 2016 at 5:40 am

    I tried this trick and got some really fab results.

    Reply
  14. Ginger Coolidge

    November 18, 2015 at 9:41 am

    Thank you Victor, this tutorial is very much appreciated.

    Reply
    • Victor M. Font Jr.

      November 18, 2015 at 9:45 am

      You’re welcome!

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page