16 Best WordPress Typography Plugins to Improve Your Design

Are you looking for a WordPress typography plugin to improve your design? Typography plays an important role in web design. It improves readability and the time users spend on your website. In this article, we will show you some of the best WordPress typography plugins… Read More »

The post 16 Best WordPress Typography Plugins to Improve Your Design appeared first on WPBeginner.

Are you looking for a WordPress typography plugin to improve your design? Typography plays an important role in web design. It improves readability and the time users spend on your website. In this article, we will show you some of the best WordPress typography plugins to improve your design.

Typography for WordPress

Why Typography is Important for Your WordPress Site?

Typography plays an important role in design. Beautiful fonts create a better user experience, increase engagement, and boost time users spend on your site.

Many premium WordPress themes already come with access to Google fonts and allow you to tweak typography to suit your needs.

Advanced users can learn how to add external fonts in WordPress. They can use Google Fonts in their WordPress themes.

However, most users are beginners and don’t know how to edit theme files. Luckily, there are plenty of WordPress plugins that help you improve typography on your site without writing any code.

Having said that, let’s take a look at some of the best WordPress typography plugins that you can try on your website.

1. Easy Google Fonts

easygooglefonts

Easy Google Fonts allow you to easily use Google Fonts on your WordPress site. It also allows you to control the typography on your WordPress site by adding a Typography tab in theme customizer.

Using the typography tab, you can change fonts while viewing a live preview of your changes. You can select font sizes, colors, padding, border, and much more.

For advanced typography you can use CSS selectors. Simply use the Inspect tool to find out the CSS classes you want to target.

2. Google Font Manager

Google Fonts Manager

Google Fonts Manager is another plugin that brings the power of Google’s fonts library to your WordPress site. You will need free Google Fonts API key, and you will find easy instructions to create one inside the plugin settings.

Google Fonts Manager allows you to select, browse, and preview fonts from Google fonts and then add the fonts you want to use to your library. You can then use these fonts in your post editor and themes.

3. Typekit Fonts for WordPress

TypeKit for WordPress

TypeKit is one of the largest font repositories on the web. It is a subscription based service with limited free usage. They have some of the most beautiful fonts that you can add to your site.

TypeKit for WordPress plugin helps you connect your website to TypeKit, add the code to load the fonts, and even allows you to add custom CSS.

For step by step instructions, see our guide on how to add awesome typography in WordPress with TypeKit.

4. Simple Drop Cap

Simple Drop Caps

This simple plugin transforms the first letter in a blog post into a drop cap. You can set it to do it automatically for all posts or use [dropcap]A[/dropcap] shortcode.

For more information, see our guide on how to add drop caps in WordPress posts.

5. wp-Typography

wp-Typography

By default, WordPress filters the text in your posts and pages for security and formatting. wp-Typography improves those filters for better typography.

It can automatically use hyphens when needed. It can also perform smart handling of quotes, eclipses, dashes, trademark and copyright symbols, and much more. All these enhancements improve the reading experience for users.

6. Simple Pull Quote

Simple pull quotes

Have you seen how popular news websites use blockquotes to highlight catchy lines from an article? These are called pull quotes, and they are very effective in improving how users read longer articles on your website.

Simple Pull Quotes plugin allows you to easily add beautiful pull quotes to your WordPress posts. You can use the button in the visual editor or use shortcodes to manually create pull quotes in your articles.

You can also create pull quotes that are easy to share. See our guide on how to add click to Tweet boxes in WordPress posts.

7. TinyMCE Advanced

TinyMCE Advanced

If you have been using WordPress visual editor, then you may have noticed that it lacks advanced editing features like changing font sizes, background colors, tables, etc.

This is where TinyMCE Advanced comes in.

It extends the default WordPress editor with more formatting buttons. You can choose which buttons you want to add or remove from the visual editor.

8. Zeno Font Resizer

Zeno Font Resizer

Users visiting your website can resize fonts using their browser. However, adding a font resizer to your website allows users to increase or decrease font size to their own liking.

Zeno Font Resizer makes it easy to add a font resizer widget to your sidebar. This widget uses jQuery, which means user can adjust font size without reloading the page.

9. Page Title Splitter

Title splitter marker

Page Title Splitter allows you to easily split longer post titles into new lines. This allows you to use longer post titles, while making sure they are still readable.

See our step by step guide on how to split post or page titles in WordPress.

10. Secondary Title

Adding sub-title to post title

Similar to Post Title Splitter, Secondary Title allows you to add a subtitle to your post, page, or custom post type titles.

11. Accessibility Widget

Accessibility widget

Accessibility widget adds a font resizer widget that is more accessible for users with visual impairments.

The widget allows up to four resize options. The default options are 90%, 100%, 110%, and 120%. You can increase or decrease the font sizes here.

12. Endnotes

Endnotes

Endnotes provides an easier way to add footnotes to your WordPress posts. You can make footnotes collapsed by default and expand when a user clicks on them.

13. Greg’s Threaded Comment Numbering

Comment numbers

Greg’s Threaded Comment Numbering plugin allows you to add numbers next to your WordPress comments. It is also able to handle threaded comments.

