How to add custom fonts in WordPress without using plugins?
24 mins read

How to add custom fonts in WordPress without using plugins?

Typography plays an important role in web design, affecting the appearance and user experience of a website. As a WordPress developer or aspiring developer, you should understand the importance of creating visually appealing and engaging websites. This article aims to guide you on how to add custom fonts to WordPress without using plugins. We will also explore the benefits of loading Google fonts locally to ensure efficiency and compliance with GDPR regulations.

In this guide, we will provide you with a clear step-by-step process on how to add custom fonts in WordPress without using any plugins. We will cover everything from selecting custom fonts, preparing fonts for WordPress, to enabling fonts using CSS. In addition, we will discuss the advantages of hosting Google fonts locally and provide troubleshooting tips for common issues.

At the end of this article, you will learn how to enhance the layout of WordPress websites and provide visitors with a better browsing experience. Let’s start the journey of integrating custom fonts in WordPress in a simple, clear, and content rich way.

 

1. Understand custom fonts

Custom fonts are an important element in modern web design, allowing website owners to break free from the limitations of standard cybersecurity fonts and inject unique personality into the website. Unlike the familiar Arabic or Times New Roman fonts, custom fonts offer a variety of styles and aesthetics, helping to create unforgettable and visually appealing user experiences.

Why is adding custom fonts important?

  • Brand and Image: Customized fonts enable website owners to enhance their brand image and personality through layout. By selecting fonts that resonate with their brand value, businesses can create a consistent and recognizable visual image.
  • Enhancing user experience: Font design can have a significant impact on the readability and overall user experience of a website. Carefully selected custom fonts can improve the readability of content and make it easier for users to access website information.
  • Unique visual appeal: Unique font design can increase the visual appeal of a website, making it stand out from competitors. Carefully selected custom fonts can leave a deep impression on visitors and help achieve a more unforgettable browsing experience.
  • Differentiation and Memory: In crowded digital environments, using custom fonts can help websites stand out and make it easier for target audiences to remember. The correct font selection can evoke emotions, professionalism, or match the specific niche of the website.
  • Consistency in design: Using custom fonts in different parts of a website can ensure consistency in the design language. This consistency helps maintain a professional appearance and strengthens the overall theme and brand.
  • Additional website theme: Customized fonts provide flexibility in aligning layout with the website theme. Designers can choose fonts that are coordinated with content and design, creating a cohesive and aesthetically pleasing experience.
Google’s GDPR Policy

Google Fonts is a popular online font resource that is highly favored due to its rich font library and ease of use. However, when integrating Google fonts into WordPress websites, attention must be paid to the General Data Protection Regulations (GDPR). GDPR is a data protection and privacy regulation issued by the European Union (EU) aimed at protecting the personal data and privacy of EU citizens. When using Google Font, the user’s browser may make a request to the Google server, which could potentially transmit user data such as IP addresses to Google.

To comply with GDPR, it is recommended to host Google Fonts locally on the server. By hosting fonts locally, it is possible to ensure that user data is not sent to external servers, thereby better protecting privacy and complying with data protection regulations. After a clear understanding of the meaning of custom fonts and the importance of adhering to GDPR when using external resources such as Google fonts, let’s explore the step-by-step process of adding custom fonts to WordPress websites without relying on third-party plugins.

 

2. Search and select custom fonts (Google Fonts)

When it comes to obtaining various high-quality custom fonts, Google Fonts is the preferred choice for web designers and developers. Google Fonts provides a vast online font library that not only visually appealing but also optimized for network performance. Let’s explore the process of searching and selecting custom fonts from Google fonts to improve the layout of WordPress websites.

2.1 Accessing Google Fonts
  • Visit Google Fonts: First, visit the Google Fonts website (fonts. Google. com). You will see a vast font library waiting for you to explore.
  • Browsing and filtering: Google Fonts allows you to browse fonts by categories such as serif, sans serif, display, handwriting, etc. You can also filter fonts based on their thickness, slope, and width to find the most suitable font for your website.
  • Preview and Compare: Click on the font card to view more detailed information and preview fonts of different text sizes and styles. Compare multiple fonts side by side to make wise decisions.
  • Select font: After finding the font that matches the website design and content, click on the “plus” icon next to each font to add them to your favorites. This operation can save the selected font to a custom collection for future reference.
