Adding Custom Fonts with Astra

Share:

Easily adding Custom Fonts with Astra is part of Astra’s great benefits. If you don’t have Astra, there are also quite a few great plugins you can use without Astra, which I’ll highlight later on.

Few Short Steps

1. Navigate to your Astra Options and activate the Custom Fonts module.

2. Once the Addon has been activated, click on the Settings button. Alternatively, you can get to your Custom Fonts by navigating to Appearance > Astra Options > Custom Fonts right there on the sidebar.

3. You’ll be prompted to add the Custom Font name as well as upload the appropriate files.

I always upload the .ttf, .woff, and .woff2 files. The .woff files are for conversions on mobile phones. I mention below how to get a hold of the .woff files to ensure fully responsive capabilities with your fonts.

Click Add New Font, and you’re done! You’ll now be able to use your font anywhere on your site. Just type it in like you would any pre-installed font, and it’ll pop up for you.

Creating and Activating .woff files for Mobile Custom Fonts

For mobile-friendly custom fonts, I use a site called Transfonter.org. This site will take your .tff or .otf files and convert them to .woff and .woff2 files, neatly paired with the CSS you’ll need. VERY easy.

1. Navigate to Transfonter.org, and you’ll be met with this page.

2. Make sure you’ve checked the WOFF and WOFF2 file options in the options box. Click on Add Fonts and locate your .otf or .ttf font file (or SVG). Your file will load, and you’ll be prompted to Convert.

3. Click on the Download button, and your .zip will download.

4. Click on the Download button, and your .zip will download. Open your .zip file, and you’ll see 4 files.

You’ll need the .woff and .woff2 file to upload onto your site. And you’ll need the stylesheet.css to copy and paste into your current CSS.

5. Open the stylesheet.css file, copy the text, and navigate back to your site. Open the Additional CSS options (Appearance > Customize > Additional CSS). Paste this text into your CSS, and be careful to not accidentally edit the code.

6. Navigate to your Media files, and add those .woff and .woff2 files that were in your .zip file, and you’re good to go!