Web fonts are one of the fundamental principles of modern web design. They are connected to the vast majority of WordPress-sites. Optimizing the use and connection of web fonts is critical as poorly optimized web fonts can degrade the performance of your site. Despite this risk, refuse to web fonts are not completely necessary. These fonts are popular for many reasons.
Designers like web fonts for licenses under which they are provided, as well as improved interaction experience.
Web fonts are often processed much faster than web safe fonts (fonts which are often used for documents on the network) on a wide range of devices of different sizes and resolutions.
In this article we will look at Web fonts, as well as examine the methods and tools that you can use to add optimized web fonts to your site, the WordPress.
What are Web Fonts?
Before we talk about optimizing the connection web fonts, I want to make sure that we understand the terminology. If you touch the web site, there are two basic types of fonts for them:
- The Web the Safe fonts (web-safe fonts). These are fonts that are already pre-installed on the devices. This includes basic fonts such as Arial, Times New Roman, Courier New , as well as some generic font families like serif, sans-serif, and monospace.
- Web Fonts – these are fonts that are not pre-installed on the devices and must first be downloaded by the browser user, and only then they can be displayed.
In general, web fonts must be downloaded to the site visitor’s browser, while web-safe fonts do not require additional loading. As a result, the owners of sites that use web fonts, you need to think about the impact of download fonts to the site performance.
Accommodation and delivery of web fonts
If you choose to use web fonts, you should decide on how you will keep the font resources. There are two variants of placing web fonts:
- Placement on the site. font resource located on your own server along with the rest of the files of the site.
- on third-party servers placement. Fonts are hosted on third-party services such as Google Fonts and Typekit.
Using a third-party service, such as Google Fonts, is the most popular and simple method of working with web fonts. However, some developers do not like to rely on third-party services for performance and security reasons, and in this case the font resource hosting the server is the best option. If you do not have the technical skills or sufficient server capacity to transmit font resources faster than do the Adobe or Google, it is best to use existing services to accommodate and deliver web fonts.
Optimization of web fonts – it is quite a difficult task, and there are many different ways to optimize the delivery of web fonts. One option that will perfectly match your site depends on the mass of various factors, including the speed of your server and network, the size of the CSS-style of your site as well as your technical skills.
Optimization of web fonts that are added through the services
We’ll start with this option, because it is the simplest and most popular. While Typekit popular with professional developers, Google Fonts is the most common source of third-party fonts. The service is free, free to use; users do not need to download multiple fonts, Google Fonts resources because the fonts are already stored in the browser cache.
Adding Google Fonts for WordPress-site is a simple action. Fastest implementation – is to add fonts directly to the file header.php theme using HTML-link element or the file functions.php using wp_enqueue_script ().
Once the fonts will be added to header.php or functions.php, you can apply them to the site through CSS-arbitrary rules.
Remember that you will need to use a subsidiary subject, if you want to make any changes to the files are the main theme. Otherwise, you will lose all your changes with the next update theme.
If you do not want to touch the theme files, you can use WordPress-plugin that will add Google Fonts to your site.
My favorite plugin for adding Google Fonts to WordPress-site – it is the Easy Google Fonts . It allows you to easily customize the font styles for each text element and create arbitrary selections for special items. Font styles are assigned to each element and an arbitrary selector through the customizer. As a result, you get a live preview of all changes.
Another popular option for adding Google Fonts for WordPress – This plugin is the WP Google Fonts .This plugin, unfortunately, does not offer a live preview of the changes, but it provides much more flexibility for configuring font styles and character sets. For this reason, if you are not satisfied with the load which has Easy Google Fonts to your site, you can go to WP Google Fonts and select a narrower subset of font styles and character sets.
Optimization Google Fonts
All fonts Google Fonts are compressed and delivered via CDN network from Google, which will ensure the fastest possible delivery. Even given the fact that Google Fonts already includes a built-in optimization, there is still a possibility to accelerate the delivery of fonts.
If you choose Google Fonts do not include all the available styles and character sets. Carefully consider the styles and character sets that you really need, and add only these styles and subsets. Note that you need not necessarily include all the variations in italics or boldface. Browsers will adjust themselves these styles, if an appropriate font is not available.
Many sites use a unique font for styling the website header. However, realization of this means that you will need to add additional font file to be downloaded. Minimize the impact of the additional font style by loading only certain characters used in your title. You can do this by adding & text = with the necessary letters to the end of Google Fonts URL.
For example, if you want to get the word out Kinsta, using Bungee Shade, you can do it using the following links:
Please note that here we have added & text = Kinsta to the link element. As a result, Google Fonts CDN will deliver only capital letter K, as well as lowercase letters i, n, s, t and a.
Using Fonts hosted on your own server
Fonts hosted on your server – this is the best option if you are using fonts that are available in the Service; If you can deliver fonts faster than services; or if you want to avoid dependence on foreign resources.
Add font manually to WordPress is not so difficult:
- Load the font files on your site
- Adding a rule @ font-face to the style.css of your themes for each of the loaded font
- Apply fonts using arbitrary CSS-styles
However, if you want to simplify the process, you can use the plug-in the Use Any For the Font , which enables you to download fonts and bind them to HTML-elements directly from the WordPress console. You can use a free version of the plugin to load a font file. For $ 10 or more you can unlock the ability to upload an unlimited number of fonts.
Optimizing your own downloaded fonts
When used alone downloaded fonts can be very easy to make mistakes that can lead to a significant reduction in the speed of the site. To avoid such errors, follow these guidelines.
First, try to keep the font resources as concise as possible. When generating a font resource or add fonts to your site include only the styles and character sets that you really intend to use.
Second, supply fonts in four formats: woff2, woff, ttf and eot. When you add these fonts to your CSS-file using the rules @ font-face necessarily follow this order. This will ensure that the browser will choose the fastest format that they can handle.
Third, consider using a subset of the unicode-range to be limited only by the character sets that you want to use.
Optimize web fonts using the CSS-inlining (embedding)
If you are technically savvy and are ready to fight for every millisecond, you can speed up the download site, using inlining.
The basic idea of this approach is to use base64 encoding for embedding fonts in CSS stylistic table.Accordingly, the user’s browser will be able to avoid loading and processing of font resources.
Can the inlining fonts to speed up loading of your site? On this issue, opinions are divided. The reason that many people choose this path – the advantages of browser caching. Once the font resource is loaded, all subsequent views based on the same resource will be processed much faster. As a result, such a strategy worth considering if your site has a lot of returning visitors and multiple page views within a single session.
Encode your files to the CSS font-table -. A fairly simple task localfont – an easy to use web interface that you can use to convert files woff, woff2 and ttf in inline CSS. The tool even offers a JS-script that will check your browser’s cache for each user to the presence of the desired font before downloading the font again.
Another additional optimization technique for pulmonary sites
If you went with a separate placement to embed fonts in the CSS font files, the next logical step would be to consider the possibility of CSS embedded directly into the HTML-code of your site. In the case of this strategy, the font resources are included in the HTML-document site, eliminating the need for trips to the server for the font resource. However, this strategy also eliminates the advantages of storage and font resources in the user’s browser cache, because fonts are written directly into the HTML-code of the site and connect with each page load.
If you embed the font in the CSS directly in HTML, use only one family, one style and one set of characters. If you need additional font family, style or character sets, download them separately. In general, if your theme is not minimalist, including fonts using CSS in HTML-code does not allow to improve the overall performance of the site and will only lead to unnecessary problems.