Font Selection

Typography is probably the most important aspect of a well designed, UX focused website. So Astra offers various typography controls and options for fonts. In this article, let’s see what are the options for fonts in Astra.

Typography options in the customizer.

System Fonts

Astra, out of the box uses System Fonts. As System fonts are installed and available on user’s computers, they don’t rely on third-party services and load fast.

Depending on the users device and operating system, the theme loads one of the fonts from the list below if the “Default” option is selected in the customizer.

Apple System, Blink Mac SystemFont, Segoe UI, Roboto, Oxygen Sans, Ubuntu, Cantarell, Helvetica Neue, Sans Serif

Whereas it also offers the option of the System fonts below:

Halvetica, Verdana, Arial, Times, Gorgia, Courier

Google Fonts

Google Fonts is the largest directory of free and open source web fonts. At the time of writing this article, it offers 848 font families; and Astra has all of them built-in.

Before releasing each update of Astra, our build process automatically checks all Google Fonts and lists them in Customizer options. If there is a Google Font that you can’t find in the options, probably the font is very new and it will be included with the next update of the Astra theme.

Typekit Fonts

Typekit is another directory that offers free as well as premium fonts. To use a font from Typekit with Astra theme, we have built a free plugin called “Custom Typekit Fonts“. Once installed, just enter your unique Kit ID; and it will automatically list all the fonts from your Typekit account to theme customizer options for you to select. No code required!

Custom Font Files

If you have a custom font file that you would like to use for your website, you can use our free “Custom Fonts” plugin. After installing it, you can upload your font file from the WordPress backend and see it available in the Customizer options. Again, no code required!

Here is a great tutorial made by Adam from WPCrafter that explains how this plugin works:

After all, fonts do matter, right?

Not the solution you are looking for? Check other articles, or open a support ticket.