Learn how to use custom fonts from Google Fonts and Adobe Typekit in WordPress

How to get fonts into WordPress

Want to include custom fonts in WordPress? Custom font styles enable you to utilize a stunning mix of different fonts on your website to enhance typography and user experience.

Apart from looking great, customized font styles can assist your website with enhance readability, creating a brand image, and boosts the time users invest on your website.

Note: Loading a lot of fonts can impact your website’s speed. We advise picking two fonts and utilize them throughout your website.

First, let’s have a look at discovering free fonts that you can use on your WordPress website.

How to Find Free, Custom Fonts to Use in WordPress

Fonts used to be pricey, however not any more. There are lots of places to discover excellent free web fonts such as Google Fonts, Adobe Typekit, FontSquirrel, and fonts.com. For this article, we’ll focus on two resources, Google Fonts and Adobe Typekit.

If you need help pairing fonts, or if you’re not sure how to pair fonts, Google Fonts has you covered. The Google Fonts website will help you pair font styles and find the perfect combination for your WordPress website.

As you choose your typefaces, remember that using a lot of font styles will slow down your website. Consider using only two typefaces then utilize them throughout your WordPress website design. This will also bring unified look and feel to your style.

Adding Custom Fonts Using the Easy Google Fonts Plugin

This approach is without a doubt the most convenient for WordPress newbies, if you wish to include Google Fonts on your website.Adding custom fonts to WordPress with Google FontsFirst you’ll need to install and activate the Easy Google Fonts plugin. (We’ll assume you know how to download and activate a WordPress plugin.)

Once activated, go to Appearance > Customizer. This will open the live style customizer user interface where you’ll see the brand-new Typography section. Clicking on Typography will reveal various sections of your website where you can use Google Fonts. Now click ‘Edit Font’ listed below the section you want to modify. Under the font family section, you can choose any Google Font you desire to utilize on your website. You’ll also be able to modify the typeface size, padding, margin, and more while in the ‘Edit Font’ section.

Depending on your theme, the variety of sections here might be restricted and you may not have the ability to directly change font selection for several locations of your website. While this plugin provided options to work around this, it is a little out of scope for this article.

Adding Custom Fonts in WordPress Using Adobe Typekit

Typekit by Adobe Fonts is another free and superior resource for awesome font styles that you can use in your style tasks. They have actually a paid subscription along with a limited complimentary plan that you can use.Adding custom fonts to WordPress with Adobe Typekit

Signup for an Adobe Fonts account and visit the browse typefaces area. From here you need to click the embed code button (it looks like this: </> ) to pick a typeface and develop a project.

Next, you’ll see the embed code with your project ID. It will also show you how to use the typeface in your theme’s CSS. How to embed custom fonts to WordPress with Adobe Typekit

To use the fonts you’ll be required to paste the embed code inside the <head> area of your website. Don’t worry! We have an plug-in that will make easy work of adding the embed code into the <head> of your website.

You’ll need to download and activate the Insert Headers and Footers plugin.

Once activated, go to Settings > Insert Headers and Footers then paste the embed code in the ‘Scripts in header’ box.

That’s it! Now you can use the Adobe Typekit font you picked in your WordPress customizer’s additional CSS section like this:

That’s all, we hope this post helped you include customized fonts in WordPress.

What did you think of this article?

Rate This Article

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

Join Our Newsletter

function runOnFormSubmit_sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5(th){ /*Before submit, if you want to trigger your event, "include your code here"*/ }; #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 .quickFormHorizontal [name=SIGNUP_SUBMIT_BUTTON]{ white-space: normal !important; } #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #customForm *{ -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; word-break:break-word; overflow-wrap: break-word; } /*** RESPONSIVE START */ @media only screen and (max-width: 200px){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_BODY{ max-idth:200px !important; margin: 0px auto !important; } #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_PAGE{ padding:0px !important } } /*Major Mobiles*/ @media screen and (min-width: 320px) and (max-width: 580px) and (orientation : portrait){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ max-width:100% !important; margin: 0px auto !important; } } /* iPads*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ max-width:760px !important; margin: 0px auto !important; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 [name='SIGNUP_BODY']{ width:1016px !important; max-width:1016px !important; margin: 0px auto !important; } } @media screen and (min-width: 475px) and (max-width: 980px) and (orientation : landscape){ #sf93878aa47b71a407a736585c15a9ef19e013ad7ff34770a5 #SIGNUP_PAGE{ max-width:100% !important; padding:0px !important; } } /*** RESPONSIVE END */ .quick_form_8_css form{padding-top:10px} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 400; src: url("https://webfonts.zohostatic.com/opensans/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 600; src: url("https://webfonts.zohostatic.com/opensanssemibold/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 300; src: url("https://webfonts.zohostatic.com/opensanslight/font.woff") format("woff");} @font-face {font-family: "Open Sans";font-style: normal;font-weight: 700; src: url("https://webfonts.zohostatic.com/opensansbold/font.woff") format("woff");}
JOIN OUR NEWSLETTER
  Thank you for Signing Up
  Please correct the marked field(s) below.
1,true,6,Lead Email,2

Recent Articles

test drive a website

Testimonials

Jo Seton
Jo Seton
Hope Coalition, Red Wing
Read More
"HOPE Coalition can thoroughly recommend Beau! He did a great job on our website, adding features we'd long wanted and "migrating" it successfully to a platform that is much easier for us to use. He's excellent at problem solving, and understands that non-profits operate on exceedingly tight budgets. Most importantly he takes the time to really listen to a client and to speak plain English (instead of "tech-ese")!"
Lindsey Lowther
Lindsey Lowther
Ed's Plumbing & Heating, Lake City
Read More
Definitely worth a 5-star rating! Beau takes time to make sure you have everything you want/need, and he made the entire process so easy. Pricing was excellent, delivery was fast, and we will certainly be working with Beau in the future. Highly recommended!
Captain Jake
Captain Jake
Swanee's Tackle, Bay City
Read More
" Best marketing guy around period listens to exactly what you want and then exceeds that by far will continue to do business and recommend his services to anyone ."
Stephanie Elsen
Stephanie Elsen
Red Wing
Read More
Beau Brewer Digital gets an A+++!! I have worked with Beau in promoting a large community event, as well as during my campaign for city council. First off, he is wonderful to work with. He listens and provides honest, helpful feedback, which helps projects become the best they can be. His knowledge of digital marketing is exceptional, ranging from the building of web sites to new tech like tracking pixels etc. I was always impressed with his suggestions and recommendations as well as his work.
Previous
Next
Scroll to Top