Tag: google fonts

16 Best WordPress Typography Plugins to Improve Your Design

Are you looking for WordPress typography plugins to improve your website design?

Your font choice plays an essential role in your web design. Improving your website typography makes your site easier to read and offers visitors a better experience.

In this article, we’ll show you some of the best WordPress typography plugins you can use with your WordPress site.

Why is Typography Important for Your WordPress Site?

Your website typography is a very important part of your overall design. Choosing beautiful and easy to read fonts will increase your website engagement and boost the time your users spend on your site.

Many of the best WordPress themes come with access to Google Fonts and allow you to tweak the typography to suit your needs.

There are built-in settings within the post and page editor that give you more control over your fonts and layouts.

However, there’s a lot more you can do with your typography, like add subtitles, use drop caps, include footnotes, let users resize fonts, and much more.

By choosing the right WordPress plugins, you can improve the typography on your WordPress website 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. Google Fonts for WordPress

Google Fonts for WordPress has a library of over 1,455 stylish fonts that you can use on your WordPress site. It comes with a live preview for each font to help you select the font for your headings and content.

The plugin has Adobe Fonts integration and also supports thousands of Google Fonts. You can also upload custom fonts and change font size, color, weight, and line height in the plugin settings.

For more details, see our guide on how to add custom fonts in WordPress.

Deal: If you want to get the premium version of the plugin, then make sure to use our Google Fonts for WordPress coupon for a 20% discount.

2. wp-Typography

wp-Typography is a free WordPress typography plugin. It gives you more control over special characters like hyphens, ellipses, trademark symbols, fractions, and more.

The plugin supports over 70 different languages and can help to provide an improved reading experience for your visitors.

3. Zeno Font Resizer

Zeno Font Resizer gives your visitors the option to change the font size on your website with a couple of clicks. This can improve your user experience for those who prefer larger text.

The plugin makes it easy to add a font resize option to your WordPress sidebar. It also uses jQuery, so your visitors can adjust the font without the page reloading.

4. Page Title Splitter

Page Title Splitter is a unique plugin that lets you split longer post titles into two lines. This lets you use longer and more descriptive post titles while making sure they’re still readable.

This works for all posts, pages, and custom post type titles. It gives you complete control over the layout of your title on desktop and mobile devices.

5. Secondary Title

Secondary Title is a simple plugin that lets you add subtitles to your posts and pages. This is common with popular websites like Buzzfeed, Medium, Mashable, and more.

Adding secondary titles, or subtitles, lets you explain your title and gives you a better chance to hook your readers and encourage them to read your content.

For more details, see our guide on how to add subtitles for posts and pages in WordPress.

6. Toolkit for Block Theme

Toolkit for Block Theme is a WordPress block editor plugin to customize your theme design and styles. It lets you change fonts, integrate Google Fonts, and use additional global styles to make a perfect website for your business.

It gives you the option to host Google Fonts locally, so you can import any font family and use it on your website. The plugin has several other options for WordPress block themes.

7. Editor Plus

Editor Plus is an advanced WordPress customization plugin. It comes with typography controls and a panel to manage your font properties.

The plugin lets you change the font weight, font style, font size, letter spacing, line height, and color. You can also control the font display on different screen sizes and devices easily.

8. Text Hover

Text Hover is a plugin that lets you add a text hover box to your content and make your site more interactive.

This can be helpful when displaying phrases, definitions, explanations, acronyms, and more. It helps to give your readers more context when reading your articles.

9. Custom Adobe Fonts

Custom Adobe Fonts lets you add popular Adobe (formerly Typekit) fonts to your website.

The plugin works with the most popular page builders, so you have a larger font library to choose from when customizing your site.

10. Font Awesome

Font Awesome lets you add icon fonts to your website. Icon fonts are simple pictograms you can use to improve your buttons, feature boxes, navigation menus, and more.

For more details, see our guide on how to easily add icon fonts to your WordPress theme.

11. Use Any Font

Use Any Font lets you upload custom fonts to WordPress. This is great if you have custom fonts downloaded to your computer that you want to use.

You can also use fonts from the font library, which has over 23,000 different fonts to choose from.

12. Styleguide

Styleguide lets you customize your theme’s fonts and colors in your WordPress theme customizer.

This lets you change the appearance of your fonts without having to add custom CSS to your website. It’s compatible with most WordPress themes.

13. OMGF

OMGF is a plugin that will optimize your Google Fonts. It lets you host your fonts locally to speed up loading times.

The plugin helps to minimize DNS requests, reduces layout shifts, and leverages browser caching to improve performance. Itâ€™s very beginner friendly and runs quietly in the background.

14. SeedProd

