WordPress Event Ticketing

Typography is the first impression of your website. Messy and illegible typography is a sure fire way to get a high bounce rate and next to no conversions. Luckily there are multiple ways you can add fancy new custom fonts to your WordPress powered website.

Google fonts

Google fonts is a collection of 818 different fonts with multiple different styles. The styles are things like bold, italic and font weights. If you'd like to use the same font across your web site but with different styles for various elements look for a font that has multiple weights allowing you to use bolder weights for headings and lighter weights for the body text.

Once you've found the perfect fonts for your WordPress site on Google fonts you need to add them. Now if you're using a theme that has built-in Google font integration, it'll be as simple as heading to the customizer or your themes options panel to select the fancy new font for your site. What do you do though if your theme doesn't integrate with Google fonts?

The simplest way to add Google Fonts to your WordPress powered website is through the use of a plugin.

• Easy Google Fonts

Easy Google Fonts is a WordPress plugin for adding custom Google fonts to your WordPress site both quickly and easily. One of its standout features is its ability to create custom font specific controls based on specific CSS selectors of your theme that are then available for modification in the WordPress customizer. Allowing all the font options to be together in one easy to use control panel.

The plugin works with any WordPress theme right out the box with no custom coding required! With over 300,000 active installs you can't go far wrong by using the plugin to integrate Google Fonts on your WordPress site.

• WP Google Fonts

Another plugin for adding Google Fonts to your WordPress website. However, unlike Easy Google Fonts, WP Google Fonts isn't as straightforward while it allows you to assign Google Fonts to specific CSS selectors. It doesn't have built-in customizer integration and hasn't been updated in over a year meaning it doesn't have the latest list of fonts. While it still works perfectly fine. You'd most likely be better off using Easy Google Fonts.

Adobe TypeKit

Adobe Typekit is a wide range of fonts offered by partners. Typekit fonts are available on every difference and integrate seamlessly with Adobe apps such as Photoshop and InDesign. You can get a free plan of Typekit or go for the paid offering at just $50 for the year. Which considering the array of quality fonts offered in the full library, it's an absolute bargain!

Typekit has built-in integration with WordPress.com. There are multiple plugins that offer Typekit integration for the self-hosted WordPress.org versions as well. These will be the plugins you'll need to use most likely if you are reading this. Unless you have a blog at WordPress.com to use Typekit, you can use one of the many plugins available for integrating Typekit.

• Typekit Fonts for WordPress

This plugin saves you from needing to modifying your child theme to add the integration code by Adobe. Upload and active the plugin, then copy the code snippet provided by Adobe Typekit, enter in the custom CSS rules to target the font you want to change and your shiny new font is now on your website. Looking sharper than ever.

Misc

There are of course other ways of adding custom fonts to your site and finding them. Many "Deal sites" offer premium fonts on sale and there are multiple websites that specialize in selling fonts for use in print and on the web. If you buy one of these fonts, you'll need to integrate into your website manually. Lucky for you, that's simpler than it sounds.

Adding a purchased premium font to your website

Usually when you purchase a premium font from any site you'll be provided a zip file with the fonts often included in multiple formats including:

• TTF
• OTF
• WOFF
• WOFF2
• EOT

These different font versions all relate directly to compatibility with various browsers and version of said browsers. If you unzip the font file, you downloaded, upload all versions that are in that folder. This will ensure you have maximum compatibility between your font and your visitor's browsers.

You'll need to upload your font files to somewhere publicly accessible on your server. It could be a path like public_html/example.com/font/fontname-regular.otf

Once you've uploaded your font to the required destination the next step is to add some custom CSS to target the font as required including the import. To do this, you'll either need to add some custom CSS rules in your child theme or add custom CSS in the Customizer. For example, if the path matched the above, you'd use a CSS rule like this:

@font-face { font-family: fontname; src: url(public_html/example.cpm/fonts/fontname-regular.otf); font-weight: normal; }

Now you've imported the font into your website with the above, you'll then need to target the element you want to change the font off. For example, if you wanted to target all h1's on your page you may use a new style rule that looks something like this:

h1 { font-family: fontname; }

The exact classes and names you need to use will depend on your themes classes and the name of the font you are using.

Conclusion

Adding a custom font can have an enormous impact on the styling of your website and make an impact to any visitors. Have you ever added a custom font to your site? Perhaps you know of an awesome font resource? Let us know in the comments below.