Custom Fonts

In Mou theme, you may also upload and use your own fonts. This feature is available in Custom Fonts options page in the admin panel. Let’s figure out the fonts uploading process step-by-step.

⏩ Step 1

Before uploading the fonts to your website, you need to make sure that they are ready for use on the web. The theme supports popular .woff and .woff2 web-font formats. If your font package is missing files with those extensions (for example, you may have only .ttf or .otf files), you will need to convert the font files to .woff format. Otherwise, feel free to skip this step. There is a handy free online tool called Transfonter. It allows the conversion of fonts to web-compatible format.

Follow the steps below to convert the fonts .ttf or .otf to .wofff/woff2:

  1. Click on Add fonts button to upload the fonts
  2. Make sure Family support is On
  3. Make sure WOFF and WOFF2 are selected.
  4. Click on the Convert button
After the conversion is complete, you should get a Download link with the .zip archive of your fonts package.

Unzip the archive and make sure that .woff or .woff2 font files are there.

⏩ Step 2
  1. From the Admin panel, navigate to Custom Fonts to upload the fonts.
  2. Click on Add Custom Font button
  3. Input a Font Family Name (e.g. Oregon LDO here)
  4. Change Font Display options (e.g. swap here)
  5. Now to upload the fonts click on Add Row button
  6. Click on Add File button to upload the local fonts (I’m uploading .woff2 here)
  7. Choose a Font Weight (e.g. 400 Regular here)
  8. Finally, click on the Save Changes button to save the font files.

✨ Tips

To upload more font files, repeat Step 2 again. Then change the Font Family Name and Font Weight.

⏩ Step 3
  1. After clicking on the Save Changes button, you’ll get a notification at top of this page with a WordPress Customizer link.
  2. Just click on that link to go to WordPress Customizer page or you can navigate to Appearance > Customize from Admin panel.
  3. Click on the Additional CSS tab to get the CSS Editor panel.
  4. Add your selector (h1-h6/ p/ a/ span, etc.) and give your Custom Fonts Family Name. Follow the screenshots below.

✨ Tips

Also, there is a popular plugin Custom Fonts from Brainstorm Force to use custom fonts.