How To Upload Font To Wordpress Theme

Read Fourth dimension: 9 mins Languages:

Do you want to brand your WordPress website stand up out from the oversupply?

Custom fonts are i way to requite your site that unique await and experience you've been craving, fifty-fifty if y'all're using the exact same theme as endless other WordPress websites.

In this article, this post, I'll bear witness you how to add together new fonts to WordPress. Even amend, I'll evidence you how to get your hands on thousands of free custom fonts, from two of the Net's near popular online font repositories: Abode's Typekit and Google Fonts.

If you desire to learn how to alter the font size in WordPress, or how to alter the font color in WordPress yous tin also learn how here.

Another not bad way to make your site look beautiful is with a professional WordPress theme. You tin can find thousands of the best WordPress themes e'er created on ThemeForest.

Image: https://cms-assets.tutsplus.com/uploads/users/769/posts/34347/image/themeforest popular wordpress themes.jpg

Where Can I Find Complimentary Custom Fonts?

Although I'll exist focusing on Typekit and Google Fonts, there are countless websites that offer free custom fonts. The process of adding these fonts to your site can vary, only throughout this tutorial I'll be covering the near mutual methods, including using plugins and editing your website'south CSS. By the end of this tutorial, you'll have techniques that you can apply to the majority of custom font repositories, even if they're not explicitly covered in this tutorial.

If yous already accept a specific font in heed, and so it's worth booting up your favourite search engine and running a search for custom font followed by a few words that draw your ideal font, such as custom font Netflix or custom font Star Wars.

If y'all don't have a particular font in listen, then Typekit and Google Fonts offer thousands of custom fonts, so these two sites should provide you with plenty of options. All the same, if yous've trawled Typekit and Google Fonts and nevertheless can't observe a font catches your eye, then FontSquirrel, 1001 Fonts and FontSpace are too great places to observe custom fonts.

Just don't get carried abroad, as cramming your website total of third party fonts can touch its functioning, and websites that are forever switching between dissimilar fonts tend to be hard to read, and unpleasant to wait at!

Calculation Google Fonts to WordPress

At that place'due south typically two ways you tin can add new fonts to WordPress: utilize a dedicated plugin, or edit your website'due south CSS. In the following sections, I'll be covering both methods.

CSS: Adding Custom Google Fonts Manually

Editing your theme's CSS is a multi-pace process, but it'south also one of the virtually versatile ways to import new fonts:

Caput over to the Google Fonts website, and detect a font that you desire to use. So click the Select this font link.

Google Fonts contains hundreds of free fonts that you can add to your WordPress website

A Family selected popup should now appear towards the bottom-correct of the screen. Click it.

Make sure the Embed tab is selected, and copy the provided embed lawmaking.

In a split tab, log into your WordPress business relationship.

In WordPress' left-hand menu, navigate to Appearance > Theme Editor.
Open up the Select theme to edit dropdown, choose your current theme, and then click Select.
In the Theme files menu, select the header.php file.
Observe the opening <head> tag, and paste the Google Fonts embed code direct later this tag.
Click Update fileto complete the edit to your theme.

At present that you've added this font to your website, you need to define where WordPress should apply it, for example perhaps desire to use the Google Font for your website'south body text or all h1 headings.

In WordPress' Theme files menu, find the style.css file, and click it. Note that in some themes way.css may be stored within a CSS folder.
Switch back to your Google Fonts tab and select @Import.
Copy theSpecify in CSS code.

Select the Import link which gives you access to some CSS code

Switch back to your WordPress tab and observe the section of code that represents where you want to use this font. For example, if you wanted to apply the font for your website'south trunk text, and so you'd need to locate a department of code that looks something like this:

