How To Install Font In Website

Adding a unique font to your website is a swell way to make your design stand out online.

In this article, I will walk you lot through the step-by-step process for adding any font to your website.

Note: because websites are not all built and managed the same fashion, I volition introduce the near universal approach for calculation custom fonts and and then explain how the most popular website building platforms support custom fonts.

Contents:

What fonts can be used on the Web?
Different font formats and browser support
How to add custom fonts using @font-confront (CSS dominion)
How Content Management Systems support custom fonts
How website builders support custom fonts

What fonts can be used on the Web?

Technically speaking, you lot tin add together just about any font to any website.

Nonetheless, when searching for a font online, you always desire to continue in mind the price, the license agreement, and the installation method.

Without farther ado, here are some of the well-nigh popular font libraries to help you discover that perfect font:

Google Fonts (Gratuitous)

Google fonts boast an impressive library of close to 1000 libre license fonts that can be browsed via their interactive spider web directory. Because of their Developer API, Google Fonts are arguably the easiest fonts to add to your site and where I would recommending starting your search.

Related: Top 20 nigh popular Google Fonts

Adobe Fonts (Premium)

Adobe Fonts, (previously Typekit) provides a drove of +14,000 stunning fonts. The new and improved service at present provides Artistic Deject subscribers subscribers with easy access to their unabridged library of fonts through the click of a push. Unlike Typekit, Adobe Fonts has removed limits on folio views and has made all their fonts attainable for both desktop and spider web utilize.

Note: Artistic Cloud Subscriptions (with Adobe Fonts) starting time at $20,99 /calendar month.

Custom Fonts (Font Squirrel)

On top of offer a selection of free fonts licensed for commercial piece of work, Font Squirrel is well known for their Font Identifier and Font Generator.

The Webfont Generator allows you to convert any font that you legally own the rights to (.ttf or .otf file format) and catechumen it into a usable WebFont Kit that includes an easy-to-use Cascading Way Sheet (CSS).

Unlike Font Formats and Browser Back up

Over the past few years, modern browsers have dramatically improved how they support custom fonts. Even so, even today, non all formats are supported on every browser.

Here are the most pop browsers and what font format they currently support:

(source: https://world wide web.w3schools.com/Css/css3_fonts.asp )

I'd ever recommend using TTF/OTF and WOFF to ensure that your fonts are supported across all browsers.

For more details on supported font formats, endeavour Tin can I Use - A great tool for researching feature compatibility across different browser versions (Free).

How to add custom fonts to your website using @font-face

The @font-confront CSS rule explained below is the most common approach for adding custom fonts to a website.

Step ane: Download the font

Find the custom font you lot desire to use on your website, and so download the TrueType Font file format (.ttf). You can also download the OpenType Font format (.otf)

Step two: Create a WebFont Kit for cantankerous-browsing

Upload your .ttf or .otf file to the Webfont Generator so download your Web Font Kit.

Pace iii: Upload the font files to your website

Using your FTP or file manager, upload all the font files plant within your Spider web Font Kit to your website.* Typically this kit volition include multiple file extensions such every bit (.eot), (.woff), (.woff2), (.ttf) and (.svg).

Your kit will too include a Cascading Mode Canvas (.css) that you will need to update and upload in step 4.

*This step will vary greatly based upon how your website is built and hosted.

Stride 4: Update and upload your CSS file

Open the CSS file in a text editor such as Textedit, NotePad or Sublime.

Supervene upon the existing source URL with the new URL you created past uploading each file.

By default, the source URL location is fix within the downloaded Web Font Kit. It needs to exist replaced by the location on your server.

Here's a quick example:

Before update:

@font-face {
font-family: "CustomFont";
src: url("CustomFont.eot");
src: url("CustomFont.woff") format("woff"),
url("CustomFont.otf") format("opentype"),
url("CustomFont.svg#filename") format("svg");
}

After update:

@font-face {
font-family: "CustomFont";
src: url("https://yoursite.com/css/fonts/CustomFont.eot");
src: url("https://yoursite.com/css/fonts/CustomFont.woff") format("woff"),
url("https://yoursite.com/css/fonts/CustomFont.otf") format("opentype"),
url("https://yoursite.com/css/fonts/CustomFont.svg#filename") format("svg");
}

Once you've updated the CSS file, you need to upload it to your website (server).

Step five: Utilize the custom font in your CSS declarations

Now that your Cascading Style Sheet and font files are uploaded to your server, you lot can start using your custom font in your CSS declarations to assist improve the look of the HTML.

This can be washed in multiple means, including calculation site-wide declarations to your main CSS file.

Hither is a quick example:

h1 {
font-family unit: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}

How to add fonts in popular website building tools

Content Management Systems (WordPress, Drupal, Joomla, etc.)

There are a few unlike ways you tin can add custom fonts to a Content Direction System (CMS) similar WordPress (WP):

Adding custom fonts using @font-face CSSAdd fonts using a WordPress plugin Manually adding fonts from Google Fonts

Mostly speaking, the 5 pace process shown above will be the default approach when adding a custom font to a CMS. Although the procedure might seem pretty straightforward for people experienced with manipulating lawmaking, novice users volition oft look for an culling.

If you are using WP and don't have any experience editing the source code (theme files), you will almost likely want to rely on a typography plugin. Plugins make it easier to add custom fonts without having to write any code yourself.

The simply thing I caution about when using WP plugins is that they tin can cause a variety of bug on your website. It's important to always inquiry plugins before using them on your site.

Finally, because Google Fonts offers a developer API, you can also cull to "manually add" those fonts to your theme using the functions.php file.

Website Builders (PageCloud, Squarespace, Wix, Weebly)

There are a ton of website architect options online that manage custom fonts in dissimilar ways.

Google Fonts

For the most part, the top website builders make it pretty like shooting fish in a barrel to add fonts from pop sites like Google Fonts.

For example, with PageCloud, adding a font from Google couldn't exist easier. All you lot need to exercise is re-create and paste the font, and voila, your font is added to your page and ready to be styled in any way!

However, non all website builders make it this easy to add together a Google Font.

For instance, calculation a Google Font in Weebly will crave you to edit the source lawmaking (CSS) of your website. They explicate the 8 step process in their knowledge base.

Here is a short listing of the top website builders and how they manage Google Fonts:

Pagecloud
SquareSpace
Wix
Weebly
Shopify
Webflow

As yous can see, each website builder uses a different approach for adding fonts that can range from very piece of cake to somewhat complicated.

Custom Fonts

In most cases, when looking to add a custom font that does not exist inside Google Fonts, you volition need to edit the CSS on your website. This process can be dramatically different based on the website builder yous make up one's mind to apply.

I'd recommend searching through their corresponding cognition bases and community forums for more than information.

For example, the process of adding a custom font with Pagecloud is very similar to the step-past-step guide provided above.

Summary

Regardless of your experience with CSS, post-obit the instructions in this article will give you the ability to add any font to whatsoever website edifice platform.

However, once you lot've successfully added the font you wanted to your website, the questions yous need to enquire are:

Do you lot accept the ability to customize the expect of the font? (font weight, color, line-height, letter spacing, opacity, etc)Can you customize the layout of your site to make the font stand-out(position of text, images, videos, etc)

If you don't take extensive experience with CSS, these customizations tin be very challenging when using a CMS or a rigid template based website builder like SquareSpace.

This is why I'd recommend using a flexible website builder like Pagecloud that gives you lot unrivalled flexibility when looking to create a unique layout with virtually unlimited style and font options. Sign up today to try Pagecloud's website builder and e-commerce platform!