Tag: fonts

Add Custom Fonts to your WordPress or ClassicPress Site

Using standard fonts on your Wordpress or ClassicPress site can get a little boring, and you might want to use custom fonts to brighten it up a little. Your blog conveys your vibrant personality and the topics you cover, and you can enhance it with a wide variety of custom fonts. Custom fonts are a nice feature which allow your blog to stand out from the crowd and catch the attention of readers..

Let’s face it; we all love blogs and sites with the right fonts. They not only decorate the site but also help attract the user to your content. However, the choice of standard WordPress fonts is limited and depends on the theme you are using. The good news is that you can add them manually or with specialized plugins.

And here, two questions arise – where to get custom fonts for WordPress and how to install custom fonts on your WordPress site.

Let’s take a look!

 Why Should I Use Custom Fonts?

The days are gone when Times New Roman and Georgia were considered the only fonts for texts on websites. Over the past few years, the font space has completely changed with the advent of fonts such as Google Fonts and others.

Today, there are hundreds of free fonts, information and training aids, and resources designed for design, available on the Internet. Unlike Adobe Illustrator, Photoshop, and other classic applications, WordPress does not give you full control over fonts by default. Only some themes choose to support and use custom fonts.

Therefore, in this post, you will learn how to find suitable custom fonts and how to use them in your WordPress site.

The Importance of Using Custom Fonts

Why change fonts, indent between words, line spacing, letter spacing, or font saturation, you ask? Be that as it may, some studies prove that typography improves reading comprehension.

Much depends on the construction of fonts. On a conscious and subconscious level – everyone evaluates the contents of a web page by design.

Font design affects readers, even if they do not pay attention to it. To abandon the font design means to abandon the development itself! The mood of the reader depends on it. The font either makes reading easier or forces users to leave the page.

All web browsers include a set of default fonts. This means that if the font is not specified in the CSS of the page, then the standard version will be used. You can always use the default fonts, but they complicate the work of users. That’s why it is essential to use a custom font. If your theme does not give you options for changing the font, many websites and tools can help.

Google Fonts Alternatives

Many of you know about free Google fonts. There are many more sites where you can find beautiful fonts. Some of them are free for personal use. If you need for commercial use, then you need a license. Google Fonts and Adobe Edge Fonts are free. That is why they are not so unique. And this doesn’t suit us.

Here are a few other resources for finding fonts for free and commercial use:

  1. TemplateMonster — On the TemplateMonster marketplace website, you will find everything for Web Design you need. There are also many fonts and font packs for personal use for a small price. Also, they are presented at ONE web development kit. The collection is huge and creative. To help you to choose, all fonts presented on brochures or frames. Every font is presented with a commercial license too.
  2. MyFonts — MyFonts currently offers the largest selection of fonts in the world. However, the prices here are also in the higher segment. So, if you have a tight budget, it might not be for you.
  3. FontSpring — Fontspring sells fancy fonts for commercial use. But in almost any family 1-2 free fonts that can be used for personal purposes. Besides, there is a separate section with free fonts. The collection is vibran. But you will have to carefully study the license information for a particular font before downloading.
  4. Cufonfonts —  It is also an extensive collection of different fonts. Select any, and you will see a page with detailed information about it. There are a lot of free fonts, and they are divided into individual sections. The sorting system on CufonFonts is quite flexible and convenient. Also, Webfont support is included.
  5. Dafont — Another accessible collection of 3,500 free fonts. Most of them are designed for personal use only. A nice feature DaFont is a category system. You can select fonts in the style of comics, video games, vintage, or stylized as Japanese characters.

The choice of fonts is very tempting because they are all pretty amazing. But you should not choose a lot. Use no more than two fonts on the site. Then the look of your website site will be consistent. Once you’ve picked your fonts, be sure to download the files for each style you’ll be using (normal, bold, italic, etc).

Now that you have selected the appropriate font for the site let’s find out how to add it.