SeedProd is the best WordPress theme and website builder on the market. It comes with ready-made template kits that you can use to launch your website in just a few clicks.

SeedProd is also the best WordPress page builder. With this plugin, you can create custom pages and have complete control over the appearance of your fonts.

You can even use the dynamic text feature to create animated headlines to attract your visitors. Plus, you get access to the entire Google Fonts library to use on your website.

15. Thrive Themes

Thrive Themes has a popular WordPress website builder and offers a powerful suite of tools to grow your online business. Itâ€™s a 1-stop solution for beginners to set up a business website and add growth tools all at once.

Moreover, it comes with a quiz builder, an A/B testing tool, a testimonial plugin, and more. All their tools work with your WordPress theme seamlessly.

Thrive Builder lets you customize font styling, font size, and font color within the website builder settings. You can also integrate any custom font plugin with Thrive Themes to add more fonts to your WordPress site.

Thrive Builder lets you change the default source to import fonts, and you can add new fonts of your choice easily.

16. WP Rocket

WP Rocket is the best WordPress caching plugin in the market. It’s very beginner friendly and helps you speed up WordPress.

There’s a unique caching option that will optimize your Google Fonts with a single click. If you run a website speed test, this is one of the most common speed issues users report.

For more details, see our guide on how to install and set up WP Rocket in WordPress.

We hope this article helped you find the best WordPress typography plugins for your website. You may also want to see our expert picks of the best virtual business phone number apps and our guide on how to get a free email domain.

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 first appeared on WPBeginner.

25.04.2023
WordPressâ€™ Legacy Default Themes Updated to Bundle Google Fonts Locally

WordPress contributors have updated the legacy default themes to bundle Google Fonts locally in the theme folder, instead of loading them from Google’s servers. In years past, loading fonts from the the Google CDN was the recommended practice for performance reasons, but new privacy concerns have emerged following a German court case, whichÂ fined a website owner for violating the GDPR by using Google-hosted webfonts,Â

All of the default themes from Twenty Twelve to Twenty Seventeen have been updated. The process began nine month ago but the approach took some time for contributors to refine. Updates to default themes are usually done in coordination with major and minor releases of WordPress, as core contributor Jonathan Desrosiers explained in the ticket.

“The reason the updates are usually coordinated is that the themes are usually updated to be compatible with new versions of WordPress, so releasing at the same time makes a lot of sense,” Desrosiers said. “Also, the number of contributors that focus on the tickets within the Bundled Themes component is usually very low unless these compatibility issues are being addressed.”

A dev note to accompany these updates to the legacy default themes was published to WordPress.org. It contains code examples for serving a new stylesheet from the theme directory, fixing the editor style within a custom theme-setup function, removing the font stylesheet, and including a custom set of fonts in a child theme. This change particularly impacts those who have edited or removed the font stylesheet in a child theme of these default themes or a plugin.

WordPress’ Themes Team has strongly urged theme authors to switch to locally hosted webfonts, and is expected to officially ban remotely hosted fonts following WordPress’ legacy default themes getting updated.

07.03.2023
How to Change Fonts in WordPress

To change fonts in WordPress, you can use a plugin such as “Easy Google Fonts” or “Custom Fonts”. Both of these plugins allow you to easily change the fonts used on your website.

1. Install and activate the plugin on your WordPress site.

2. Go to Appearance > Customize in the WordPress dashboard.

3. Locate the font options in the Customizer and select the desired font for your site.

4. Save your changes.

Alternatively, you can also change the font directly by editing the CSS of your theme.

1. Go to Appearance > Editor.

2. Locate the CSS file you want to edit.

3. Add the code to change the font.

4. Save your changes.

You can also use CSS class and id to change font for specific elements.

14.01.2023
12 Best Google Fonts for Websites (and Best Practices)
When creating a website, font choice is an important aspect of the overall look and feel of your site. Fonts need to be easy to read, but also aesthetically pleasing. If you choose the wrong font, it can disrupt the userâ€™s experience, and actually make your content hard to read. Thanks to Google, there are plenty of font choices available to you. Since its launch in 2010, Google fonts have come a long way from their 19 font offerings. There are now over 1450 choices currently available, so picking the right fonts can be daunting. In this post, weâ€™ll make your life a little easier by providing our list of the best Google fonts to use on your website.

What Are Google Fonts?

Google Fonts are a collection of high quality web fonts for use on web projects. Additionally, all fonts can be downloaded for installation on local systems. Fonts are pulled into your website through Google’s content delivery network (CDN), and will load automatically once installed.

Why Should You Use Google Fonts?

