Skip to content
JF Jooosi Fon

Adding Custom Font

How to add custom fonts to WordPress.

Great news! You don't need coding skills to add custom fonts to your WordPress website. Plus, you won't have to go through the hassle of setting up SFTP to upload your font files to the server. Instead, use the WordPress media uploader to upload your font files easily. It's that simple!

Step 1: Add new font#

Go to Appearance → Jooosi Fon and click the Add New button.

Add new custom font on WordPress website

Step 2: Provide font details#

Adding font details
  1. Give your font a family name on the Font Family field.

The family name will be used to identify the font in the CSS code. You can also change the title of your font on the Title field to make it easier to identify your font in the font lists.

  1. (Optional) Set the Font Display option to Block.

This option controls how font files are loaded and displayed by the browser. Learn more about the "Font Display".

  1. (Optional) fill the CSS Selector | Fallback Font field with *|sans-serif.

The * selector will assign the font to all elements on your website. The font will be fallback to the sans-serif if the font file fails to load.

Step 3: Add font variants#

By default, a variant is added to the font. On the font-weight field, choose the weight from the lists. You can also use a custom weight by typing the value on the field, such as 700 or 100 900 for variable fonts.

Add font variants

For additional font variants, click the Add variant button.

Add variant

Step 4: Upload font files#

  1. Choose the font variant you want to upload the font file to and click the icon to expand the variant settings panel.
Expand variant settings
  1. Click the Upload Fonts button to open the WordPress media uploader.
Upload Fonts button
  1. Upload your font files to the media library or choose the existing font files from the media library and click the Select button.
Uploading font files with WordPress media uploader

Once the font files are uploaded, they will be assigned to the font variant.

Font files assigned to variant

Continue to add font files to other variants if needed.

Step 5: Publish the font#

Ensure the Status toggle is set to Published, and click the Save button.

Publish the font