How to Add Custom Fonts to Your WordPress Site (With and Without Google Fonts)

Custom fonts are one of the most important design elements that add a unique character to your site and enhance its visual identity. In this comprehensive guide, we will review the steps to add custom fonts to a WordPress site in two main ways: using Google Fonts, and also manually without relying on external services. We will explain each step in detail for beginners with clear practical examples.

Step One: Why Use Custom Fonts?

• Imparting Identity: Using a unique font helps reflect the brand’s personality.
• Better User Experience: Readable fonts contribute to increased user engagement and longer visit durations.
• Stand Out from Competitors: A professional font adds an attractive touch and makes your site prominent.

Method One: Using Google Fonts

1. Choosing a Font from the Google Fonts Library

1. Go to the Google Fonts website.
2. Search for your preferred font, and note the names of the weights (e.g., Regular and Bold).
3. Click the Select this style button to get the enqueue URL.

2. Adding the Font in the functions.php File

In most themes, you can add the enqueue URL via the theme’s or Child Theme’s functions.php file. For example:

 function mytheme_enqueue_styles() { // Enqueue Google Fonts wp_enqueue_style( 'my-google-font', 'https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap', array(), null ); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles'); 

Here we enqueued the Tajawal font as an example. You can use any available font from Google Fonts.

3. Using the Font in CSS Files

After linking the font, you can use it in a CSS file or via theme customization. A simple example:

 body { font-family: 'Tajawal', sans-serif; } 

Make sure the font name in quotes matches what is in the Google Fonts code.

Method Two: Adding a Custom Font Manually (Without Google Fonts)

1. Obtaining the Font File

Get the font file you want to use in .ttf, .woff, or .woff2 format. Ensure you have legal permission to use the font.

2. Creating a Fonts Folder in the Theme or Child Theme

1. Go to the wp-content/themes/your-theme-name folder.
2. Open the Child Theme folder if you are using one to avoid losing modifications upon updates.
3. Create a new folder named fonts and place the font files inside it.

3. Defining the Font via CSS

Open the style.css file in the child theme, or a custom CSS file, and add the following definition:

 @font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont.woff2') format('woff2'), url('fonts/MyCustomFont.woff') format('woff'), url('fonts/MyCustomFont.ttf') format('truetype'); font-weight: normal; font-style: normal; }
/* Using the font */
body {
font-family: 'MyCustomFont', Arial, sans-serif;
}

In this example:

• font-family: This is the name we will use when applying the font in the rest of the CSS files.
• src: Refers to the paths of the font files in different formats to ensure the font works in all browsers.
• font-weight and font-style: Specify the appropriate values, such as (normal or bold).

4. Testing the Font on Your Site

After saving the style.css file and refreshing the page, check if the new font is applied. If it doesn’t appear, verify the correctness of the paths and file type. You might need to clear the cache if you are using a performance acceleration plugin.

Final Step: Testing Fonts and Aligning Them with the Design

Whether you used fonts from Google Fonts or added them manually, make sure to test their appearance across different devices and browsers. Readability changes depending on screen size and operating system. It is also best to ensure that the font fully supports Arabic if your site’s content is in Arabic.

The Importance of a Professional Site with ITQAN

Choosing the right font is an integral part of designing a professional site. If you are looking to build an attractive visual identity or want to develop a comprehensive WordPress site, the ITQAN team offers you all the solutions you need for designing and developing Arabic language websites.
We guarantee you a unique user experience and an elegant interface that adheres to the latest web standards, ensuring you a stronger competitive opportunity in the digital market.

Contact Us Now!

If you wish to elevate your site to a professional level or need consultation on font selection and design, contact ITQAN today. Click the link below to start your journey towards a distinguished Arabic website:
Contact ITQAN

Don’t miss the opportunity! Invest in your site’s design and choose the perfect font that reflects your brand identity and helps you earn your customers’ trust.