2.2 Using Google Font
  • Embed Google Font: After completing the font selection, click the “Embed” button at the bottom of the page. Google Fonts will generate an embedded code that includes a link to the selected font.
  • Integrate embedded code: Copy the provided embedded code and paste it into the<head>section of the WordPress theme HTML file. This will ensure that the selected Google font is loaded into the CSS of the website.
  • Font Style and Size: Customize the font style and size (Weight) you want to use on the website. Google Fonts provides specific CSS code snippets that you can insert into the theme’s style sheet (style. css) to apply the desired font style.
2.3 Ensure compliance with GDPR (optional)

If GDPR compliance is a concern for your website, you can consider hosting Google fonts locally instead of relying on Google’s servers. By downloading font files from Google Fonts and hosting them on your own server, you can reduce the transmission of user data to external servers and comply with data protection regulations.

With the various online fonts provided by Google Fonts, finding the perfect layout that matches the website theme and content becomes a delightful experience. By carefully using Google Fonts, you can enhance the visual appeal and readability of WordPress websites, providing visitors with an engaging and unforgettable browsing experience.

 

3. Prepare fonts for WordPress

There are several necessary preparation steps to integrate custom fonts from Google Fonts into the WordPress website. From downloading the font file to converting it to an appropriate format, and finally adding it to the managed panel (hPanel), please follow the steps in this guide to ensure a seamless and efficient process.

3.1 Download font files from Google Fonts
  • Visit Google Font Collection: Visit the Google Font website and log in with a Google account. Navigate to “My Favorite” to view the previously selected font, or create a new collection by adding a font.
  • Select the font to download: Click on the “plus” icon next to each font card and select the custom font you want to use on the website. This will add the selected font to your favorites.
  • Access Collection: After finding the desired font in the collection, click on the collection name to open it.
  • Download font files: Click on the download icon (downward arrow) in the upper right corner of the favorites page. The ZIP file containing the selected font file will be downloaded to your computer.
3.2 Convert TTF files to WOFF (or WOFF2) format
  • Extract ZIP file: Extract the downloaded file and display the font file in TTF format.
  • Convert TTF to WOFF (or WOFF2): To improve webpage performance, it is recommended to convert TTF files to Web Open Font Format (WOFF) or Web Open Font Format 2 (WOFF2). You can use various online font conversion tools or desktop applications to convert. Save the converted file in a separate folder for easy access.
3.3 Adding Google Fonts to hPanel
  • Login to hPanel: Access the host control panel (hPanel/cPanel) provided by the host provider (note: If you are using management servers such as LNMP, LAMP, or Pagoda Panel, adding Google fonts may be slightly different from the example steps, but they are similar.).
  • File Manager: Find the “File Manager” section in hPanel and open it. Navigate to the root directory of the WordPress installation, which is “public_HTML”.
  • Create a new font folder: Go from the root directory to the “wp content” folder, and then create a new folder called “custom fonts” (or any name you like) to store your custom font files.
  • Upload font file: In the “fonts” folder, upload the previously downloaded TTF and converted WOFF (or WOFF2) font files from Google Fonts.

  • Create include’font.css: Create a CSS file named include’font.css in the same folder, which is “custom fonts”
