{"id":162730,"date":"2017-02-20T13:00:19","date_gmt":"2017-02-20T13:00:19","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=162730"},"modified":"2017-05-25T06:57:00","modified_gmt":"2017-05-25T06:57:00","slug":"wordpress-typography-plugins","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/wordpress-typography-plugins\/","title":{"rendered":"7 Typography WordPress Plugins for Beautiful Websites"},"content":{"rendered":"<p>James Felici literally\u00a0<a href=\"https:\/\/www.amazon.com\/Complete-Manual-Typography-Setting-Perfect\/dp\/0321127307\" target=\"_blank\">wrote the book on good typography<\/a>. And do you know what he said? &#8220;Typography is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art.&#8221;<\/p>\n<p>If there\u2019s anything standing between your visitors and the content on your site\u2014including typography\u2014you\u2019re going to have a problem. You can\u2019t afford to let a default theme font, outdated typography from five years ago, or even a just so-so font disrupt the user experience. That\u2019s why I recently advocated for a\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/wordpress-font-typography-facelift\/\" target=\"_blank\">review and revamp of your site\u2019s typography<\/a>.<\/p>\n<p>Now, once you\u2019ve found a killer eye-catching font that\u2019s going to knock your visitors\u2019 socks off, you need a way to get it on your site. You could try to find a theme that incorporates the font, but that\u2019s a time consuming option. You could add a font by editing your code, but that oftentimes requires advanced coding knowledge and isn\u2019t the right option for everyone. Or you could use a WordPress typography plugin.<\/p>\n<p>Let\u2019s face it. If you want to more easily manage the typography on your site, then a plugin is the best way to go. The following is a list of WordPress typography plugins that will allow you to locate, embed, resize, and optimize fonts for your website.<\/p>\n<ul class=\"dev-tutorial-list\"><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Use Any Font<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/Use-Any-Font-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Use Any Font image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>This well-reviewed and popular WordPress plugin is another great tool for getting new fonts onto your WordPress site. Use Any Font enables users to upload new fonts, keep them organized, and automatically assign them to elements. As a bonus, they\u2019ve provided enough documentation as well as a support forum to ensure that usage of this plugin is hassle-free.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Use Any Font?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/use-any-font\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Typekit Fonts for WordPress<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/Typekit-Fonts-for-WP-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Typekit Fonts for WordPress image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>I think it\u2019s safe to say that this plugin is strictly for developers. Although Typekit fonts can be used by anyone (so long as you\u2019ve signed up with\u00a0<a href=\"https:\/\/typekit.com\/\" rel=\"noopener\" target=\"_blank\">Adobe Typekit<\/a>), it\u2019s the implementation piece of this that may be difficult for non-developers to figure out. That being said, this typography plugin still deserves a spot on this list as it streamlines the process of adding Typekit fonts to WordPress sites.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Typekit Fonts for WordPress?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/typekit-fonts-for-wordpress\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">FontPress \u2013 WordPress Font Manager<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/FontPress-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"FontPress \u2013 WordPress Font Manager image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>This is the only premium typography plugin to appear on this list, but it\u2019s definitely earned its spot. FontPress aims to help WordPress users add and mix fonts from a variety of sources (including Google, Adobe Edge, @font-face, Cufons, Adobe Typekit, CSS, and non-Latin Early Access). Additionally, this plugin gives better control over typography rules, responsive content displays, and previews of all fonts in one place.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in FontPress \u2013 WordPress Font Manager?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/codecanyon.net\/item\/fontpress-wordpress-font-manager\/1746759\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Easy Google Fonts<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/Easy-Google-Fonts-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Easy Google Fonts image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>While the Easy Google Fonts plugin won\u2019t be of use to anyone wanting to add non-Google fonts to their site, it will definitely help everyone else accomplish a lot\u00a0<em>with<\/em>\u00a0Google fonts. Perhaps the best feature of this plugin is its integration with the theme customizer tool, so users can test new fonts in real time on the site, assign a variety of settings (like size, color, and element allocation), and do it all before publishing. You can create your own font controls with this tool, too.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Easy Google Fonts?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/easy-google-fonts\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Tiny MCE Advanced<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/TinyMCE-Advanced-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Tiny MCE Advanced image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>What this plugin does, essentially, is give you more control over your visual editor toolbar. Although this isn\u2019t technically a typography plugin, it\u2019s a necessary one to have if you plan to update fonts within the visual editor. Realistically, this plugin will be more helpful if your clients aren\u2019t comfortable with coding or with the WordPress interface in general, but still want to change fonts while creating content for their site.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Tiny MCE Advanced?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">wp-Typography<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/wp-typography-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"wp-Typography image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p>The wp-Typography plugin brings smart stylization to the characters within your site\u2019s content. For instance, let\u2019s say you copy text from a Word document and paste it into the editor. Even if the correct punctuation style wasn&#8217;t used (e.g. curly quotes instead of straight quotes), the settings you establish within the plugin will automatically override them, ensuring your typography is always presented professionally and consistently, site-wide.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in wp-Typography?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wp-typography\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><li class=\"dev-tutorial-list__item\"><header class=\"dev-tutorial-list__item__header\"><h3 class=\"dev-tutorial-list__item__title\">Typing Effect<\/h3><\/header><section class=\"dev-tutorial-list__item__image\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"171\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/02\/Typing-Effect-600x171.png\" class=\"attachment-ratio-large size-ratio-large\" alt=\"Typing Effect image\" aria-hidden=\"true\" \/><\/section><!-- end dev-tutorial-list__item__image --><section class=\"dev-tutorial-list__item__content\"><p><a href=\"https:\/\/wpmudev.com\/blog\/javascript-libraries-resources\/\" target=\"_blank\" rel=\"noopener\">JavaScript libraries<\/a>\u00a0are powerful tools for developers who want to add dynamic content to a website. For WordPress users not familiar with JavaScript, however, it\u2019s always nice to have a plugin alternative to help them achieve the same effects. The Typing Effect plugin works just like the Typed.js script does, enabling users to create a typing effect for chosen bits of text on their site.<\/p>\n<\/section><!-- end dev-tutorial-list__item__content --><footer class=\"dev-tutorial-list__item__footer\"><p>Interested in Typing Effect?<\/p><div class=\"dev-tutorial-list__item__cta\"><a target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/animated-typing-effect\/\" class=\"dui-btn dui-btn--sm dui-btn--brand dev-btn--Details\">Details<\/a><\/div><!-- end dev-tutorial-list__item__cta --><\/footer><!-- end dev-tutorial-list__item__footer --><\/li><!-- end dev-tutorial-list__item --><\/ul><!-- end dev-tutorial-list -->\n<h3>Wrapping Up<\/h3>\n<p>Typography is a funny thing. It\u2019s so minuscule in stature when compared with the rest of the elements on a website, but it plays an immensely important role in the visitor experience. Once you\u2019ve located a few new fonts to use, be sure to have your WordPress typography plugins set up and ready to go. They\u2019re guaranteed to save you time in pushing those new fonts live while also giving you better control over how they\u2019re presented.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>James Felici literally\u00a0wrote the book on good typography. And do you know what he said? &#8220;Typography is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art.&#8221; If there\u2019s anything standing between your visitors and the content on your site\u2014including typography\u2014you\u2019re going to [&hellip;]<\/p>\n","protected":false},"author":344989,"featured_media":162756,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[4],"tags":[973],"tutorials_categories":[],"class_list":["post-162730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugins","tag-fonts"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344989"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=162730"}],"version-history":[{"count":9,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162730\/revisions"}],"predecessor-version":[{"id":165322,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/162730\/revisions\/165322"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/162756"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=162730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=162730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=162730"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=162730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}