All of the fonts are free for commercial use, so they can be used in both web and print projects. Additionally, all of the fonts are updated automatically, so there’s no need to worry about keeping things updated manually. Once installed on your site, there’s nothing more to do. As previously mentioned, there are tons of options with over 1450 font families. Lastly, Google fonts offers multi-language support, so if your site has more than one language installed, you’re good to go.

12 Best Google Fonts Available (And They’re Free!)

With so many options available, it can be a bit overwhelming to know which fonts to choose for your website. Thankfully, we’re going to help you determine the most popular and trending font families for you to use on your website. Let’s get started.

1. Roboto

Roboto is considered a dual purpose font, and is the most popular Google font available. Geometric in shape, it also has nice curves and is generally considered very easy to read. It has actually been used as the typeface for Google’s Android operating system since 2014.

Get the Font

2. Open Sans

Open Sans boasts a user-friendly, ultra-readable appearance. It’s great for both headline and body texts. Because of its ease of readability, it is used as the default font in the Divi theme.

Get the Font

3. Montserrat

With over 30 styles, Monsterrat is quite versatile. It was inspired by artwork seen in the historic Montserrat neighborhood of Buenos Aires during the first half of the 20th century.

Get the Font

4. Lato

Google describes Lato as a “serious but friendly” font. Polish for summer, Lato is a multi-purpose font that is generally easy to read and invokes feelings of summertime playfulness.

Oh and by the way, we use it on our blog.

Get the Font

5. Poppins

Poppins is a rounded, widely popular font that is suitable for both heading and body text. Developed in 2014 as an open source font, Poppins is based on the Devanagari and Latin writing systems.

Get the Font

6. Source Sans Pro

Released as Adobe’s first open source font, Source Sans Pro is suitable for all user interface designs. It is quite versatile and pairs well with other fonts on our list such as Montserrat, Open Sans, and Work Sans.

Get the Font

7. Raleway

Thin and elegant, Raleway is a display font typeface well-suited for headings and subheadings. Initially developed in 2012 as a single thin font, it has expanded to include 9 variances.

Get the Font

8. Noto Sans

Noto Sans is quite robust with its 18 font variances. In addition, there are more than 3,700 glyphs available with this incredible typeface. With over 18 variances including multiple weights, widths, and italics, Noto Sans is suitable for just about any design.

Get the Font

9. Inter

Designed specifically for computer screens, Inter is the newest font on our list. Initially released under the name Interface, Inter hit the scene in 2017. It is frequently referred to as a cross between Helvetica and San Fransisco Pro.

Get the Font

10. Roboto Slab

Based on the widely popular Roboto, the Slab variation is available in four weights – thin, light, regular, and bold.

Get the Font

11. Merriweather

As one of the only serif typefaces on our list, Merriweather is playful, yet serious. It features talls letters that are condensed, yet easy to read on all size screens. There is also a Merriweather Sans font available that pairs well with its serif cousin.

Get the Font

12. Playfair Display

Playfair Display exudes old-world style, yet exhibits a modern flair. It’s best suited for headings due to its commanding appearance. When using Playfair Display, consider pairing it with an easily readable sans serif font such as Roboto, Open Sans, Work Sans, or Lato.

Get the Font

Best Practices For Using Google Fonts in WordPress

Using Google fonts is fast and easy, but there are some things that should be considered to keep your site running smooth and fast. In order to make the most of using these fonts, site optimization is key.

Only Use the Fonts You Need

When considering site speed, you should generally only use two or three font families on your site. Font families consist of all iterations of a font. For example, if you install the Montserrat family on your site, you’re actually installing 8 fonts. Font families contain all instances of a font type, which may include different weights (regular, medium, semi-bold, bold) and transformations including italics.

Use a Typography Plugin

It’s a good idea to use a typography plugin to manage the fonts installed on your website. Some themes such as Divi have typography management built into its framework. Typography plugins can help you manage not only your fonts, but typefaces, icons, drop caps, and more.

Choose Good Font Pairings

When choosing fonts, try to choose fonts that work well together. Additionally, you should pair serif headings with sans serif body text. This is because using two serif fonts together makes your text hard to read. Alternatively, it’s totally acceptable to use two san serif fonts together, or even different weights in the same family. If you’re not sure what font pairings to use, you can use a handy browser extension like Fontpair to make it easier to find what fonts a website is using.

Use Self-Hosted Google Fonts

If you choose not to use a typography plugin on your WordPress site, you can host the fonts on your own server. The process is fairly simple to achieve in a few steps.

The first step is to download the font. Choose the font you’d like to download, then click the Download Family button in the top right hand corner of your screen. Keep in mind that when you download the font from Google, you are automatically agreeing to their terms of service.

