How To Add A Custom Font To Wordpress

If you want your website to truly stand out from the oversupply, then using custom fonts will aid yous achieve this. There are thousands of beautiful custom fonts to choose from, and by selecting the right ones for your projection, you will exist able to create a website that is not only unique but that besides reflects your style and branding. And then how do you add custom fonts to WordPress?

In this commodity, we will cover everything y'all need to know nearly applying custom fonts to your website. This includes:

Where to find custom fonts
How to add Google Fonts to your website using the plugin Like shooting fish in a barrel Google Fonts
Adding Google Fonts to your website manually (no plugin required)
Adding Adobe Fonts to WordPress
How to Add together Whatsoever Custom Font to Your Web Space

Set up to get started?

Where Can You Find Custom Fonts?

Nowadays, many premium WordPress themes send with a plethora of custom fonts. However, these tin can often increase theme bloat, and impact your website's load times more than you would think. You volition also notice that you actually only ever apply a couple of custom fonts at nearly, so the bulk of fonts that your theme provides will never be needed.

Therefore, we recommend choosing a lightweight WordPress theme, which yous tin can and so add together custom fonts to when necessary. There are a number of places where you can find the right custom fonts for your website. Let's take a look…

Google Fonts – The near popular pick, Google Fonts, offers a free directory of over 900 open source designer fonts that tin can be used in over 135 languages. These fonts tin can be apace browsed and then seamlessly integrated into any web design project.
Adobe Fonts (Previously known every bit Typekit) – Although Typekit offered both complimentary and premium versions of its service, now rebranded equally Adobe Fonts, you volition need to sign upwards to the paid Adobe Artistic Deject package to access this resource. There are thousands of fonts to choose from, all fonts are licensed for personal and commercial use, and you lot tin also select from project-themed font packs, which are perfect for those who lack an heart for design.
Font Squirrel – In the Font Squirrel library you lot volition find a mixture of free and premium fonts, the latter that can be bought as one-off purchases. Again, you can choose from thousands of loftier-quality fonts, the majority that are complimentary and commercially licensed.
Fonts.com – Providing over 150,000 desktop and web font products, Fonts.com contains an impressive collection of premium custom fonts. Y'all will besides notice an assortment of interesting articles on the Font.com blog, sharing typographic tips and techniques.
FontPair – Offer a slightly different feel to the other resources, FontPair couples together fonts from Google Fonts, helping yous notice the right combinations of fonts for your website.

So, now you lot know where to discover custom fonts. Let's next look at how to add together Google Fonts to your WordPress website.

How to Add Google Fonts to WordPress Using the Plugin Easy Google Fonts

As Google Fonts is the most pop resource for custom fonts, nosotros will start past looking at how to add together a font from this library to your website. There are a number of means to exercise this, only the quickest and easiest selection is to employ the WordPress plugin Easy Google Fonts.

Easy Google Fonts is a free WordPress plugin that volition enable you lot to insert custom fonts into your WordPress website, without having to touch a line of code. Integrating with the WordPress customizer, this plugin will permit you lot to insert and use Google fonts on the front-end of your website in existent-fourth dimension, without having to refresh the page.

Then let'south now discover out how to install and use this plugin.

Step 1: Install Easy Google Fonts

To become started with Easy Google Fonts, open your WordPress dashboard and select Plugins > Add New from the menu.

Then type Easy Google Fonts into the search function, and once the plugin has been retrieved, click on Install > Actuate.

You lot will now find Like shooting fish in a barrel Google Fonts under Settings in your WordPress menu.

Footstep ii: Edit Fonts in the WordPress Customizer

Once you accept installed Easy Google Fonts, from your WordPress bill of fare select Appearance > Customize. Your website will now open on the front-end, where y'all volition detect a Typography department has been added to the customizer.

Click on Typography. You can and then select the dissimilar areas of your website where you would like to employ a custom Google Font (east.g. paragraph, Header 2, Header 3, etc).

Under the section you want to edit, click Edit Font. You tin can then select the font you would like to employ – you volition be able to preview how each font looks straight on your website.

Not only can you alter the font type, simply you can too modify the colour, size, positioning, and much more. One time you are happy with your new font, click Publish.

Step 3: Create Custom Font Controls

Piece of cake Google Fonts default controls will allow you to change the fonts of paragraph sections and headers 1-6. However, not all elements of your theme are manageable by the default font controls.

If you lot want to alter a unlike element of your theme (other than a paragraph or header), then you volition need to create your own custom font controls. Although Like shooting fish in a barrel Font Control enables you to easily practice this, y'all will withal demand a basic understanding of CSS selectors.

To add custom font controls, select Settings > Google Fonts from your WordPress dashboard. Then, in the Edit Font Controls tab, give your new font control group an appropriate proper noun, and then select Create Font Control. Hither we volition create a font control for blockquotes…

Under Add together CSS Selectors, add the CSS selector for the element y'all would similar to manage. Y'all can add more than than ane element if you wish. Then select Save Font Command.

Back in the Customizer on the front-end of your website, under Typography, yous volition now find the option Theme Typography, where you can access your new custom controls.

You tin at present select a new custom font for the specific custom element and change whatsoever other Advent and Positioning settings.

Easy Custom Fonts is a bang-up option for anyone wanting to add custom fonts to WordPress from Google. However, if you prefer, you can besides manually add together Google Fonts to your website using simply lawmaking, no plugin. Permit'south find out how to practise this…

