How to Upload fonts to WordPress in quick easy steps

You can utilise custom Upload fonts to WordPress to increase the selection of the available fonts and select ones that best suit your demands and brand. Fortunately, a plugin can make it simple to accomplish this feature in WordPress.

This is readily accomplished, but you should know that you should limit the number of fonts on the site to no more than three, ideally two.

Remember that every theme on the site has direct access to Google's massive font collection. If a font you require is available from Google, it ought to be in the list of font alternatives that your theme offers.

Read on if the typefaces you use are not from this source. Now let's get down to the specifics and actions required to integrate custom fonts into your site using WordPress.

How to Integrate Custom Fonts using WordPress:

Integrating custom fonts in WordPress can significantly enhance the visual appeal and branding of your website. By following these steps you can seamlessly integrate custom fonts into your website, elevating its design and enhancing the overall user experience. For enhancing your website design you can also use typography WordPress themes that offers minimalistic look and aesthetics to your website.

1. Find the ideal customised fonts:

A fantastic collection of free Upload fonts to WordPress can be found on Utilise & Modify as well as Typewolf's "The Definitive Reference to Free Fonts." If not, users can go one step further and select paid substitutes from Typography.com, Adobe Fonts, and Fonts.com.

Every typeface will have many font variants (weight and style), regardless of the source. A few versions of the Roboto typeface are Roboto Thin, Roboto the Light, Roboto Bright, Roboto Bold Italic, and so on. Utilise them to alter the way they look at various web page elements, such as body text and headings (H1, H2, H3, etc.).

2. Put the custom fonts plugin in place:

To assist you, we developed Fonto, an Upload fonts to WordPress plugin that provides advice on how to add a new font to your online presence. With numerous choices to choose from, having such a reliable instrument at your disposal will make decision-making much easier. With Fonto, you can be certain that your website is using your favourite fonts correctly.

In order to install Fonto, go to Plugins → Add new → Result for Fonto and select Install (this means that the search result appears). After activating it, you ought to notice a new Fonts option in the dashboard of your WordPress site.

3. Add a fresh, customised font:

Integrating a font into a website can be done in two ways. Either obtain a self-hosting kit and host the fonts yourself on your own computer (also known as your hosting) or use an embed code provided by a Web fonts provider to distribute your fonts.

a. Web Font Service

The majority of premium type manufacturing facilities provide you with a straightforward CSS or JavaScript code that you can add to your website to load the fonts automatically.

To accomplish that, select fonts. Add new Enter font names. Check the Web Font Service box in the Upload fonts to WordPress Source box from your WordPress Dashboard. Copy the code for embedding that came with your font and paste it exactly into the Fonts Loading/Embedded Code section when you're using services such as Fonts.com, Adobe Fonts, and Typography.com. This guarantees that the HTML code will be added to the web site's <head> section automatically.

b. Self-Hosted

This option allows you to deploy the fonts straight from your server if you have a hosting kit that contains your fonts in a Web font format. To load the font, take the following actions:

4. Install the font file on your personal computer:

Verify that you possess all the font formats required for all major browsers to show the Web fonts. Some Web Open Fonts Format (.woff or.woff2) files must be present. You're able to use the FontSquirrel Webfont Generator to generate the necessary font formats required to support every major browser when all you have is the TrueType (.ttf) or OpenType (.otf) format. A sample video showing how to create the necessary.woff and.woff2 formats may be found below.

Click Fonts → Add new → Enter font name → and select Self-Hosted in the Font Source field from the WordPress Dashboard. Next, choose to submit every font file of your own by selecting the Add and Submit Files option. Note: Please refer to this page for more details on how to get around this restriction if you encounter an error such as "Sorry, this file type cannot be used for safety reasons."

Enter the code that came with the hosting kit in the Embed Code field. The CSS code needs to include a few @font-face declarations, as seen in the sample below:

@font-face {

font-family: 'Font Name';

src: url('font-name-file.woff2') format('woff2'),

   url('font-name-file.woff') format('woff');

}

Paste the copied URL path into the Embed Code area after each URL. This is what the example code will look like:

@font-face {
   font-family: 'Name of the font';
   src: url('http://yoursite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff2') format('woff2'),
   url('http://yoursite.com/wp-content/uploads/fonts/11148/name-of-the-font-file.woff') format('woff');
}

5. Set up the font styles and weights:

You should take note of how font variations (weights and style) are specified within the typeface-family CSS rule, according to the service you're utilising.

a. A single "Font Family" name is used to group fonts together:

If you have a single font name, such as "Proxima Nova," all you have to do is type it in and look at the possible variations that the font package has loaded:

Services that provide this option are Fonts.com and Adobe Fonts via the Family Grouping feature.

b. Font names are mentioned one at a time:

You must match the particular font names with the appropriate weights and styles if you have several font names, such as "ProximaNW01-Regular" and "ProximaNW01-RegularItalic." It should be noted that certain weights and styles may not have a font designation available; this is quite OK as you don't have to utilise each variation of the font.