How to Add Custom Fonts to WordPress

There are a few ways to add fonts to a WordPress site:

  1. Plugins: in this case, different WordPress plugins are used to facilitate the process.
  2. Manually: using this method, you need a downloaded font upload to the site and edit CSS file.
  3. Themes: many popular themes include built-in options to customize your fonts (note – we won’t be covering this option since the process will vary based on the theme you’re using, but quality premium themes like the Total WordPress theme will offer online docs you can easily follow – like this guide to add custom fonts to Total)

Option 1 – Change WordPress Fonts with Plugins

If we do not care about global changes, we can install WordPress plugins that will change the fonts on your site.

Characteristics of Custom Font Plugins

Open-source software has an advantage for the interest of the community, and WordPress also has this advantage. Several WordPress plugins allow you to add custom fonts. How to choose a suitable plugin with so many? What are the features of custom font plugins?

Here are a few points to take into account:

  • Ability to use custom font
  • Ability to use more than one font
  • Target Headers and Components
  • Bonus: the ability to change font settings from the visual editor

That’s all. The first feature on the list is very important. You can always download fonts from sites like DaFont, Font Squirrel, etc., but you need to be able to upload them to WordPress.

Let’s look at a few plugins for WordPress that allow you to upload custom fonts.

Custom Font Uploader

Custom Font Uploader

This plugin allows you to download Google fonts and apply them to various elements of your blog. For example, to the headings or body of the article or page.

Use Any Font

Use Any Font

This is a WordPress plugin that gives you a convenient interface to download fonts and use them directly through the visual editor. The WordPress visual editor can automatically change the font of any text. This plugin offers several features, which makes the process of adding custom fonts much more manageable.

WP Google Fonts

WP Google Fonts

WP Google Fonts allows you to use the Google font catalog. One of the amazing benefits of this plugin is the addition of close to 1000 Google fonts. While you can enqueue Google fonts manually, it’s much easier to use a plugin for most users.

How to install fonts with a plugin?

Let’s take, for example WP Google Fonts. Just install this plugin from the official WordPress repository and open the Google Fonts section.

WP Google Fonts

You’ll see a Google font control panel here. Choose fonts and change various settings, such as the font style, the elements to which it is applied, etc.

Option 2 – Install WordPress custom fonts manually

Through the @font-face directive, you can connect both one or several fonts to your site. But this method has its pros and cons.


  • Through CSS, you can connect fonts of any format: ttf, otf, woff, svg.
  • Font files will be located on your server – you will not depend on third-party services.


  • For the correct font connection for each style, you need to register a separate code.
  • Without knowing CSS, you can get confused easily.

But it is not a real problem if you can simply copy a finished code and where you need to specify your values.

Note: Before starting, be sure to create a child theme for your site. This way you can make all edits to your child theme, leaving your core theme in tact so you can easily update it as needed in the future.

Step 1: Create a “fonts” folder

Within your child theme create a new “fonts” folder under: wp-content/themes/your-child-theme/fonts

Step 2. Upload the downloaded font files to your website

This can be done through the control panel of your hosting or via FTP.

Add all font files to the newly added fonts folder: wp-content/themes/your-child-theme/fonts you created.

Step 3. Import Fonts via the child theme stylesheet

Open your child theme’s style.css file and add the following code to the beginning of the CSS file (after the child theme commenting):

font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;

Where MyWebFont is the name of the font, and the value of the src property (the data in brackets in quotation marks) is their location (relative links). We need to specify each style separately.

Since we first connect the normal style, we set the font-weight and font-style properties to normal.

Step 4. When adding italics, write the following:

font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;

Where everything is the same, only we attached the font-style property to italics.

Step 5. To add the bold font, add the following code:

font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;

Where we set the font-weight property to bold.

Remember to indicate the correct location of the font files for each style.

Step 6. To connect bold italics type out the following:

font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;

Well, that’s it! Now you have connected four font styles to your website.