How to Manually Add Google Fonts to WordPress (no plugin required)

If you lot would rather add Google Fonts to WordPress manually, then you will demand a very basic knowledge of coding.

Step 1: Select a Google Font

To get started, open up Google Fonts, and select the custom font type that y'all would like to add to your website.

And so on the font's page, click on Select this Font. Hither nosotros have selected the font Indie Flower.

A popup volition now announced on your screen. Depending on the font you lot accept selected, you will be able to access a choice of customization options for font weights and styles, also every bit view the embed info.

Pace two: Embed the Custom Font's Code in your WordPress Website

Adjacent, you will need to copy the Embed code (run into popup above) and paste information technology into the <head> department of your WordPress theme. The easiest manner to exercise this is to install the gratis WordPress plugin Insert Headers and Footers. Using this plugin you can quickly add code to your website without having to edit your theme files.

After installation, open the plugin settings by selecting Settings > Insert Header and Footers from your WordPress dashboard. Y'all then demand to add together your Google Fonts embed lawmaking into the Header section.

Equally, if you would rather y'all can edit the header.php file of your kid theme.

Pace iii: Apply the New Font Using CSS

Once you accept added the HTML code for your custom font to your website, y'all can now use CSS to use your new custom font. In the Google Fonts popup, you will observe the CSS rules that are specific to your new font.

Dorsum in the Customizer on the alive-side of your website, select Additional CSS. Hither you can enter CSS code to customize the fonts on your site. Beneath you can see we have practical the Indie Flower CSS code to the header ii and paragraph sections…

The Customizer will show you the font alterations in existent-fourth dimension, and if you are happy with the results, click Publish.

How to Add together Adobe Fonts to WordPress

If you have signed up for the Adobe premium Artistic Cloud package, and then you volition exist able to add any of its custom fonts to your WordPress website. This process is very like to that of manually adding Google Fonts to your site. Let's take a quick wait.

Step i: Choose an Adobe Font

First things kickoff, you will need to browse Adobe'south extensive font library and choose a font/s that will fit with your project. Once yous have made a choice, click on the </> icon to add the font to a new Web Projection.

You will at present be asked to proper name your Spider web Project, as well as employ the checkboxes to select the font weights and styles that you lot want to include. And so select Create Project.

Step 2: Embed the Adobe Font's Lawmaking in Your WordPress Website

The next step is to embed the code that Adobe provides for your chosen font into your WordPress website.

This follows exactly the aforementioned process as embedding the Google Fonts code. Simply embed the lawmaking into the <head> tag on your website or utilise the WordPress plugin Insert Headers and Footers (as previously discussed).

Pace 3: Utilize the New Font Using CSS

Again, like Google Fonts, you can at present apply your new Adobe custom font using CSS rules. In your Adobe dashboard, your Web Project folio will listing the CSS font-family proper noun, as well as font mode and numerical weight, for each font blazon you selected.

Dorsum on your WordPress website, these CSS rules can be used within the Customizer under Additional CSS.

So now we accept covered how to add custom fonts to WordPress using the vastly pop free Google Fonts also as the impressive premium resource Adobe Fonts.

Nonetheless, the last option nosotros will discuss enables you to add whatever custom font to your website by uploading it to your site's server. Let'due south notice out more.

How to Add a Custom Font to Your Web Space

Calculation a custom font to your web space is relatively straightforward, but again, you volition need a basic understanding of CSS to utilise the font to your website.

Step 1: Download a Custom Font

As mentioned at the showtime of this article, there are numerous resources where yous can select costless or premium custom fonts to apply on your website. When choosing a custom font at add to your server, just make certain you take the correct to use it, and that information technology is downloadable.

Hither we accept downloaded the gratuitous custom font Milkshake from Squirrel Fonts.

It is important to download your custom font in a webfont format. The webfont container format WOFF enjoys the most cross-browser support, simply Google recommends delivering multiple formats to provide a consistent feel for users beyond devices.

If you need to convert your custom font into a dissimilar format, then Squirrel Font provides a free Webfont Generator tool that will enable you to exercise so.

Pace ii: Upload the Custom Font to Your Server

The next step is to upload your custom font to your server. To exercise this, open the File Manager in your site's cPanel.

Then within your active themes folder, create a new folder named Fonts and upload your custom font here.

If you have multiple formats of your font, then upload them all to the Fonts binder. Your custom font has now been added to your spider web space.

Stride three: Use CSS to Use the Custom Font to Your Website

You at present need to apply the custom font to your website. To start with, you demand to load the font in your theme's stylesheet. To do then, open up the WordPress Customizer and under Additional CSS add this lawmaking:

@font-face { font-family: Shake; src: url("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff") format("woff"); }

Importantly, make sure y'all alter the font name and the URL (re-create the URL for the font file on your server).

You can so go ahead and use CSS rules to update the fonts on your site. Here's an instance of how to apply the custom font to Header 3 and paragraph sections:

In one case you are happy with how your new custom font looks on your website, click Publish.

Last Thoughts on How to Add Custom Fonts to WordPress

Every bit you lot tin run across, if you are looking for a cute and attention-grabbing custom font, then at that place are numerous resources that volition enable you to find the perfect font for your project. And what's more, you lot are now armed with the knowledge of how to successfully add custom fonts to WordPress. So, which custom fonts volition yous choose?

Have any questions on how to add together custom fonts to WordPress? Please ask away in the comments below…

Searching for a free, professional and lightweight WordPress theme? Meet Sydney!

View Theme