body{      margin:0;      padding:0;     line-tiptop:20px;      font-size:13px;      color:#5c5c5c;      font-family: 'Montserrat', sans-serif;       -ms-give-and-take-wrap:interruption-discussion;      word-wrap:suspension-give-and-take;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box; }

This step can vary depending on your theme and the type of text y'all want to edit. If you're struggling to work out which piece of code you need to alter, so try opening the mode.css file and performing a search for font-family every bit this will highlight all the code that controls how fonts are used across your website.

One time you lot've identified the correct piece of code, you'll need to supersede the font-family with Google Fonts' specify in CSS code. For example, my specify in CSS lawmaking is:

font-family: 'Indie Blossom', cursive;

And so I need to replacefont-family: 'Montserat' in the fashion.css file. This gives me the following:

body{      margin:0;      padding:0;     line-summit:20px;      font-size:13px;      color:#5c5c5c;      font-family: 'Indie Flower', cursive;       -ms-discussion-wrap:break-word;      discussion-wrap:suspension-word;      -webkit-box-sizing: border-box;      -moz-box-sizing: border-box;      box-sizing: border-box; }

Once you've modified the code, salve your changes by clicking Update File. Refresh your WordPress website, and it should now exist using your new font. Note that if the font doesn't change following a refresh, then you may need to articulate your cache or view your website in an incognito tab.

Adding Custom Fonts Using the Google Plugin

Since every WordPress theme is unique, editing a theme'due south CSS files tin sometimes be a challenge.

If you're struggling to work out which piece of code you lot need to edit, or you but don't like the idea of delving into your website's CSS, and then you can import Google Fonts using the Like shooting fish in a barrel Google Fonts plugin:

In WordPress' left-hand menu, select Plugins > Add New.
Search for the Easy Google Fonts plugin, and when it appears select Install followed by Activate.
Next, navigate to Appearance > Customize.
You'll now have access to a new Typography item. Click it.
SelectDefault Typography.

You can access Google Fonts entire library of free fonts by installing a dedicated plugin

Gyre the side-menu until you find the section of text that you lot desire to edit, such as Heading 1 or Paragraphs, and then open the Font Family dropdown and cull the Google Font that you want to use.

Once yous've selected your font, you lot can customize it using the settings in the Appearance and Positioning tabs, for example you may want to modify the font'southward color, size or spacing. When you're happy with your new font, select Publish.

Your website should now update to use this new font.

Calculation a Custom Font Using Typekit

Google Fonts isn't the only place where y'all tin can get admission to free custom fonts. Let'southward expect at how you tin use CSS to add any font from Adobe's Typekit repository:

Go to the Typekit website and sign upward for an account.
Browse the Typekit library, and find a font that y'all want to add together to your WordPress website.
Give the Add to Web Project button a click.
Give your projection a descriptive name, and and then select Relieve.
Push the Activate fonts slider into the Onposition.

Find a font you want to use and push its Active fonts slider into the On position

You'll now demand to copy/paste this font'south embed lawmaking into your website'southward <caput> tag. To become your hands on the embed code, navigate to My Adobe Fonts > Spider web Projects or admission the Web Projects folio straight.

Find the provided embed lawmaking and copy information technology—without whatsoever of the <style> tags.
In a new tab, log into your WordPress business relationship.
In WordPress' left-mitt card, select Appearance > Theme Editor.
Open the Select theme to edit dropdown, choose the theme yous're currently using, and then click Select.
In the Theme files carte, notice the header.php file and clickit.
Find the opening <head> tag, and paste the embed code straight after this tag.
Click Update file.
Flick back to the Typekit tab, and discover the following link: If yous'd similar to use fonts in HTML email, use the @import link. Select this link and and so copy the provided import code.
Flick back to WordPress. In the Theme Files card, selectstyle.css.
Paste the embed code at the very start of the style.css file.

Add custom fonts to your website by editing your stylecss file

Save your changes to the theme by clickingUpdate File.

Now, you need to find the code that defines the font you lot want to alter, and update information technology to reference your Typekit font instead.

This process will vary depending on the theme you're using and the text you want to update, but you'll typically need to complete the following steps:

In WordPress' Theme Files carte, select the style.css file.
Detect the department of code that y'all need to update; one time once again information technology may help to search for the phrase font-family every bit this will highlight all of your theme'south font-related code.
Once y'all've identified the right section of lawmaking, you'll need the CSS for your new Typekit font. In a new tab, caput over to Typekit'southward Active Fonts section (or navigate to My Adobe Fonts > Active Fonts.)

Head over to the Adobe Typekit website and navigate to My Adobe Fonts Active Fonts

Find the font that y'all want to utilize on your website and click information technology.
Scroll to the bottom of the font'southward page; theHow to Utilize section should comprise aSpider webcode. Copy thefont-family section.
Switch back to your WordPress tab, and replace the font-family unit line with the line that you lot only copied.
When you're happy with your changes, click Update File.

Check your website; it should now be using your new font!

Conclusion

In this tutorial, I showed you how to customize any WordPress theme, using the endless supply of gratis fonts bachelor online.

If you lot've been following along, then y'all at present accept the unabridged Google Fonts and Typekit libraries to choose from. However, if you desire to download a font from someone other than Adobe or Google, then you should exist able to get similar results past finding that font's embed code and pasting it into your WordPress theme files, using the instructions outlined in this article. Many large font repositories also have dedicated plugins that make it easier to add fonts to your website, and so it's always worth checking whether at that place's a plugin available.

Give Your Site a Makeover With a Professional WordPress Theme

Are you in the process of giving your WordPress website a makeover? Our collection of professionally-designed WordPress themes can requite your website an entirely new look and feel, within minutes.

Here are a few of the best-selling and up-and-coming WordPress themes available on ThemeForest for 2020.

Did yous find this post useful?

Jessica Thornsby

Jessica Thornsby is a technical writer based in Sheffield. She writes virtually Android, Eclipse, Java, and all things open source. She is the co-writer of iWork: The Missing Manual, and the author of Android UI Design.