But there is one glitch – this font connection will be incorrectly displayed in Internet Explorer 8. Fortunately, there are very few people still using IE8.

Wrapping Up Custom Fonts for WordPress

What is the first thing users notice when they visit your site? Right, its design! Most of the design relies on the proper use of beautiful fonts. So you have to take care of the font design of your site. Add code or use one of the plugins mentioned above to embed a new font style. Which way you choose it is up to you.

Make sure you are not using more than two fonts on the same site. Since the more custom fonts you add to the site, the slower the site’s speed becomes. If you enjoyed this post, why not check out this article on 17 of the Best Google Fonts For Wordpress!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, eCommerce, WordpressTagged with: ,

Adding Google Fonts To Your WordPress Site

The look, appearance and feel of a website is of great importance in attracting and holding a visitor’s attention. Content on a website can be dominated by text, images, or media. Text, wherever used, must be chosen with care. Typography plays an important part in the overall look and feel of a website.

Built in fonts are available in the browser and the style.css file usually accesses these fonts for display. This means that there is no variation and this makes for a lackluster website. But it doesn’t have to be that way. You can choose fonts that make your website outstanding and unique. Sometimes, fonts can even be the defining character of a website.

It may be useful to know that all fonts fall into one of two types- serif, which means the fonts have an added line or curl at the end of the main stroke or sans-serif, which means without such line or curl.

How to Add Google Fonts to Your WordPress Site

Choosing Fonts

There are many places where you can access great looking fonts such as FontSquirrel. Check whether the license attached to these resources permit you to use it for your purposes. Often the themes that you use on the website come with their own choice of fonts and you should really put these to good use. You can also purchase premium fonts from Typekit.

While choosing fonts, go in for a style that is in sync with the mood or target audience of your website. For instance a playschool’s website can use fonts that appear like a child’s handwriting. If you are combining two styles, pick opposites, such as thick and thin. Most importantly, the fonts should be readable.

Adding Google fonts to an existing theme may not be such a good idea, as you will have to use the filters and hooks provided by that theme to add Google fonts. Having said that, Google does have a large library of fonts, which is updated regularly. In this tutorial, you will learn how to integrate it with your website.

Once you have made your pick of fonts, the method of adding it varies,

  • One method requires that you download the font file and this can take up server space. Also not all font files are compatible with all browsers.
  • Another method requires that you use an enqueue script to link external scripts to your site.
  • Plugins can be used for adding Google fonts.

Method 1: Adding Google Fonts Using Code

As this method of integrating Google fonts will involve some editing of the existing theme, you may want to work within a child theme to prevent changes being lost at the time of updation.

Open Google Fonts page in your browser, and check out the font options available there. When you find the one you want, click on the Add to Collection button against that font style. For this tutorial, I am choosing Dancing Script style with weights 700 and 400. You can choose more than one font style. In this case, combine the multiple font styles with a ‘|’ symbol. If the name of the font style uses multiple words, insert a ‘+’ in between the words.


A pop-up will open at the bottom of your screen. All the font styles you have chosen will be displayed in that pop-up.


Next, click on the Use button to the right. Another page will open up where you can choose the weight of the fonts. The dial on the right indicates the speed at which the website will load for the respective font styles and weights. If you add more than one font style, the dial will display the total speed for all the font styles together. In this screen, you can also add any special characters specific to the language you have chosen.


Lower down the page, against step 3, you will notice 3 tabs- Standard, Import and Javascript. You can choose anyone of these tabs for embedding the code in your website.


Under the Import tab, you will see a code which includes the name of the font (highlighted) that you have selected.

@import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);

Now, you can simply paste this code in the style.css file of your theme. While this method is easy to follow, it has the disadvantage of slowing down your site. This is because the imported file will have to be downloaded first, and the rest of the content thereafter.

A better way of adding Google fonts is to use the code that is generated by clicking the Standard tab.

5 Standard with highlight

