How to add and use custom fonts
Custom fonts give your store a unique personality and help your website look consistent with your brand’s logo and physical signage. While WooShop comes with hundreds of Google Fonts pre-installed, adding your own specific font files allows you to stand out and keep your branding tight.
How to upload your custom fonts
Follow these steps to add a new font file to your store:
- Prepare your files: Ensure you have your font files ready on your computer. The best format for the web is .woff2, but .ttf and .otf also work.
- Navigate to Custom Fonts: From your WooShop dashboard, go to Appearance > Custom Fonts.
- Add New Font: Click the Add New button at the top of the page.
- Name your font: Enter the name of the font exactly as you want it to appear in your settings (e.g., "Brand Sans Bold").
- Upload the files: Click the Upload button next to the font weight you have. If you have a regular version and a bold version, upload them into their respective slots (Regular 400, Bold 700, etc.).
- Publish: Click the blue Publish button on the right side of the screen.
How to use your new font
Once uploaded, your font won’t automatically change your site; you need to tell your store where to use it.
- Go to Appearance > Customize.
- Navigate to General > Typography.
- Select the area you want to change, such as Base Typography (for body text) or Headings.
- Click the font family dropdown menu. Scroll to the top of the list or type the name of your uploaded font.
- Select your font and click Publish to save the changes.
Practical scenarios
- Restaurant Owners: Use a distinctive "Script" font for your menu item titles to give a hand-written feel, while keeping the prices in a standard, easy-to-read font.
- Boutique Shops: Use a bold, serif font for your homepage banners to create a high-end, editorial look that matches your packaging.
- Service Providers: Upload a clean, modern font that matches your professional slide decks or business cards for a cohesive client experience.
Troubleshooting common issues
The font isn’t appearing in the list
Double-check that you clicked "Publish" on the font upload page. If it still doesn’t show up, try refreshing the Customizer page in your browser.
The text looks "jittery" or pixelated
This usually happens if you use a low-quality .ttf file. If possible, try to source a .woff2 version of the font, which is optimized specifically for web browsers.
Bold or Italics aren’t working
When uploading fonts, each "style" is a different file. If you only upload the Regular weight, your site will try to "fake" the bold version, which often looks blurry. Make sure to upload the specific Bold or Italic files to their matching slots.
The font changes back to default on mobile
Clear your website cache if you use a caching plugin. Sometimes the mobile version of a site serves an older version of your style settings.
Summary
Adding custom fonts is the fastest way to make a template feel like a custom-designed brand. Once you’ve uploaded your files through the Custom Fonts menu, you can control them entirely through the Typography settings in the Customizer.
Related links:
- [How to change your store colors]
- [Setting up your header and logo]
- [Optimizing images for faster loading]