Services that offer this option are Typography.com and Fonts.com.

c. Publish your font:

After finishing the first two steps, save the font by clicking the publish icon on the left sidebar.

When you select Appearance Customise, your font will show at the top of the Custom Fonts class list whenever you have a Font Field:

That's it, indeed! Your preferred fonts will be functional in just a couple of minutes.

Web Font Services That are Often Used:

The typefaces are accessible straight from the servers of the majority of type foundries. All you need to do is duplicate the embed code that is provided and replicate the sizes and styles. You can also checkout some of our best WordPress themes in order to give a typographic look and minimalist design to your site. We built several use-cases using the most well-liked foundries. These are some of the font service provider listed below. You can use them to upload fonts to WordPress:

1. Fonts.com:

To begin with, create an account on Fonts.com.
Then, choose the font you wish to use and designate it for a project.
After everything has been set up, all you need to do is choose your project, click on Publish Options, and copy all the JavaScript code that is located on the first option: JavaScript page.
Give your new font a name by going to Fonts > Add New in your website dashboard.
Copy the code from point 3 into the Fonts Load/Embedded Code section after selecting the Web Font Service option.
The font names are mentioned. A separate option must now be chosen from the Weights and Styles Matched section.
You must add the precise name for every font variation.
Let's use the Trajan typeface as an illustration. We just have the Regular and Bold options available, as you can see. This is the Reference Your Web Fonts Straight section of the Fonts.com Publish Options page (the same panel as in point 3). The names of the two font variations are listed in this field:
- font-family: "Trajan W01 Regular" for the Regular font and
- font family: "Trajan W01 Bd" for the bold one.
You must enter the following name in the fresh fields on Fonto:
- The Regular 400 field must be used, along with the title Trajan W01 Regular, for the Regular font; for the Bold font, the Bold 700 field must be used, along with the identity Trajan W01 Bold;
Once you select the publish button, your work is complete.

2. Adobe Fonts:

First things first, create an account on fonts.adobe.com.
After choosing the typeface that you want to use for the site, give it a project.
Go to the Kit Editor.
After choosing the embed code switch, copy the entire embed code.
Give your new font a descriptive title by navigating to Fonts > Add New in your website's dashboard.
Copy the code from point 4 into the Font Loading/Embedded Code section after selecting the Web Font Services option.
Verify that the Weights and Styles Matching region's "Fonts have been put together in the same "Font Family" name" option is ticked.
Return to the Kit Builder and select Utilising Fonts in CSS from the Selectors section on the left side of the page.
Enter the text in the initial field of the window that popped up on the website (omitting the commas).
Return to the dashboard and choose the Font Family Name area. Paste the content from point 9.
Examine the Weights & Styles section on the far left side of the page when you are back in the Kit Builder. You have to examine every choice in the Available Font Variations section of your dashboard.
After checking each version, just press the publish button.

3. Typography.com:

To begin with, users need to sign up for an account on Typography.com.
After deciding on the typeface you wish to use for the site, give it a project.
Locate the "Welcome, X" button in the right-hand column and select the Cloud Dashboard section.
Choose the project you just finished.
To copy all of the code you want from the CSS Key field, select the Tools button.
Give your new font a name by navigating to Fonts > Add New in your website dashboard.
In the Fonts Loading/Embedded Code section, choose the Web Font Service option and enter the source code from point 5.
Locate the font family by clicking on the Font Styles tab in your project.
Take a copy of the type family and paste it (without commas) into the Font Family Identifier section on the dashboard.
Verify that every option in the Possible Font Variations section is checked, then look over all of the font variants that Typography.com offers.
Click the publish button.

Conclusion:

In conclusion, upload fonts to WordPress is a quick and straightforward process. It can greatly enhance the visual appeal and uniqueness of your website. By following these easy steps, you can seamlessly integrate custom fonts into your WordPress site. This gives a personalized and professional touch. The ability to upload fonts allows you to align your website's typography with your brand identity, creating a more cohesive and engaging user experience for your visitors.

Remember to choose fonts that complement your design and enhance readability. You can upload custom fonts for headings, body text, or other elements. WordPress provides a user-friendly platform for font customization.

Uploading fonts to WordPress is a simple process that can significantly enhance the visual appeal of your website. When using a WP theme bundle, explore theme-specific settings for font customization. Take advantage of advanced typography controls, and ensure seamless integration with external font services. By doing so, you can create a visually appealing and cohesive design that aligns with your brand. Enhance the overall user experience on your WordPress site.

Additionally, always ensure that you have the appropriate licensing rights for the fonts you upload to comply with copyright regulations. With the flexibility and versatility that WordPress offers, you can easily experiment with different fonts. You'll surely find the perfect combination that reflects your site's style and message.

By incorporating custom fonts, you not only enhance the aesthetics of your WordPress website but also contribute to the overall branding and identity of your online presence. So, take advantage of this simple yet powerful feature to make your WordPress site stand out. Leave a lasting impression on your audience.

Back to blog