Pasting this piece of code directly in the header.php may not really do the trick. And making changes in the parent theme’s files is not advisable, as the changes may all be lost at the next updation. A neater way  of doing this is to make the changes in functions.php in the child theme. This means that these changes will play out sequentially after the parent theme functions are executed (and will not override the parent’s functions).

The link that is generated is a stylesheet declaration. You can register this code under ‘googleFonts’ and create a function load_fonts. This will enqueue the style. The add_action, will add the fonts to the header.

function load_fonts() {
add_action('wp_enqueue_scripts', 'load_fonts');

After this is done, save the file. With this action, the code will be included in the header, while the child theme continues to inherit the header.php of the parent. This method will improve the portability of your theme, while keeping it compatible with plugins.

Only one step to do now – integrating Google fonts in your CSS.

6 Integrating

So, proceed to your main CSS stylesheet and add a font family declaration there like this one,

body {
font-family: 'Dancing+Script' , sans-serif;
font-size: 14px;
color: #191919;

Similarly, you can apply the same style formatting to other elements and save your CSS file.
Now you will see that the website has been updated with the fonts you have selected.
If you choose to go with the code generated by clicking on the Javascript tab, paste the code in header.php, right after opening the head tag.

Method 2: Adding Google Fonts with plugins

As I’ve mentioned at the start, you can also add Google fonts using plugins. Installing and activating these plugins is quite easy. But choosing the right fonts with some plugins may be a little sticky, as it may need some customization with CSS.

There are many plugins that help to add fonts to your website, including Google fonts. To name a few- Fontmeister, Supreme Google Webfonts, Typecase Web Fonts, Google Web Fonts Manager. Let us take a closer look at two of the more popular plugins that will help in adding Google fonts.

WP Google Fonts

WP Google Fonts

WP Google Fonts adds the necessary code to your website. It helps you to add fonts from the Google Fonts directory in two ways –

  • From within your admin panel, you can assign Google fonts to specific CSS elements of your website.
  • Or, you can work from within the stylesheet of your own theme.

You can customize the fonts a good deal by checking the options in the settings page. However, there is no option to preview the fonts before hitting the save button. It is possible to save upto 6 settings and assign them to 6 different tags. The plugin is updated as and when fonts are added to the Google font library. It logs 100,000+ active installs, but annoyingly, advertisement for other services have been bundled with the plugin. It draws a 3.9 star rating.

Easy Google Fonts

Easy Google Fonts 6

Easy Google Fonts plugin integrates with your WordPress customizer and allows you to create custom fonts for your website and preview it, before zeroing on the font you want and saving it. You can insert font and font variants without any coding. Every aspect of the font can be customized- weight, size, height, color, spacing. When you choose a Google font, all the stylesheets for those fonts are automatically enqueued.

A major advantage with this plugin is that no editing is required in the themes stylesheet, which means you can update your theme without losing the Google fonts. The plugin is also translation ready with .mo and .po files included.

The plugin is ideal for website owners who want to stick to their theme, but just want to change the typography without any coding. Or for folks who have a basic knowledge of coding and want to add some custom font rules.

This plugin has clocked over 200,000+ installs and rates a high 4.9 stars.


Now that you know how to add Google fonts to a website, you can try it out for some variation in your website. Keep in mind that adding too many font styles can slow down your website, so keep it to the minimum that you will actually use. If you enjoyed this post, why not check out this article on Website Planning in 4 Steps and 20 Minutes!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: eCommerce, WordpressTagged with: ,

Website Fonts That Compliment

Fonts for Web & Wordpress Design

In website design, people often overlook minor details, like typography.

I know what some of you might be thinking. How important can a website’s font really be?

Believe it or not, something as simple as choosing the right font can have a major impact on conversion. Plus, website fonts affect the overall appearance of your site.

Now it’s unlikely that you’ve been on a website and thought, “Wow, this font is great!”

It doesn’t smack you in the face & it just isn’t something that our minds are trained to look for and I’m not expecting you to find a font that’s going to “wow” your website visitors. But, I can guarantee that you’ve been on websites that have fonts that were generic, unappealing, difficult to read, or felt out of place. You obviously don’t want people to have that impression of your website.

Why your website font matters

Here’s something to consider: different website fonts can change the reader’s perception of a particular topic.

Errol Morris conducted a survey in an article published in The New York Times in 2012. He included a passage from a book that claimed we live in an ear of unprecedented safety, and followed the passage up with two questions:

  1. Is the claim true? (yes or no)
  2. How confident are you with the answer? (slightly, moderately, very)

As it turns out, Morris didn’t care about anyone’s opinion. He just wanted to know if the font could influence their answers. Forty thousand people unknowingly participated in this experiment. While everyone read the same passage; they did not all see it in the same typography.

Check out these results.

Weighted Agreement

This graph shows all of the respondents who agreed to the first question. Morris took their levels of confidence in the second question and assigned a weighted value to each response.

In doing so, it’s clear that there was a difference between how confident people were in agreeing with the claims being made based on the font they were presented in. Now let’s look and see the results of respondents who disagreed with the passage.

Weighted Disagreement

Compare the two graphs. Do you notice any similarities?

As you can see, the Baskerville font was ranked highest for weighted agreement and lowest for weighted disagreement. Comic Sans font ranked lowest for weighted agreement, and ranked high for weighted disagreement.

Based on this data, Morris was able to conclude that fonts can influence the way people perceive information. Basically, the typeface can actually affect the credibility of your website.

In short — yes, website fonts matter.

The best Google Font pairings for 2019

You don’t want to have the same font everywhere on your site; that’s too boring. Mix it up! But make sure you pick fonts that go well together. I created this guide to help you do just that.

There are plenty of platforms for finding free fonts, but Google Fonts is my favorite. I identified the top Google Fonts pairings for 2019. So check out my list, and pick out a combination that works best for your website.

Open Sans and Roboto

Open Sans and Roboto Font

The header of this screenshot is Open Sans semi-bold. The paragraph below it is Roboto regular. I think the semi-bold header just ads a bit more punch than the regular weight of Open Sans, but it’s fine if you go with that option as well.

The reason why these fonts work so well together is because they are both crisp and extremely legible.

You’ve got lots of different options here to consider for your website design. This combination could be used to convey the value proposition on your homepage. Use the Open Sans header as a point of emphasis, and then elaborate on the subject using Roboto.

These fonts work well together if you swap them as well. You could use Roboto as the header, and Open Sans for the paragraph. In this case, I’d recommend going with Roboto medium, and Open Sans regular.

Playfair Display and Montserrat

Playfair Display and Montserrat Font

This font combination works best for shorter text on your website. I wouldn’t necessarily use it on a blog post or something like that.

However, this pairing is perfect for a product title and product description, especially for ecommerce shops in the fashion industry. The lighter weight font, like Montserrat light, gives the text a certain level of elegance that fits with a luxury brand persona.

Interestingly enough, if you swap the two and use Montserrat as the header, the persona changes to something that feels futuristic or techy. That combination can work well for some of you who are promoting a game, or even on a landing page to download your mobile gaming app.

Either way, these two fonts work well together. It depends on the theme and overall message that you’re going for on your website.

Lora and Alegreya

Lora and Alegreya Font

Lora bold is strong and legible, which is why it’s perfect for title pages. While the typography is powerful, it’s still friendly and inviting.

Alegreya regular compliments Lora really well, especially when used for captioning images.

While Alegreya is definitely legible, it can be challenging to read for long stretches, which is why it’s better for short text like captions or quick descriptions. I would not recommend experimenting with any other variations of Alegreya. Adding weight or italics to this font loses the legibility.

Now if you swap their positions, Alegreya bold works fine for title and header text. Lora regular is legible, so you could consider using it for longer text. I think this combination would be perfect for something like a customer testimonial or short case study.

Merriweather and Lato

Merriweather and Lato Font

Merriweather light and Lato regular is a very clean and professional combination.

It’s a popular choice because the options are so versatile. Merriweather light is modern, tasteful, and appealing. When it’s followed up with text written in Lato, the pairing feels trustworthy.

I’d recommend using this combination on your homepage. For those of you who have a design that involves scrolling to learn more information, this text combination will work perfectly. I’m picturing a website visitor scrolling down your home screen, seeing an image on the left side of the page and this font combination on the right. When they continue scrolling, the next image will be on the right, and the text will be on the left.

If this sounds like your current design, definitely consider using this combination to add a touch of professionalism to your content.

Amatic SC and Josefin Slab

Amatic SC and Josefin Slab Font

The font combination of Amatic SC bold and Josefin Slab italic is definitely not for everyone. I can’t say that I would recommend it to the majority of websites, but it’s an ideal combination for artsy websites. If you’re a musician, painter, or photographer, these fonts can be used sparingly on your pages.

The key here is to make sure that the text has plenty of space to breathe. I’d recommend using it against white or very light backgrounds. So check out my post on the top trending website color schemes of 2019 as well.

If you sell ceramics or sculptures, this font can be very appealing to your audience and fit nicely with the overall theme of your business.

Just make sure you don’t go overboard. Using too much of this on the screen is unappealing and challenging to read. So pick something else for longer blocks of text, such as your biography or about me pages.

Cinzel and Raleway

Cinzel and Raleway Font

Cinzel is a bold font (no pun intended). It’s all capital letters, which makes it more suitable for short text as opposed to long blog posts or things of that nature.

It’s complemented really by a font that’s a bit more traditional, like Raleway. These two fonts are perfect for websites in the food and drink industry.

You could consider using this to spice up your online menu. Have the menu categories in Cinzel black, the meal titles in Cinzel bold, and the description of the item written in Raleway regular.

If you really want to be unique, you can swap the two and use Raleway for headings and Cinzel for the body text. This could work well for local coffee shops that update their website with daily specials or weekly brews.

PT Sans Narrow and PT Sans

PT Sans Narrow and PT Sans

PT Sans Narrow and PT Sans is a classic combination. This versatile choice will work well for nearly any website in 2019.

Since both fonts are so legible, you can use it for text in short-form, as well as long-form content such as blog posts.

I like these fonts because they are easy to read, but not too generic and boring. PT Sans Narrow and PT Sans are inviting, so consider using them on home screens and landing pages.

How to pick the best website fonts

Now that you’ve seen some of the best Google Fonts combinations of 2019, how can you decide which one is best for your website?

The first thing you need to do is determine what type of content the font will be used for. Decide if the fonts are for your blog, homepage, landing page, product description, or navigation menu.

You’ll also want to consider the type of business you have, as well as the audience you’re targeting. Does the font need to be professional? Or do you have some room to be a bit unique?

The key to pairing two fonts together is contrast. The fonts should be different enough that each is distinguishable, but not so different that the reader is distracted.

You may want to use a few font combinations on your website, but don’t go overboard. Keep it simple. Each page should just have two fonts; three at most. If you want to use more, consider using variations of the fonts already on the page (light, italic, medium, bold, etc.) instead.


Fonts are important, so it time to get rid of the default. Google Fonts is one of the best resources for free website fonts. The platform has some of the top site fonts that compliment each other.

  • Open Sans and Roboto
  • Playfair Display and Montserrat
  • Lora and Alegreya
  • Merriweather and Lato
  • Amatic SC and Josefin Slab
  • Cinzel and Raleway
  • PT Sans Narrow and PT Sans

And to get an idea how to differentiate between the different types of font check out this Creative Bloq article. If you enjoyed this post, why not check out this article on Website Planning!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Marketing, StrategyTagged with: , ,