Content is said to be the king and thus, typography is, of course, the king’s palace. They are closely related to each other and compliment side by side. Well, today’s web fonts mainly revolve around boring Arial and the excessively used Times New Roman. Whenever one thinks of a web page, these two fonts come as the most popular choice. The excessive use of these two fonts (including the other ones too) cannot guarantee the success in such a time when web users are after creative innovations and adore the same if compared with other traditional ways.
In today’s very-much-technical web world, users wish to encounter original state-of-the-art stuff. This makes the website owners job even more promising to design, development, and jot down the text in such a manner that it could easily engage the users upon the website. All thanks to the availability of custom fonts that could help in enhancing the visibility of the websites among users. It’s been quite long since custom fonts made their mark on the web. They are innovative typographic and thus, seem to rule the web for a longer time.
In this write-up, we are going to discuss the ways that could help developers as well as website owners to enhance the visibility of the WordPress websites. The good news about including custom fonts over the website is that they do not come on any additional charge as they are available free of cost. Thus, a great number of resources are provided by the companies like CSSChopper and thus, have been launched for developers as well as website owners to take benefit from. Prior we discuss the ways to add custom fonts into WordPress website, here is an explanation on why they are important?
Why Use Custom Fonts?
If done correctly, custom fonts have the potential to greatly enhance the look (typography) of a web page. Thus, choosing the right font is more of an art as it requires the developers to pay attention not only to the use of the fonts but also the thickness, slant, and the size selected. Web fonts also play a role in helping the clients decide whether they are going to take the service. A pleasing visit may convert a potential customer into a future business client.
I’ve been using Cloudways since January 2016 for this blog. I happily recommend Cloudways to my readers because I am a proud customer.
Let us make this statement more clear with an example, you must have visited a number of restaurants and must have checked their menu just after choosing your favorite corner seat. The next moment, you checked the menu and the engaging fonts appealed you to try some new offering this time. This is the magic of nicely structured fonts. Moreover, a badly structured piece of paper is never going to appeal you in such a way that we just discussed. Hence, never compromise your business services just because the fonts over your web page are not structured properly.
Different Type of Web Fonts
The web is flooded with a lot of options when it comes to choosing custom web fonts. However, prior you use any one of them, ensure that they are legal and licensed to use. Here is a short description of different custom fonts available on the web.
Google Web Fonts
Google Fonts presents an amplified list of fonts, which are really great to use. However, first ensure that these fonts are SEO-friendly and will look great on the browser. It is also suggested to sort the fonts depending upon the thickness, slant, based on the script, and other such features.
AdobeEdge Fonts
AdobeEdge Fonts are just exceptional to use for rich typography. A vast web font gallery is all there with AdobeEdge fonts that have been contributed by designers across the globe. More to this, AdobeEdge fonts is powered by Typekit.
Typekit
Being a subscription font service, Typekit brings an expandable list of fonts. It stores the free and premium lists of fonts that users can choose from. It has some of the best typographic inspiration fonts that enhance the font look over apps and website as well.
Now much discussion has been done on “why custom fonts should be used?” and “what are the font types available for the users?” Now it’s time to go beyond and find out the ways to add custom fonts. Here is the detailed discussion.
How to Add Custom Fonts?
There are a number of ways available to add custom fonts to the websites. Among the list of some of the most popular ones, we have picked some of the most used ways to accomplish the task. Thus, custom fonts can be added:
-
By Manual Editing
It is probably the best way to add custom fonts by adding them manually. This mitigates the need to rely on plugins. It is good actually as you are doing all the stuff yourself and this lessens the chances for the mistake. Here is a complete guide to doing the task successfully.
Step 01. Obtain Google Web Font Link
The very first task is to obtain Google web font link by visiting Google fonts to get the embedded link depending upon the choice of your font. For the same, you need to click on the “Quick Use” button near the “add to collection”.
You can choose what weights and font styles of the selected font you would like to make use of on your WordPress site. The more variations you use and the number of fonts you include will weigh in on your site’s speed, so definitely keep this in mind. Google does a good job documenting the page load time with their Impact on page load time graphic seen in the image below.
After choosing font styles, You will see that there are three different tabs for adding the font to your WordPress site. The first one is the standard and recommended method to add Google fonts to your site. The second tab uses the @import CSS method, and the last tab utilizes the JavaScript method.
Step 02. Editing The functions.PHP
Next step is to edit the functions.PHP file. This needs the access to the theme editor that is done by browsing through “Appearance” tab and a click on the editor. From here, select the functions.PHP file. You will need to add a bit of coding at the end. After this, you need to replace the font URL with the selected font.
[php]add_action( ‘wp_enqueue_scripts’, ‘custom_google_fonts’ );
function custom_google_fonts() {
wp_enqueue_style( ‘custom-font’, "//fonts.googleapis.com/css?family=Open+Sans");
}[/php]
Multiple fonts can also be added by selecting the | separator, like this.
[php]wp_enqueue_style( ‘custom-font’, "//fonts.googleapis.com/css?family=Open+Sans|Lato");[/php]
Step 03. Editing to style.CSS
Now that your theme has got the appropriate font-face in the header, it is time to edit stylesheet to help theme use the new font. With the use of child theme, the work gets easy. Now to bring change in the body font, you need to go to appearance > editor. Choose the style.css and search the required element with CTRL+F. This way, you can bring change either to parent theme or add in the child theme.
[css]body {
font-family: ‘Open Sans’, sans-serif;[/css]
It is important to keep in mind that you need to use the apostrophes with the fonts that have include 2 or more words in their names. Single word fonts do not need any such specification. This approach is also applicable to other elements on the page. All that is required is to right click the mouse, select the “inspect element” and get your class name from browsing through inspector window.
Now all that is required is to edit or add the class name on theme’s stylesheet.
-
By Plugin Support
For a number of people, the idea of adding or editing the custom font manually does not seem a worthy option. And for those, a number of plugins are there to get benefited from. We have already discussed the type of choices available within this under “different type of fonts web fonts” earlier in this write-up. Besides that, here are some more plugins that could also be used.
This an exceptional plugin that could be integrated with Google’s web font. Moreover, for using the same with the Typekit, the users need to create a separate account for the same to get benefited.
The plugin can be utilized when there is a need to upload custom fonts that include *.woff, *.ttf, extension. There is an option that converts non-web fonts into the web ones. It means that fonts that are not online can also be used with the use of this plugin. However, it is important to check the license though.
The Ideal Custom Font Count On The Website
There is a doubt about the fact that custom fonts do make a web page look very much engaging, but excessive use of such plugins may slow down the speed of the website. Thus, it is advised not to use more than 2-3 custom fonts over the website at one time.
With every new web font addition, users’ browsers need to ping external server to get them. This increases the load time and offers a sluggish browsing experience to the users. One more thing to keep in the mind is that you need to load only the style of the fonts and not to upload the entire font.
Besides uploading the fonts, it is also important to disable the fonts that are no more in the use. You can customize or modify the plugins manually but never try to remain them idle.
Conclusion
This is all about the need, use and importance of custom fonts with WordPress. Thus, choosing your option carefully can make your site more appealing with the same. While using the custom fonts, keep in mind all the suggestions that have been prescribed here.
