While you typically use network fonts for building websites, some situations may require you to implement a custom font. To enhance your theme’s typography, follow these steps to add custom fonts through the Theme Options:
Step 1: Font File Preparation
Make sure you have your font files in one of the supported formats: PFA, PFB, PT3, SFD, TTF, OTF, OTB, T42, CEF, CFF, GSF, TTC, SVG, IK, MF, DFONT, BIN, SUIT, or BDF.
Step 2: Conversion to Web Formats
Use the Online Font Converter to generate the necessary .woff and .woff2 files. This user-friendly tool allows you to upload source files directly from your computer or via a URL.
Step 3: Prepare for Upload
First, check that your Multisite Network Settings allow ‘.zip’ files for uploads, as Porto requires you to upload custom fonts in this format. Compress your font files (typically in ‘.ttf’ or ‘.woff2’ formats) into a ‘.zip’ file before uploading.
Important: If you encounter an error like "Sorry, this file type is not permitted for security reasons" while uploading, you can temporarily resolve this by adding the following line to your 'wp-config.php' file:
define( 'ALLOW_UNFILTERED_UPLOADS', true );Important: Ensure your '.zip' file is structured with each font weight’s webfont and named according to the format '{FontName}-{FontWeight}{FontStyle}'. Porto will automatically detect and apply the appropriate font family and weight from the uploaded file.
Step 4: Add Font in Theme Options
Next, go to the 'Theme Options > Font Control'. Once uploaded correctly, the custom font will appear in the Font Control tab.
Step 5: Apply the Font
You can now use this custom font across your site, including within Elementor and WPBakery page builders.
