How to Add Custom Fonts to your WordPress Site:- Why use standard boring fonts and make your website ordinary? Let’s add a extra pinch of attractiveness by adding custom fonts that looks incredible with your design. Custom fonts are nice to have that enables your blog to look preferable.
We all love to have websites and blogs that use amazing fonts. Right fonts not only decorate the website but also increase customer engagements. However, choice of standard WordPress fonts are limited and depends on the theme used on website. Best thing of WordPress is that you can add custom fonts manually or using a plugin.
Now the two most important questions are:
- Where to get custom fonts
- How to install custom fonts on WordPress
Why Should I use Custom Fonts?
Those days are now gone when Georgia and Times New Roman were the most common used fonts for text on website. From the past few years, font space has completely changed with advent of fonts like Google fonts and others.
Today, hundreds of free fonts, resources designed for design, information & training aids, available on the internet. Similar to Adobe Photoshop, Illustrator, and other classic applications, By default WordPress doesn’t give full control over fonts. Here we talk about why you need custom fonts and how you can use them at bscriptsource.com.
Importance of using Custom fonts:-
Font family affects readers, even if they don’t want to pay attention to it. Relinquish font design means to abandon the website development. Mood of the visitor depends on it. Either the font is highly engaging or forces user to exit from the page.
A web browser includes a set of default fonts. That means if the font is not specified on in the CSS, then page will load standard version. You can always make use of default fonts but that makes work complicated for users. That’s why it is always recommend to use custom fonts. If your theme doesn’t allow you to change the font , many sites and tools can help you in the same.
How to Add Custom Fonts to WordPress?
Here are some ways to easily add custom fonts:
- Plugins
- Manually
How to Add Custom Fonts to your WordPress Site?
- Custom Fonts using Plugin:- If you don’t have issue with global changes, you can install WordPress plugins that will add custom fonts on your site.
For example– We use WP Google fonts. Just install & activate the plugin.
- Navigate to Google fonts section.
- Here you see Google font control panel.
- Select fonts and change settings as required like elements on which it applied, font style etc.
- Install Custom Fonts Manually:-
Through @font-face directive, you can connect both one or many fonts to your website. But this method has both advantage & disadvantage.
Pros:-
- Using CSS, you can connect any font format: ttf, otf, woff, svg.
- Font files will be on your server- so you don’t need to depend on third party services.
Cons:-
- For accurate font for each style, you require a separate code.
- Without CSS knowledge, you can easily get confused.
Step 1:- Create “fonts” folder.
Create a new “fonts” folder within child theme. Under: wp-content/themes/your-child-themes/fonts
Step 2:- Upload downloaded font files to your website.
This can be done through hosting cpanel or via ftp. Add font files to new fonts folder: wp-content/themes/your-child-theme/fonts
Step 3: Import fonts via Child theme stylesheet.
Open style.css file and add following code to beginning of CSS file:
@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;
}
Here MyWebFont is font name and value of src property is their location. Each style need to be specified. Since first we connect with normal style, we set font-weight and font-style properties to normal.
Step 4:- When adding Italic, write 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 all things are same, only we set font-style property to Italic.
Step 5:- Add the Bold Font, add 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;
}
Here we have set font-weight property to Bold.
Step 6:- To connect bold-Italics use the following code
@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;
}
That’s all, Now you have connected to four font styles.