Why does using standard fonts make your blog boring? Let your blog talk about your vibrant personality and the topics you cover with various custom fonts. Custom fonts are a nice feature that can make your blog look more desirable than others.
Let’s face it; we all like blogs and websites that use the right fonts. Not only do they decorate your website, they also help attract users to your content. However, the choice of standard WordPress fonts is limited and depends on the theme you use. The good news is that you can add them manually or using dedicated plugins.
Here, there are two problems- Where to get custom fonts For WordPress and How to install custom fonts On your WordPress site.
Let us find out.
Why use custom fonts?
Gone are the days when Times New Roman and Georgia were considered the only fonts for website text. In the past few years, with the advent of fonts such as Google Fonts, the font space has undergone tremendous changes.
Today, there are hundreds of free fonts, information and training aids on the Internet, as well as resources designed specifically for design. Unlike Adobe Illustrator, Photoshop, and other classic applications, WordPress does not allow you to fully control fonts by default. Only some themes choose to support and use custom fonts.
Therefore, in this article, you will learn how to find suitable custom fonts and how to use them in your WordPress website.
The importance of using custom fonts
You ask why you want to change the font, indentation between words, line spacing, letter spacing or font saturation?Nevertheless, some studies have proved Typography improves reading comprehension.
Much depends on the structure of the font. On a conscious and subconscious level-everyone evaluates the content of a webpage through design.
The font design affects readers even if they don’t pay attention to it. To abandon the font design is to abandon the development itself! The mood of the reader depends on it. The font either makes reading easier or forces the user to leave the page.
All web browsers include a set of default fonts. This means that if the font is not specified in the CSS of the page, the standard version will be used. You can always use the default fonts, but they will complicate the user’s work. This is why a custom font must be used. If your theme does not provide you with the option to change the font, many websites and tools can help.
Google font alternatives
Many people are aware of free Google fonts. There are many more websites where you can find beautiful fonts. Some of them are free for personal use. If you need it for commercial use, then you need a license. Google Fonts and Adobe Edge Fonts are free. This is why they are not so unique. And this is not for us.
Here are some Find other resources for fonts Free and commercial use:
- Template monster — On the TemplateMonster market website, you can find all the web designs you need. There are also many fonts and font packages for personal use at low prices.In addition, they are A web development kit. The series is huge and creative. To help you choose, all fonts appear on the brochure or frame. Each font also comes with a commercial license.
- My font — MyFonts currently offers the world’s largest selection of fonts. However, the prices here are also in the higher part. Therefore, if your budget is tight, it may not be suitable for you.
- Font spring — Fontspring sells exquisite fonts for commercial use. But in almost any family, there are 1-2 free fonts that can be used for personal purposes. In addition, there is a separate section that provides free fonts. The series is full of vitality. But before downloading, you must carefully study the license information of a particular font.
- Cufonfonts -It is also an extensive collection of different fonts. Choose any one and you will see a page with detailed information about it. There are many free fonts, and they are divided into separate parts. The sorting system on CufonFonts is very flexible and convenient. In addition, Webfont support is included.
- Dafeng — Another accessible collection of 3,500 free fonts. Most of them are for personal use only. A great feature of DaFont is the classification system. You can choose from comics, video games, retro style, or fonts stylized as Japanese characters.
The choice of fonts is very tempting because they are all beautiful. But you should not choose many.use There are no more than two fonts on the website. Then the appearance of your website will remain consistent. After selecting the font, make sure to download the file for each style you will use (normal, bold, italic, etc.).
Now that you have selected the appropriate font for your site, let’s see how to add it.
How to add custom fonts to WordPress
There are several ways to add fonts to a WordPress website:
- Plug-in: In this case, different WordPress plugins are used to simplify the process.
- Manual: To use this method, you need to upload the downloaded font to the site and edit the CSS file.
- theme: Many popular themes include built-in options for customizing fonts (please note that we won’t cover this option because the process will vary depending on the theme you use, but quality themes such as Total WordPress theme Online documentation will be provided that you can easily follow-just like this guide Add custom fonts to Total)
Option 1-Use a plugin to change the WordPress font
If we don’t care about global changes, we can install a WordPress plugin to change the font on your website.
Features of custom font plugins
Open source software has an advantage for the benefit of the community, and WordPress also has this advantage. Several WordPress plugins allow you to add custom fonts. With so many plug-ins, how to choose the right one? What are the characteristics of custom font plug-ins?
Here are a few things to consider:
- Ability to use custom fonts
- Ability to use more than one font
- Target headers and components
- Bonus: Ability to change font settings from the visual editor
that’s all. The first feature in the list is very important. You can download fonts from sites such as DaFont, Font Squirrel, etc. at any time, but you need to be able to upload them to WordPress.
Let’s take a look at some plugins for WordPress that allow you to upload custom fonts.
Custom font uploader
This plugin allows you to download Google fonts and apply them to various elements of your blog. For example, to the title or body of an article or page.
Use any font
This is a WordPress plugin that provides you with a convenient interface to download fonts and use them directly through a visual editor. The WordPress visual editor can automatically change the font of any text. The plug-in provides multiple functions to make the process of adding custom fonts easier to manage.
WP Google Font
WP Google Fonts allows you to use the Google font catalog. One of the amazing benefits of this plugin is the addition of nearly 1,000 Google fonts. Although you can manually queue Google fonts, it is much easier for most users to use plugins.
How to install fonts using plugins?
Let’s take WP Google Fonts as an example. Just install this plugin from the official WordPress repository and open the Google fonts section.
You will see the Google font control panel here. Choose a font and change various settings, such as font style, applied elements, etc.
Option 2-Manually install WordPress custom fonts
With the @font-face directive, you can connect one or more fonts to your site. But this method has advantages and disadvantages.
- Through CSS, fonts of any format can be connected: ttf, otf, woff, svg.
- The font files will be located on your server-you will not rely on third-party services.
- For the correct font connection for each style, you need to register a separate code.
- If you don’t understand CSS, you can easily get confused.
But if you can, this is not a real problem Just copy the completed code And where you need to specify the value.
notes: Before you start, be sure to create a subtopic for your website. In this way, you can make all edits to the sub-theme while keeping the core theme so that you can easily update it as needed in the future.
Step 1: Create a “fonts” folder
In your child theme, create a new “fonts” folder in the following location: wp-content/themes/your-child-theme/fonts
Step 2. Upload the downloaded font file to your website
This can be done through the host’s control panel or through FTP.
Add all font files to the newly added font folder: wp-content/themes/your-child-theme/fonts You created it.
Step 3. Import fonts through the sub-theme style sheet
Open the style.css file of your child theme and add the following code to the beginning of the CSS file (after the child theme comment):
@font-face font-family: 'MyWebFont'; src: url('fonts/WebFont.eot'); src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'), url('fonts/WebFont.woff') format('woff'), url('fonts/WebFont.ttf') format('truetype'), url('fonts/WebFont.svg#svgwebfont') format('svg'); font-weight: normal; font-style: normal;
Where My WebFont is the name of the font, and the value of the src attribute (data in brackets in quotation marks) is their position (relative link). We need to specify each style separately.
Since we are connecting the normal style first, we set the font-weight and font-style properties to normal.
Step 4. When adding Italic, Write the following:
@font-face font-family: 'MyWebFont'; src: url('fonts/WebFont-Italic.eot'); src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'), url('fonts/WebFont-Italic.woff') format('woff'), url('fonts/WebFont-Italic.ttf') format('truetype'), url('fonts/WebFont-Italic.svg#svgwebfont') format('svg'); font-weight: normal; font-style: italic;
Where everything is the same, only we append the font-style property to italics.
Step 5. To add bold, add the following code:
@font-face font-family: 'MyWebFont'; src: url('fonts/WebFont-Bold.eot'); src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/WebFont-Bold.woff') format('woff'), url('fonts/WebFont-Bold.ttf') format('truetype'), url('fonts/WebFont-Bold.svg#svgwebfont') format('svg'); font-weight: bold; font-style: normal;
We set the font-weight property to bold.
Remember to indicate the correct location of the font file for each style.
Step 6. To connect bold italics, type the following:
@font-face font-family: 'MyWebFont'; src: url('fonts/WebFont-Italic-Bold.eot'); src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/WebFont-Italic-Bold.woff') format('woff'), url('fonts/WebFont-Italic-Bold.ttf') format('truetype'), url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg'); font-weight: bold; font-style: italic;
Well, that’s it🙂 Now you have connected the four font styles to your website.
But there is one thing to note-this font connection will be displayed incorrectly in Internet Explorer 8. The good news is that very few people still use IE8.
Packaging custom fonts for WordPress
What do users first notice when they visit your website? That’s right, its design! Most designs rely on the correct use of beautiful fonts. Therefore, you must pay attention to the font design of the website. Add code or use one of the plugins mentioned above to embed the new font style. Which method you choose is up to you.
Make sure you use no more than two fonts on the same site. Since the more custom fonts you add to the site, the slower the site will be.
That’s all, comments are welcome.
We are also happy to hear that you choose the option to add custom fonts to your website and where you can find the fonts.