The plugin comes with its own stylesheet. You can also add your own custom styles to control how plugin displays numbers.

For detailed instructions, see our guide on how to add numbers to WordPress comments layout.

14. Colorful text widget

Colorful text widgets

Tired of the same old boring text widget? Color Text Widget allows you to add colorful text widgets. This allows you to make your text widget popout.

You can choose the background color, text, and title colors from the widget’s settings. For detailed instructions take a look at our guide on how to add colorful text widgets in WordPress.

15. Text Hover

Text Hover

Text Hover plugin allows you to easily add tool tips to any text you want. You can create your own list of phrases, acronyms, and titles in the plugin settings using a simple format.

You can also enable text hover for comments and even make them case sensitive.

16. Just Writing

WordPress comes with a distraction free writing mode which was introduced in WordPress 4.1. Before this version, WordPress had a real full screen distraction free writing mode called ‘Just Writing’.

This plugin simply replaces the current WordPress distraction free writing mode with the full screen editor that was used before WordPress 4.1. It also allows you to choose which buttons and options you want to keep in the full screen writing mode.

We hope this article helped you find the best WordPress typography plugins to improve your design. You may also want to see our list of 8 proven methods to promote old posts in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 16 Best WordPress Typography Plugins to Improve Your Design appeared first on WPBeginner.

How to Add Custom Fonts in WordPress

Do you want to add custom fonts in WordPress? Custom fonts can help you freshen up your theme and stand out. In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 @Font-Face method. Using custom… Read More »

To leave a comment please visit How to Add Custom Fonts in WordPress on WPBeginner.

Do you want to add custom fonts in WordPress? Custom fonts can help you freshen up your theme and stand out. In this article, we will show you how to add custom fonts in WordPress using Google Fonts, TypeKit, and CSS3 @Font-Face method.

Using custom fonts in WordPress themes has become a common trend. In fact, there are some themes that come fully loaded with hundreds of custom fonts. However loading too many fonts can slow down your website. That’s why we are going to show you how to properly load custom fonts, so it doesn’t slow down your site.

But before we look at how to add custom fonts in WordPress, let’s take a look at finding custom fonts.

How to Find Custom Fonts to Use in WordPress

Custom Fonts in WordPress

Fonts used to be expensive, but not any more. There are many places to find great free web fonts such as Google Fonts, Typekit, FontSquirrel, and fonts.com.

If you don’t know how to mix and match fonts, then try Font Pair. It helps designers pair beautiful Google fonts together.

As you are picking your fonts, remember that using too many custom fonts will slow down your website. This is why you should select two fonts and use them throughout your design. This will also bring consistency to your design.

Adding Custom Fonts in WordPress from Google Fonts

Google Fonts

Google fonts is an awesome free resource to add beautiful typography in your design projects. WordPress users can add custom Google fonts on their websites.

Simply visit the Google fonts library and select a font that you want to use. Next, click on the quick use button below the font.

Quick use custom fonts in WordPress from Google fonts

This will take you to another page where you will be asked to choose the styles you want to use. You should only select styles that you think you will actually use.

After that scroll down a little until you get to the embed code section. You need to copy the embed code under the standard tab and paste it in your theme or child theme’s header.php file right after <head> tag.

Google fonts embed code

That’s all you have successfully added a custom Google font in your WordPress site.

You can use this font in your theme’s stylesheet like this:

.h1 site-title { 
font-family: 'Open Sans', Arial, sans-serif; 
}

For more detailed instructions see our guide on how to add Google fonts in WordPress themes.

Adding Custom Fonts in WordPress Using Typekit

TypeKit Fonts

Typekit is another free and premium resource for awesome fonts that you can use in your design projects. They have a paid subscription as well as a limited free subscription plan that you can use.

Simply signup for a Typekit account and create a new kit.

Creating a new fonts kit in Typekit

Next, you need to select a font from Typekit library and add it to your kit. After that get the embed code for your kit and head over to your WordPress site’s admin area.

Now you need to install and activate the Typekit Fonts for WordPress plugin. Upon activation, simply visit Settings » Typekit Fonts and paste the embed code on plugin’s settings page.

Adding Typekit embed code in WordPress

That’s all, you can now use the Typekit font you selected in your WordPress theme’s stylesheet like this:

h1 .site-title { 
font-family: 'modesto-condensed', Arial, sans-serif; 
} 

For more detailed instructions check out our tutorial how to add awesome typography in WordPress using Typekit.

Adding Custom Fonts in WordPress Using CSS3 @font-face

The most direct way of adding custom fonts in WordPress is by adding the fonts using CSS3 @font-face method. This method allows you to use any font that you like on your website.

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 the FontSquirrel Webfont generator.

Once you have the webfont 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 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.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);  
	font-weight: normal;  
}

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 like this:

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

Loading fonts directly using CSS3 @font-face is not always the best solution. If you are using a font from Google Fonts or Typekit, then it is best to serve the font directly from their server for optimal performance.

That’s all, we hope this article helped you add custom fonts in WordPress. You may also want to checkout our guide on how to use icon fonts in WordPress and how to change the font size in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit How to Add Custom Fonts in WordPress on WPBeginner.