The Easy Way to Add Fonts to Your Website (Including Custom Fonts) Oct 5, 2018 // Tanya Cull

Spread the love

Including a exceptional font to your site is a superb way to make your style stand out online.

In the following guide, I’ll help you through the step-by-step procedure for incorporating some font to your site.

Note: since sites aren’t all assembled and handled the exact same manner, I’ll present the very universal approach for incorporating custom fonts and explain how the hottest site construction platforms support custom fonts.

What fonts may be used online?
Different font browser and formats support
The best way to add custom fonts with @font-face (CSS principle )
How Content Management Systems support custom fonts
How site builders support custom fonts

What fonts may be used online?
Technically speaking, you can add nearly any font into any site.

But while looking for a font on the internet, you always need to remember that the price tag, the license arrangement , along with the setup system.

Without further ado, here are a Few of the hottest font libraries That Will Help You locate that perfect font:

Google fonts boast an impressive library of near 1000 libre permit fonts which could be browsed by using their interactive directory. Due to their Developer API, Google Fonts are arguably the easiest fonts to grow your website and where I’d advocating starting your own search.

Connected: Top 20 hottest Google Fonts

Adobe Typekit is a internet subscription-based service which provides users access to tens of thousands of fonts under one licensing arrangement. Their free program gives access to 950+ fonts whereas their high quality programs give entry to 7,500+ fonts.

Notice: All programs comprise pageview limitations ranging from 25k views/month to 1 million views/month.

In addition to supplying a collection of free fonts accredited for commercial use, Font Squirrel is well-known for their own Font Identifier and Font Generator.

The Webfont Generator permits you to convert any font which you legally have the rights to (.ttf or .otf file format) and convert it into a usable WebFont Kit which contains a easy-to-use Cascading Style Sheet (CSS).

Over the last couple of decades, contemporary browsers have radically improved the way they support custom fonts. But even now, not all formats are supported on each browser.

Here are the most Well-known browsers and also what font arrangement that they support:


I would always advise using TTF/OTF and WOFF to make sure your fonts are supported across all browsers.

For additional information on supported font formats, attempt Can I Use – A fantastic tool for exploring feature compatibility across various browser versions (FREE).

The best way to add custom fonts into your site using @font-face
The @font-face CSS rule clarified below is the most typical approach for incorporating custom fonts into a site.

Step 1: Download the ribbon
Locate the customized font that you need to use on your site, then download the TrueType Font file format (.ttf).

Step 2: Produce a WebFont Kit for cross-browsing
Publish your .ttf or .otf file into the Webfont Generator then download your Internet Font Kit.

Step 3: Publish the font files for your Site
Using your FTP or file manager, upload all of the font files located inside your Internet Font Kit to your site. * Generally this kit may consist of multiple file extensions for example (.eot), (.woff), (.woff2), (.ttf) and (.svg).

Your kit may also have a Cascading Style Sheet (.css) which you’ll have to upgrade and upload in measure 4.

*This measure will vary greatly based upon how your site is hosted and built.

Step 4: Update and upload your own CSS document
Replace the present source URL using all the new URL you made by uploading every file.

By default, the origin URL place is place within the downloaded Internet Font Kit. It has to be substituted by the place in your server.

Here’s a Fast example:

Before upgrade:

After upgrade:

As soon as you’ve upgraded the CSS file, then you have to upload it into your site (host ).

Measure 5: Utilize the custom font on your CSS declarations
Now your Cascading Style Sheet and font files have been uploaded to your own server, you should begin using your customized font on your CSS declarations to help enhance the appearance of the HTML.

This may be completed in a number of ways, such as adding site-wide declarations to a primary CSS file.

Here’s a Fast example:

h1 undefined


The way to add fonts from popular site building tools
Content Management Systems (WordPress, Drupal, Joomla, etc.)
There are a Couple of Various Ways you can add custom fonts into a Content Management System (CMS) such as WordPress (WP):

Adding custom fonts with @font-face CSS
Insert fonts with a WordPress plugin
Manually adding fonts out of Google Fonts
Broadly , the 5 step procedure shown above are the default option when incorporating a customized font into a CMS. Even though the procedure might seem fairly straightforward for individuals experienced with manipulating code, novice users may frequently search for an alternate.

If you’re using WP and do not have some experience editing the source code (motif files), then you’ll almost certainly wish to rely upon a typography plugin. Plugins make it much easier to add custom fonts without needing to write any code on your own.

The one thing I care about when utilizing WP plugins is they can give rise to an assortment of problems on your own site. It is important to always research plugins prior to using them on your website.

In the end, since Google Fonts supplies a developer API, then you might even decide to”manually insert ” these fonts into your theme with the functions.php file.

There are a whole lot of website builder choices on the internet that handle custom fonts in various ways.

For the most part, the very best site builders make it fairly simple to include fonts from popular websites such as Google Fonts.

As an instance, using PageCloud, including a ribbon from Google could not be simpler. All you have to do is copy and paste the ribbon, and then voila, your font is added into a webpage and ready to be styled at all!

But not all site builders allow it to be this simple to include a Google Font.

By way of instance, incorporating a Google Font in Weebly will ask that you edit the source code (CSS) of your site. They describe that the 8 step procedure within their knowledge base.

Here’s a Brief list of the Best site builders and how they handle Google Fonts:

As you can see, each site builder employs another strategy for incorporating fonts which could vary from very simple to somewhat complex.

Typically, when wanting to put in a custom font that doesn’t exist inside Google Fonts, you’ll have to edit the CSS in your site. This procedure can be radically different dependent on the web site builder you choose to utilize.

I would recommend searching through their various knowledge bases and neighborhood forums to learn more.

By way of instance, the procedure for including a custom font with PageCloud is quite much like the step-by-step manual given above.

No matter your expertise with CSS, following the directions in this guide will provide you the capability to bring any font to some site building platform.

However, as Soon as You’ve successfully added the ribbon you wanted for a website, the questions you Want to ask are:

Can you have the capability to personalize the appearance of the font?
If you do not have extensive experience with CSS, these customizations can be quite hard when using a CMS or a stiff template based site builder such as SquareSpace.

That is the reason why I’d recommend having a flexible site builder such as PageCloudthat provides you amazing flexibility when wanting to create a exceptional design with almost infinite font and style choices.

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar