WordPress Website: How to Add a Custom WordPress Font

This article will be a lot of fun about adding or editing fonts on the wordpress web, what are the important fonts on the website? … very important with beautiful fonts the readers will be happy and enjoy it.

How to Add Fonts on the WordPress website

If possible, why should you use mediocre fonts for your website? Make your blog / website mirror the personality and niche of your website, using custom fonts. Custom fonts are a new trend and can help you make the theme more interesting.
Of course, we would be happy with a website that has a good font appearance. Not only will it make the overall appearance of the website attractive, it also makes your content comfortable to read. Only, the choice of fonts available in WordPress is usually limited and depends on the theme you are using. The good news, you can now add custom fonts to WordPress, either manually or with the help of several plugins.

The question arises – how do I change the custom font for WordPress? Here’s how.

Google search trends related or related to this article:

• ionicons cdn
• font awesome
• font awesome cdn
• font awesome cheatsheet
• font awesome icon
• font awesome npm
• font awesome 5 cdn
• animate css cdn
• font awesome npm
• font website
• adobe fonts
• web fonts generator
• web fonts css

Where to download fonts for WordPress

There are lots of free font websites that you can use as a source. Font Squirrel is one website where you can find many free fonts that have commercial licenses. Google Web Font Service also includes similar services, provided by Google and there are more than 135 types of fonts in it. Edge Web Fonts, a similar service provided by Adobe, also has a large collection of fonts. If you want, you can also try Typekit, which has a collection of thousands of website fonts, along with Fonts.com which also claims to have 150,000 fonts for websites and desktops. Other websites that you can also use are dafont and 1001freefonts.

READ  How To Optimize Website Speed

Or Just Free Download the Font here

Convert Fonts to Web-Friendly format

After you find the font you want to use on the website, it is time to check the font format. Please note that not all fonts can appear properly in a web browser. But you don’t need to worry because even though the font you choose is not supported by a web browser, you can still convert it to a format that can be used.
Before converting fonts from one format to another, let’s take a quick look at the different formats of fonts.

• Open Type Fonts

Often abbreviated as OTF format, this is the format most widely used as web fonts and is registered as a trademark of Microsoft. This type of font works well in almost all web browsers.

• True Type Fonts

Also called TTF, this type of font was made by Microsoft and Apple in 1980 and used by Microsoft and Apple operating systems. This font is supported by almost all web browsers, including Internet Explorer starting version 9.0, Google Chrome starting version 4.0, Safari starting version 3.1, Firefox starting version 3.5 and Opera starting version 10.0.

• Web Open Font Format

WOFF fonts are widely used on websites and recommended by W3C. This type of font is supported by almost all web browsers, including Internet Explorer starting version 9.0, Google Chrome starting version 4.0, Safari starting version 3.1, Firefox starting version 3.5 and Opera starting version 10.0.

• WOFF 2.0

This font is available after WOFF 1.0, because the compression capability is better. This font is not supported by Safari and Internet Explorer, but runs well on Google Chrome starting in version 36.0, Firefox starting version 35.0 and Opera starting version 26.0.

• Embedded Open Type Font

This type of font is a compact form of OTF font and is used as a font that is attached to the website, supported by all web browsers.
If you have found the font you want to use for your WordPress, but you are not sure whether the font is suitable for all web browsers, use the help of the Web Font Generator tool. This tool will help you to convert almost all types of fonts to website format easily.

READ  How to Set Up a Website For Free - Top Three Ways

1. Open the Web Font Generator.
2. Press the Upload button (1) to upload your font, check the agreement that the font can legally be used for web embedding (2) (posted on the website).
3. Press the Download button (3) and save the .zip file to your computer.

webfont-generator-1
4. In the .zip archive file, you will find fonts in WOFF and WOFF 2.0 formats along with CSS files and HTML demo pages. This font format is supported by almost all browsers.

After everything is finished, we will add a custom font to WordPress.
What you need

Before you start, all you need is:

• Access to the WordPress admin page
• Access to hosting control panel or FTP application

Steps 1 – Add Custom Fonts to WordPress with Plugins

Plugins may be the most simple and easy solution, if you want to add fonts to WordPress. Some popular plugins include:

WP Google Fonts

wp-google-fonts-plugin-3

You can add fonts to WordPress easily by using the WP Google Font plugin. This plugin will automatically enter the code needed to your website. In addition, you are also free to specify the font you want to use for certain CSS elements from the WordPress admin page.
Install this plugin directly from the official WordPress plugin directory and open the Google Fonts section. You will see the Google Font Control Panel. Here, you can choose fonts and change various settings such as font style, replaced elements, etc.

google-fonts-control-panel-4

Typekit Fonts for WordPress

typekit-for-wordpress-5

If you want to add a Typekit font to your WordPress, you must register with Typekit first and make a kit. Detailed instructions on how to make kits can be found here.
After you have the kit, install the Typekit Fonts for WordPress plugin. To configure this plugin, access the Settings menu -> Typekit fonts and paste your code. This plugin will automatically call the font that you have added to your kit.

typekit-control-panel-6

Use Any Font

use-any-font-plugin-7

With Use Any Font, you can add several fonts to your WordPress website.
You can install this plugin from the WordPress plugin directory page. After the installation process is complete, open the Use any font section, create a free API key and click the Verify button
After verification, you will be able to install fonts in TTF, OTF, WOFF format. You can also specify certain fonts for different elements.

READ  SEO : SEARCH ENGINE OPTIMIZATION DEFINITION AND BENEFITS FOR WORDPRESS

any-font-control-panel-9
Steps 2 – Add Custom Fonts to WordPress Manually

If you don’t want to burden your WordPress with plugins, you can add fonts to WordPress manually. The process is very easy, you just have to upload the font to your hosting account and then edit the CSS file on your theme. More detailed instructions like this:

1. Download fonts to your computer, to add fonts to WordPress.
2. Usually the font will be archived in the .zip format. Extract the .zip file.
3. Now, upload your font file (you can use File Manager or FTP applications) to the wp-content / themes / your-theme / fonts directory (create a fonts folder if it’s not already there). In this example, we have uploaded the AguafinaScript-Regular.ttf font

uploaded-font-to-fonts-folder-01
4. Now, open the WordPress admin page and open the Appearance -> Editor menu. You will see the style.css file. Scroll down the file and add the following line of code (don’t forget to change the font-family and url values according to your font):

@font-face {
font-family: D'HandScript-Regular;
src: url(https://dewafont.com/wp-content/themes/twentyseventeen/fonts/D'HandScript-Regular.ttf);
font-weight: normal;
}

5. Press the Upload file button to save changes.

font-face-added-to-style-css-11

the best google search related to this article

• adobe font folio
• custom fonts css
• how to change font size in wordpress
• wordpress fonts list
• wordpress font plugin
• wordpress google fonts
• web safe fonts
• custom fonts css
• how to change font size in wordpress
• wordpress font awesome
• font awesome cdn
• font awesome icon
• font awesome css content

The font-face code will call the font every time a visitor accesses your website. However, fonts may not appear for all elements, so you don’t see any changes on the front page. To attach fonts to certain elements, you must edit the same style.css file. For example, the following code will create the D’Hand Scripting font used for our website title:

  .site-title { 
    font-family: "Aguafina Script-Regular", Arial, sans-serif; 
    }

Note:

How to add fonts is very easy, right? We hope that the tutorial above can help you add fonts to your WordPress website.

Leave a Comment