How to Add Custom Fonts to Your WordPress Site

Adding custom fonts to your WordPress site can enhance its visual appeal and make it stand out from other sites. In this tutorial, we’ll show you how to download and upload custom fonts directly to your site to ensure GDPR compliance and improve site performance.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Step 1: Choose and Download the Font

The first step is to choose the font you want to use and download it from a reputable source. When selecting a font, it’s essential to consider compatibility with various browsers. Typically, the following font formats cover a broad range of browsers:

  • WOFF2 (Web Open Font Format 2): Preferred for modern browsers.
  • WOFF (Web Open Font Format): Also suitable for modern browsers.
  • TTF (TrueType Font): Compatible with Safari, Android, iOS.
  • EOT (Embedded OpenType): Necessary for Internet Explorer.

Several font sources provide fonts in multiple formats, ensuring broader compatibility. If you download from a source like Google Fonts, you may notice that it primarily offers TTF (TrueType Font). In such cases, using TTF is generally acceptable, as many modern browsers support this format. However, whenever possible, it’s advisable to obtain fonts in WOFF or WOFF2 formats for optimal performance.

Ensure that the chosen font is licensed for web use, and be aware of any licensing requirements associated with its usage. Once you have the font files downloaded, proceed to the next step.

Converting Fonts (Optional)
If you find yourself with a TTF font and need it in WOFF or WOFF2 format, you can use online tools or desktop applications for conversion. Here are a few options:

Online Font Converters:

Desktop Font Conversion Tools:

Always respect font licensing terms, and if possible, obtain fonts in the original provided format for the best quality and compatibility.

Step 2: Upload the Font Files to Your Site

After you’ve downloaded the font files, you need to upload them to your WordPress site. You can do this by uploading the font files to your web server via FTP or by using a plugin like Custom Fonts or Use Any Font.

If you choose to upload the font files using FTP, connect to your web server using an FTP client like FileZilla. Navigate to the root directory of your WordPress site and create a new directory called “fonts“. Upload the font files to this directory.

Alternatively, you can use a plugin like like Custom Fonts or Use Any Font to upload the font files to your WordPress site. These plugins allow you to upload font files to your WordPress site and use them without having to modify your theme’s files.

Once the font files are uploaded, you can move on to the next step and add the fonts to your WordPress site.

Step 3: Define the Font Styles in CSS

Next, you need to define the font styles using CSS. Create a new CSS file called “custom-fonts.css” in the “fonts” folder you created earlier within your child theme. In that file, you can add the @font-face rule for your custom font and styles for different elements of your site:

/* Regular Font */
@font-face {
	font-family: "Your Custom Font";
	src: url("./fonts/your-font.woff2") format("woff2"),
		url("./fonts/your-font.woff") format("woff"),
		url("./fonts/your-font.ttf") format("truetype"),
		url("./fonts/your-font.eot") format("embedded-opentype");
	font-weight: normal;
	font-style: normal;
}

/* Bold Font */
@font-face {
	font-family: "Your Custom Font";
	src: url("./fonts/your-font-bold.woff2") format("woff2"),
		url("./fonts/your-font-bold.woff") format("woff"),
		url("./fonts/your-font-bold.ttf") format("truetype"),
		url("./fonts/your-font-bold.eot") format("embedded-opentype");
	font-weight: bold;
	font-style: normal;
}

/* Apply the regular custom font to specific elements */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Your Custom Font", sans-serif;
	font-weight: normal;
}

/* Apply the bold custom font to specific elements */
strong,
b {
	font-family: "Your Custom Font", sans-serif;
	font-weight: bold;
}
Code language: CSS (css)

This uses ./fonts/ as the path, indicating that the “fonts” directory is located in the same directory as the CSS file. Adjust this relative path based on your actual file structure. Adjust the font file names and paths according to your actual file names and structure.

Choosing the Right Approach for CSS Organization

When using custom fonts in your WordPress site, you have the flexibility to structure your CSS files in different ways. In the provided example, the font face declarations and overall styling rules are combined in a single file (custom-fonts.css). This approach simplifies the organization and keeps related information together, making it more readable.

Alternatively, if you already have a custom styles.css file set up and enqueued in your WordPress theme, you can add the @font-face declarations directly to that file. This can be a practical approach, especially if you prefer to consolidate all styling-related code into one file, minimizing the number of HTTP requests and simplifying your project structure.

Choose the approach that best suits your project’s needs, considering factors like performance, maintainability, and your overall project structure.

Step 4: Register the Font Files in Your Theme (Optional)

If you’ve chosen to combine your @font-face declarations with your existing styles.css file, you can skip this step. However, if you’ve created a separate custom-fonts.css file, add the following code to your child theme’s functions.php file to register the font files and enqueue the custom fonts CSS file:

function mytheme_add_custom_fonts() {
	// Enqueue the custom fonts CSS file
	wp_enqueue_style( 'mytheme-custom-fonts', get_stylesheet_directory_uri() . '/fonts/custom-fonts.css', array(), null, 'all' );
}

// Hook the function to the wp_enqueue_scripts action
add_action( 'wp_enqueue_scripts', 'mytheme_add_custom_fonts' );
Code language: PHP (php)

Make sure to replace “mytheme-custom-fonts” with a unique name for your font and “custom-fonts.css” with the name of the CSS file where you’ll define the font styles.

Step 5: Check Font Performance and Site Load Time

After adding custom fonts to your site, it’s important to ensure that they don’t negatively impact site performance or loading time. Use tools like Google PageSpeed Insights or GTmetrix to check your site’s performance and loading time. If you notice any issues, you may need to optimize your font files or adjust your site’s font usage.

If you notice that your custom fonts are negatively impacting your site’s performance, you may need to optimize your font files. You can do this by using a font optimization tool like Font Squirrel or Transfonter. These tools can help reduce the file size of your font files without sacrificing quality, which can improve your site’s loading time.

In addition to checking site performance, it’s also a good idea to check your site’s accessibility. This includes checking that your custom fonts are legible for users with visual impairments, such as those who may need larger font sizes or high contrast settings. You can use tools like WebAIM’s Color Contrast Checker or the Wave Accessibility Evaluation Tool to check the accessibility of your site.

Step 6: Ensure GDPR Compliance

When using custom fonts on your site, it’s important to ensure GDPR compliance by downloading and uploading the font files directly to your site. This ensures that you have control over the data that’s being transmitted and that your site’s users are protected. Make sure to only use fonts that are licensed for web use and follow any licensing requirements.

Additionally, it’s important to inform your site’s visitors about your use of custom fonts and how their data is being processed. This can be done through a privacy policy or cookie notice. You may also want to consider implementing a consent management solution, such as Cookiebot or OneTrust, to ensure compliance with GDPR and other privacy regulations.

That’s it! Adding custom fonts to your WordPress site is a great way to enhance its look and feel. By following the steps outlined in this tutorial, you can easily download and upload your preferred fonts to your WordPress site. Remember to choose fonts that align with your website’s design and branding, and consider factors like font file format, license, and GDPR compliance before implementation. With the right custom fonts, your website will stand out and provide a unique user experience for your visitors.

Leave your feedback and help us improve šŸ¶

We hope you found this article helpful! If you have any questions, feedback, or spot any errors, please let us know in the comments. Your input is valuable and helps us improve. If you liked this article, please consider sharing it with others. And if you really enjoyed it, you can show your support by buying us a cup of coffee ā˜•ļø or donating via PayPal šŸ’°.

More free knowledge, because why not?

Your thoughts matter, leave a reply šŸ’¬

Your email address will not be published. Required fields are marked *