How to add custom fonts to WordPress without plugin

Unlock the Power of WordPress 6: Build Powerful Websites (Even Without Coding!)

WordPress 6 just dropped! Learn everything you need to know to create stunning websites with the latest features. No coding required!

Sign Up Now!

To enhance the typography of your WordPress website adding custom fonts can improve the visual appeal and uniqueness of your site.

In this guide, we will walk you through the process of How to add custom fonts to WordPress without plugin. By following these steps, you can achieve a personalized touch and make your website stand out from the crowd. Let’s get started!

Step 1: Choose and Download Your Custom Fonts

To begin, select the custom fonts that best suit your website’s style and branding.

There are numerous websites offering free and paid fonts, such as Google Fonts, Font Squirrel, and Adobe Fonts.

Browse through their collections, choose your desired fonts, and download the font files to your computer.

Step 2: Prepare Your Font Files

Once you have downloaded the font files (usually in .ttf or .otf format), it’s time to prepare them for uploading to your WordPress site.

You may need to extract the font files from the downloaded ZIP folder.

Make sure to remember the file locations on your computer for the next steps.

Step 3: Upload Font Files to WordPress

To upload the custom font files to your WordPress site, follow these steps:

1. Access your WordPress dashboard.
2. Navigate to “Appearance” and click on “Theme Editor“.
3. Locate and open the “style.css” file of your active theme.
4. Add the following code snippet at the end of the file:

   @font-face {
     font-family: 'YourFontName';
     src: url('path/to/font/file.ttf') format('truetype');
   }

5. Replace 'YourFontName' with the desired font name and 'path/to/font/file.ttf' with the actual path to your font file.
6. Click on the “Update File” button to save the changes.

Step 4: Apply Custom Fonts to Your Website

Now that your font files are uploaded, it’s time to apply them to specific elements on your website. Follow these steps:

1. Identify the CSS selectors of the elements you want to customize, such as headings, paragraphs, or navigation menus.
2. In your WordPress dashboard, go to “Appearance” and select “Customize“.
3. Click on “Additional CSS” to open the CSS editor.
4. Add CSS rules using the font-family property, specifying the custom font name and the corresponding CSS selectors. For example:

   h1, h2, h3 {
     font-family: 'YourFontName', sans-serif;
   }

5. Replace 'YourFontName' with the font name you specified in Step 3 and adjust the CSS selectors according to your needs.
6. Click on the “Publish” button to save your changes.

Step 5: Test and Fine-Tune Your Custom Fonts

After applying the custom fonts, it’s important to test their appearance and make any necessary adjustments.

Visit different pages of your website and ensure that the fonts are displaying correctly.

Make adjustments to the CSS rules or selectors if needed.

Final Note.

By following this step-by-step guide, you have successfully added custom fonts to your WordPress website without relying on a plugin.

Customizing typography can significantly enhance the visual appeal and uniqueness of your site, creating a more memorable user experience.

Remember to choose fonts that align with your website’s style and branding. Enjoy the creative possibilities of customizing your WordPress typography!

Unlock the Power of WordPress 6: Build Powerful Websites (Even Without Coding!)

WordPress 6 just dropped! Learn everything you need to know to create stunning websites with the latest features. No coding required!

Sign Up Now!