Once the fonts are downloaded, you’ll need to move them to your project. For this example, we’ll use Mamp to upload them to the Twenty Twenty theme.

When placing the font files into your project, be sure to take note of the file location. You’ll need to add it via CSS in the next few steps. To access the fonts for your theme, navigate to /wp-content/themes/twentytwenty/assets/fonts/. If you are using a different theme, replace twentytwenty with your theme’s name. Drag your downloaded font files (including the folder) into the fonts folder on your WordPress sites.

Next, located the downloaded font and drag it into the assets/font folder of your theme.

Adding the CSS

Next, we’ll need to add a bit of CSS to the theme’s customizer in order for our font to be recognized. Navigate to Appearance > Customize.

Click Additional CSS in the customizer to open the css input area.

Next, add the following code into the Additional CSS area:
```
@font-face {
    font-family: Roboto;
    src: url(/wp-content/themes/twentytwenty/assets/fonts/Roboto-Regular.ttf);
    font-weight: normal;
}
```
To use your new font, simply reference the font using CSS. You can use the browser inspector tool to apply the font to whichever css class you like. In this example, we want the site title, as well as the page content to use our new font. For this example, input the following CSS:
```
.entry-title a {
font-family: "Roboto", Arial, sans-serif;
}

.entry-content {
font-family: "Roboto", Arial, sans-serif;
}
```
Click Publish to save your changes.

Limit Font Weights

Similarly to keeping your font families down to a minimum, you should limit the number of font weights you use on your website. If you only plan on using regular, medium, and bold, there’s no good reason to include 18 variations of a font. Calling on Google to deliver extra font weights that aren’t being utilized will only increase the time it takes to load the fonts from Google’s servers.

Using Google Fonts in Divi

Divi makes Google fonts available by default. Fonts are available in any module that has text. You have the ability to choose from hundreds of web fonts from the Google font library.

In the Divi theme options, you can choose to enable Google Fonts, along with font subsets.

Thanks to Divi’s font search feature, it’s easy to search for and find any Google font that you wish. Another great feature of Divi is the ability to view recently used fonts at the top for easy access.

You can also enter the Google API key so that Divi stays up to date with the latest versions of fonts, as well as any new ones that are added in the Google font repository.

Final Thoughts

Picking the right font for your website can be an overwhelming process due to the many hundreds of options available to you. Just remember to pick a font that is easy to read, and looks good with the mood of your design. Pair fonts that compliment each other, and try not to use too many fonts.

What are some of your favorite Google fonts? Let us know in the comments section below.

The post 12 Best Google Fonts for Websites (and Best Practices) appeared first on Elegant Themes Blog.
24.12.2022
New Tool Checks If Google Fonts Are Hosted Locally

Earlier this year, WordPress’ Themes Team began urging theme authors to switch to locally hosted fonts after a German court case decision, whichÂ fined a website owner for violating the GDPR by using Google-hosted webfonts. Since that ruling, German website owners have continued to receive threats of fines for not having their fonts hosted locally.

The makers of the Fonts Plugin, a commercial product with a free version on WordPress.org, have created a tool called Google Fonts Checker that will help website owners discover where their fonts are hosted. The tool analyzes any URL entered and if the fonts are hosted by Google, it says “Google Fonts Connection Found” with a red ‘X.’ Sites that are in the clear will show a notice that a Google Fonts connection was not found:

Google Fonts Checker is useful for non-technical users who are not sure whether their theme or plugins are referencing fonts hosted on Google’s servers. Beyond delivering the simple connection message, the tool scans the website and returns a list of the font files used to render the page, which can be helpful in tracking down the specific extension loading these files.

More than 200,000 people are using the Fonts Plugin to load assets from the Google Fonts Library. Although the Google Fonts Checker tool is free to use and doesn’t require any personal information or login, the free version of the Fonts Plugin doesn’t support hosting fonts locally. Users will either need to upgrade to the commercial version or use a different plugin, like Local Google Fonts or theÂ OMGF | Host Google Fonts LocallyÂ plugin, both of which perform this for free.

Those who find a Google Fonts connection using the tool may also consider switching to Bunny Fonts, an open-source, privacy-first web font platform with no tracking or logging that is fully GDPR compliant. It can act as a drop-in replacement to Google Fonts. TheÂ Replace Google Fonts with Bunny FontsÂ plugin makes it easy to switch.

Some of WordPress’ older default themes are still loading fonts from Google. AÂ ticketÂ for bundling the fonts with the legacy default themes had patches and was on track to be included in WordPress 6.1, but ended up getting punted to a future release after it was determined the approach needed more work. In the meantime, those who are concerned about using Google Fonts in older default themes can use a plugin to host them locally.

22.11.2022