/* Font: Poppins */
/*Regular*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Regular"), local("Poppins-Regular"),
url("Poppins-Regular.ttf") format("truetype"),
url("Poppins-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
}
/*Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Bold"), local("Poppins-Bold"),
url("Poppins-Bold.ttf") format("truetype"),
url("Poppins-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
}
/*Black*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Black"), local("Poppins-Black"),
url("Poppins-Black.ttf") format("truetype"),
url("Poppins-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
}
/*Semi-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBold"), local("Poppins-SemiBold"),
url("Poppins-SemiBold.ttf") format("truetype"),
url("Poppins-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
}
/*Extra-Bold*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBold"), local("Poppins-ExtraBold"),
url("Poppins-ExtraBold.ttf") format("truetype"),
url("Poppins-ExtraBold.woff") format("woff");
font-weight: 800;
font-style: normal;
}
/*Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Light"), local("Poppins-Light"),
url("Poppins-Light.ttf") format("truetype"),
url("Poppins-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/*Medium*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Medium"), local("Poppins-Medium"),
url("Poppins-Medium.ttf") format("truetype"),
url("Poppins-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
/*Extra-Light*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLight"), local("Poppins-ExtraLight"),
url("Poppins-ExtraLight.ttf") format("truetype"),
url("Poppins-ExtraLight.woff") format("woff");
font-weight: 200;
font-style: normal;
}
/*Thin*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Thin"), local("Poppins-Thin"),
url("Poppins-Thin.ttf") format("truetype"),
url("Poppins-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
}
/*Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-Italic"), local("Poppins-Italic"),
url("Poppins-Italic.ttf") format("truetype"),
url("Poppins-Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
}
/*Medium-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-MediumItalic"), local("Poppins-MediumItalic"),
url("Poppins-MediumItalic.ttf") format("truetype"),
url("Poppins-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
}
/*Semi-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-SemiBoldItalic"), local("Poppins-SemiBoldItalic"),
url("Poppins-SemiBoldItalic.ttf") format("truetype"),
url("Poppins-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
}
/*Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BoldItalic"), local("Poppins-BoldItalic"),
url("Poppins-BoldItalic.ttf") format("truetype"),
url("Poppins-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
}
/*Extra-Bold-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraBoldItalic"), local("Poppins-ExtraBoldItalic"),
url("Poppins-ExtraBoldItalic.ttf") format("truetype"),
url("Poppins-ExtraBoldItalic.woff") format("woff");
font-weight: 800;
font-style: italic;
}
/*Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-LightItalic"), local("Poppins-LightItalic"),
url("Poppins-LightItalic.ttf") format("truetype"),
url("Poppins-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
}
/*Extra-Light-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ExtraLightItalic"), local("Poppins-ExtraLightItalic"),
url("Poppins-ExtraLightItalic.ttf") format("truetype"),
url("Poppins-ExtraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
}
/*Thin-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-ThinItalic"), local("Poppins-ThinItalic"),
url("Poppins-ThinItalic.ttf") format("truetype"),
url("Poppins-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
}
/*Black-Italic*/
@font-face {
font-family: "Poppins";
src: local("Poppins-BlackItalic"), local("Poppins-BlackItalic"),
url("Poppins-BlackItalic.ttf") format("truetype"),
url("Poppins-BlackItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
}

The CSS code provided represents the @ font face rule, which allows web developers to define and use custom fonts on the website. In this example, the defined custom font is “Poppins”. Let’s break down the code:

  • @Font face: This is a CSS rule used to define custom fonts used on web pages.
  • Font family: “Poppins”;: Specify the name of the custom font family, in this case “Poppins”. This name will be used to reference fonts throughout the entire website.
  • Src: specifies the source of the font file. The local() function is used to check if fonts are installed on the user’s device. If so, the locally installed version will be used. The subsequent url() function will provide the path to different format font files.
  • Format: Specify the format of the font file. In this example, two formats were used: TrueType (TTF) and Web Open Font Format (WOFF).
  • Font weight: normal;: Define the font weight of the “Popkins” font family when used with normal text. In this case, it is set as the default font weight, which is “normal”.
  • Font style: normal;: Define the font style of the “Popkins” font family when used with normal text. Here, it is set as the default font style, which is “normal” (non italic).

In summary, this @ font face rule ensures the correct definition of the custom font “Poppins” and can be used in CSS styles for different HTML elements. With this setting, website developers can easily apply the “Popkins” font to various parts of the website, giving it a unique and visually appealing layout style.

  • Edit Functions.PHP (optional): If you want to use Functions.PHP to call custom fonts, please visit the Functions.PHP file in the WordPress theme and add the corresponding code to register and call custom fonts.
function add_custom_fonts() {
wp_enqueue_style( 'my-styles', WP_CONTENT_URL . '/custom-fonts/include_font.css', array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_fonts' );

By following these steps, you have successfully integrated the custom font into the WordPress website. The font file is now stored on the server and can be accessed and loaded onto the website at any time. The next section will guide you through using CSS to enable these custom fonts and ensure that your website displays the desired layout for an attractive user experience.

 

4. Use CSS to enable fonts

Now that you have prepared your custom fonts by downloading and converting, it’s time to integrate them into the WordPress website using CSS. With the corresponding code provided in the “include’font.css” and “function. php” files, you can apply custom fonts to different elements of the website.

4.1 Applying custom fonts to specific elements

To customize font styles for specific elements on a website, follow these steps:

  • Find element: Determine the HTML element to use the custom font style. This can be a title (h1, h2, h3, etc.), paragraph (p), navigation menu, or any other element.
  • Add CSS code: Go to the WordPress control panel, navigate to Appearance>Customize. In the “Additional CSS” section, add the required CSS code snippets for the elements to be modified.
  • Use font family name: In CSS code, specify the font family attribute and use the exact same font family name as mentioned in the “include’font.css” file. For example, if you want to use the “Poppins” font in the title, the code will look like this:
h1, h2, h3 {
font-family: "Poppins", sans-serif;
}
  1. Save Changes: After adding CSS code, click the “Publish” button to save the changes. Now, custom fonts will be applied to specified elements throughout the entire website.
4.2 Global Custom Font Styles

You can also use the “*” (asterisk) selector to globally apply custom fonts to all related elements. This can ensure the consistency of the entire website. To this end, please add the following CSS code in the “Additional CSS” section:

*{
--fontFamily: "Poppins", sans-serif;
}

This code sets the “Popkins” font as the default font for the entire website body.

4.3 Backup font: In case custom fonts cannot be loaded, a backup font must be provided. The backup font should be a commonly used font to ensure a consistent user experience. For example:
body {
font-family: "Poppins", sans-serif;
}

In this example, if the “Popkins” font is not available, the browser will use the default sans serif font.

With these CSS guides, you can flexibly apply custom fonts selectively or globally on the WordPress website. By selecting the perfect custom font for website design and content, you can unleash your creativity and create a unique and engaging user experience.

 

5. Benefits of loading Google fonts locally

Compared to relying on external servers to load fonts, integrating Google fonts locally on WordPress websites has several advantages. By hosting font files on the server instead of obtaining them from Google servers, you can enjoy the following benefits:

  1. Improving page loading speed: Loading fonts from external servers may cause delays, especially in cases of high server traffic or network issues. Hosting fonts locally can ensure faster loading speed, as font files are directly obtained from your own server, reducing dependence on external resources.
  2. Enhancing website performance: Optimizing website performance is crucial for providing a smooth user experience. By using local fonts, the number of external HTTP requests required to load a website can be reduced, thereby minimizing potential bottlenecks and improving overall performance.
  3. Improve privacy and security: When using Google Fonts externally, the visitor’s browser may need to communicate with Google servers, potentially sharing user data (such as IP addresses). Hosting fonts locally can avoid such data transfer, thus better protecting user privacy and improving security.
  4. Compliance with GDPR: As mentioned earlier, the EU’s General Data Protection Regulation (GDPR) aims to protect user data and privacy. By loading Google Fonts locally, you can comply with GDPR requirements as user data will not be transferred to external servers.
  5. Offline access: Hosting Google fonts locally allows visitors to access your website even if they are offline or encounter network connectivity issues. This offline access is very valuable for users who need to view the website without Internet connection.
  6. Better control and customization: With local hosting, you can have complete control over font files and easily modify them when needed. In addition, you can also merge various font weights and styles into one font file to reduce the number of requests and further optimize performance.
  7. Minimize dependence on external servers: By avoiding dependence on external servers, you can reduce the risk of potential font service interruptions or changes to Google infrastructure that may affect font availability or loading time.
  8. Reduce CORS issues: Cross Source Resource Sharing (CORS) issues may arise when loading resources from external domains, which can lead to issues with certain browsers. Hosting Google fonts locally helps avoid CORS related issues.
  9. Facing the Future: Loading Google Font locally can face the future, protecting your website from potential changes or interruptions to Google Font services. You can retain control over the font file, even if Google makes modifications to the font library, to ensure consistency in layout.

In summary, loading Google fonts locally can accelerate page loading speed, improve website performance, increase privacy and security, comply with GDPR requirements, enable offline access, provide better control and customization options, minimize dependence on external servers, avoid CORS issues, and enhance future facing capabilities. On the other hand, not loading Google Fonts locally may result in slower loading times, potential privacy issues, challenges in complying with data protection regulations, limited customization options, reliance on external servers, potential CORS related issues, and susceptibility to changes in external font services.

 

6. Troubleshooting common issues

Although adding custom fonts to WordPress websites can greatly enhance their visual appeal and user experience, it is not uncommon to encounter some issues during this process. Here, we will discuss some common issues and provide troubleshooting tips to help you solve them.

6.1 Font not displayed

Problem: Your custom font cannot be displayed on the website.

Troubleshooting tips:

  1. Check file path: Check if the font file path in “include’font. css” and the font file location in the “fonts” folder are correct.
  2. File permissions: Ensure that the font file has appropriate read permissions (usually 644) so that the network server can access it.
  3. Font name matching: Ensure that the font family name in the @ font face rule and CSS code matches the name specified in the “include’font.css” file.
  4. Font Format Compatibility: Confirm that most web browsers support the selected font format (TTF and WOFF).
6.2 Slow page loading speed

Problem: Integrating custom fonts can affect the loading speed of websites.

Troubleshooting tips:

  1. Font subset: Reduce the font file size by creating a font subset that only uses the required characters. This is particularly useful if only specific characters or language glyphs are needed.
  2. Compress font files: Use tools such as Gzip to compress font files to minimize file size.
  3. Optimize font usage: Limit the number of loaded font styles and weights to reduce HTTP requests.
6.3 Cross browser compatibility

Problem: Custom fonts display differently or not at all on different web browsers.

Troubleshooting tips:

  1. Browser support: Confirm that all target browsers support the selected font format (TTF and WOFF).
  2. Backup font: Always provide backup font options in CSS code to ensure proper rendering when custom fonts cannot be loaded.
6.4 CORS issues

Problem: Encountered Cross Source Resource Sharing (CORS) issue when loading font resources from external domains.

Troubleshooting tips:

  1. Local hosting: Hosting Google fonts locally to avoid CORS related issues and reduce dependence on external servers.
6.5 Mixed Content Error (for HTTPS websites)

Problem: If your website uses HTTPS but the font file is loaded through HTTP, mixed content errors may occur.

Troubleshooting tips:

  1. Use HTTPS URLs: Ensure that HTTPS URLs are used for all resources, including font files, to maintain secure connections.
6.6 Font License and Copyright

Question: Legal issues regarding font licensing and copyright.

Troubleshooting tips:

  1. Check permission: Ensure the use of custom fonts that have obtained a network usage license and comply with copyright regulations.
  2. Read License Terms: View the license terms and conditions for custom fonts to avoid any legal disputes.

By addressing these common issues and applying the provided troubleshooting techniques, you can ensure the smooth integration of custom fonts into the WordPress website, providing visitors with a visually appealing seamless user experience.

 

Summary

Custom fonts play a crucial role in enhancing the visual appeal and user experience of WordPress websites. By adding custom fonts locally, you can improve page loading speed, enhance performance, and ensure compliance with GDPR requirements while maintaining user privacy. Local hosting provides more control and customization options, reduces CORS issues, and protects your website from potential font service changes. If you encounter any problems, please follow our troubleshooting tips to overcome common obstacles and enjoy the benefits of creating a unique and charming layout for the website. Welcome to use custom fonts to make your website unique and unforgettable.