WordPress Custom Fonts Adding Guide (Block Themes & Classic Themes General)

fontTypography is crucial in web design. Uniform and distinctive typography not only improves readability, but also helps strengthen brand identity. Customized fonts are a great way to create a professional look, as they fit better than the default system fonts.

This article introduces three common ways to import WordPress fonts, adapting to different theme types and operating habits.

Preparing the font file

Commonly used web font formats include .woff,.woff2,.otf,.ttf respond in singing .eot. Among them .woff2 High compression and compatibility for most modern browsers.

If the font format does not meet the requirements for use, it can be converted in an online tool such as Transfonter.org. It is recommended that you also download .woff respond in singing .woff2 two formats to enhance compatibility.

Method 1: Upload fonts using the site editor (for WordPress 6.5+)

WordPress 6.5 adds font upload feature, requires block theme to be enabled.

The operation path is as follows:

• Go to "Appearance > Editor"

• Open the "Style" setting in the upper right corner and click "Typography".

• Select "Manage Fonts" and click "Upload Fonts".

• Selecting a local font file (supported) .woff,.ttf (etc.)

• After uploading, you can select the corresponding font in the site layout settings

This method does not useplug-in (software component)or code interventions, it's simple. To use Google Fonts, click "Installation of fonts", search for Google Fonts fonts and add them with one click.

Method 2: Use plugin to import fonts (applies to all themes)

If the site is not using the block theme or if you want to make it more intuitive, you can do so with theplug-in (software component)Enables font import.

Recommended Plugins:

• Use Any Font: Support for uploading local fonts
• Easy Google Fonts: suitable for quick access to Google Fonts

utilization Use Any Font The plug-in steps are as follows:

• Install and enable the plugin

• Go to the plugin settings page to request and verify the API Key

• Upload the font file and name it

• After a successful font upload, it will appear in the site layout menu

The plugin approach is suitable for most sites and is easy to set up, with or without a code base.

Method 3: Manually import fonts using a child theme (for users with code experience)

Font import can be achieved through child themes if higher degrees of freedom are needed or if a plugin-independent approach is desired.

The steps are as follows:

• exist /wp-content/themes/ Create a sub-theme folder under

• increase style.css respond in singing functions.php file that defines the theme information and introduces the parent theme styles

• establish fonts folder and upload the font file

• exist style.css Add the following CSS to load your locally uploaded custom fonts. :

@font-face {
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2'),
       
  font-weight: normal;
  font-style: normal; }
}
body {
  font-family: 'CustomFont', sans-serif; } body { font-weight: normal; font-style: normal
}
@font-face {
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2'),
       
  font-weight: normal;
  font-style: normal; }
}
body {
  font-family: 'CustomFont', sans-serif; } body { font-weight: normal; font-style: normal
}
@font-face {
  font-family: 'CustomFont'.
  src: url('fonts/CustomFont.woff2') format('woff2'),
       
  font-weight: normal;
  font-style: normal; }
}
body {
  font-family: 'CustomFont', sans-serif; } body { font-weight: normal; font-style: normal
}

• Go back to the WordPress backend and enable the child theme.

This method is suitable for users with a certain technical base and allows for more flexible control and customization.

summarize

Custom fonts help to build a uniform style of website typography. The task of replacing fonts can be accomplished using a site editor, plugin, or manually. Choosing the right method to do this, taking into account the theme of the site and your own needs, will help improve the overall visual effect and the expression of information.