How to Add Custom Fonts to your WordPress Theme

Do want to add custom fonts to your site? The font styles of your website are one of the important design elements of your website. By simply changing the font, you can change the look and feel of your website.  Adding custom web fonts have made it possible to include the design and typography principles (previously restricted to print and graphic design) in the web.

Why are web fonts important?

When you visited content on the web, pretty much everything looked the same from a font perspective because in the past our websites relied on whatever fonts were installed on visiting computer. These fonts made the web a bit boring from the typography perspective. So web designers and web developers started coming up with all sorts of crazy ways of adding custom fonts. They would use image replacements for fonts or tunnel through the web to display fonts in a different way.

Over the past few years, this has changed because the new technology available. You no longer have to worry about these standard basic boring fonts. You can add whatever fonts you want which can be done through CSS. As long as you have an SEO friendly font you can display that font and you are no longer restricted when it comes to typography design on your site. You can find many custom web fonts on the web and make sure that the web fonts that you are using are legal and you have the correct license to distribute that font.

Google web fonts

Google fonts have an ever expanding list of fonts. Some of them are really great, so before you make a decision here you need to test the fonts to make sure they make your WordPress site SEO friendly and look great on your browser. You can sort the fonts based on thickness, slant, and fitness. You can choose fonts based on scripts.

Google Fonts

Google Fonts

If you are using different written languages and you want to make sure that the fonts you select actually have the glyphs that are required in your language, you can pick a different script type that make sure that your fonts match.

Typekit

Typekit is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration.Typekit has free and premium fonts you can choose from.

Typekit

Typekit

 

  • Sign up for Typekit and create a new kit.
  • Choose the font you want from their library and add it to your new kit.
  • Copy the Default embed code.
  • Install and activate the Typekit fonts for WordPress plugin.
  • Go to Settings ->Typekit fonts and paste the embedded code.
Now you can update the CSS with our font name to get it to show up on our site.

 

AdobeEdge fonts

AdobeEdge Web Fonts is a free service that offers fun stuff for rich typography in your HTML files. These fonts give you access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. Adobe Edge Web Fonts is an open source font service, comparable to using Google Fonts in your WordPress website. It is powered by Adobe’s better-known, commercial web font service, Typekit.

Adobe Edge Web Fonts

Adobe Edge Web Fonts

CSS3 @font-face

The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3@font-face method. Your “own” fonts are defined within the CSS3 @font-face rule. With this method, you can use any font that you like on your website.

The first thing you need to do is download the font that you like in a web format. If you do not have the web format for your font, then you can convert it using FontSquirrel Webfont generator.

Once you have the web font files, you would need to upload it on your web hosting server. The best place to upload the fonts is inside a new “fonts” folder in your theme or child theme‘s directory. You can use FTP like Filezilla or File Manager of your cPanel to upload the font.

Once you have uploaded the font, you need to load the font in your theme’s stylesheet using CSS3 @font-face rule like this:

@font-face {
font-family: Arvo; 
src: url(http://www.onlineshouter.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); 
font-weight: normal; }

Make sure you don’t forget to replace the font-family and URL with your own. After that you can use that font anywhere in your theme’s stylesheet which will look like this:

.h1 site-title {
font-family: "Arvo", Arial, sans-serif;}

When you choose to use custom fonts in your WordPress theme, you have to make a conscious and deliberate decision of where the files of the web font are going to live. You can either choose to place them in your theme or use a third-party service to serve those files up. This is important because when you are using custom font the browser has to download all the font files and install them locally inside the browser so that they can display all the content with that font.

Christine

Christine

Author at onlineshouter
Christine writes for people who seek for knowledge about SEO, blogging, online marketing, gadgets and web apps.
Christine

Leave a Reply

Your email address will not be published.