Adding Fonts in Global Styling

In Web Studio → Global Styling → Add Fonts, you control which fonts are available across your site. Here, you can choose from Recrevio’s built-in font library or upload your own custom fonts. Once added, these fonts can be applied in Text Styling for headings, paragraphs, quotes and other elements.

Adding Fonts from the Library

1. Open Web Studio → Global Styling → Add Fonts.
2. Click Add Fonts.
3. Browse the built-in library and select the font family you want.
4. Choose the font weight.
5. The font will be added to your fonts and will be available in your project.

Uploading Custom Fonts

If you have licensed fonts that aren’t in the library, you can upload them.

1. In Add Fonts, click Upload Font.

   Fill in:

   • Name: A friendly label you’ll see in dropdowns.
   • WOFF file (recommended): The modern, optimized format.
   • OTF/TTF file: For fallback compatibility.
2. Click Add to upload your font file.

Managing Your Fonts

• You can enable up to 8 fonts per project.
• Fonts you’ve added appear in the My Fonts list.
• To remove one, click the trash/bin icon next to it.

Best Practices

• Keep it simple: Stick to 2–3 font families (e.g., one for headings, one for body text, optional accent font).
• Performance matters: Every extra font file increases page load time. Less is more.
• Use variable fonts: If available, they pack multiple weights/styles into a single file.
• Brand consistency: Match your fonts to your brand guidelines and use them consistently across headings and body.
• Fallback fonts: If your custom font fails to load, the browser will use a fallback (like Arial or Georgia). Make sure your design still looks acceptable.

Applying Your Fonts

After adding fonts, go back to Global Styling → Text Styling to assign them to:

• Paragraphs
• Headings (H1–H6)
• Quotes

Once set, your fonts apply globally across the entire site.

Troubleshooting

• My font looks blurry: Make sure you uploaded a proper WOFF/WOFF2 file instead of relying only on OTF/TTF.
• I don’t see my custom font in Text Styling: Confirm it was successfully uploaded and appears in My Fonts.
• Fonts aren’t showing on mobile: Clear your browser cache—font files are cached heavily by browsers.