Typography & Fonts

Set your body and heading typography with loads of Google font options. Fonts are downloaded to your server and loaded locally for lightning fast pagespeed.

If you run into issues with your fonts not loading correctly, especially after migrating your site to a different domain (including staging/local/live migrations), enable the “Flush local fonts” settings and hit Publish to flush and re-download your font files and update the references to those files in the database. This setting will reset itself after you save/publish.

How To Use

View Customizer > Theme Settings > Typography.
Change your Body and Heading Font Family and Variant (font weight) settings to preview.
Publish/save your settings.

Screenshots

Adding Additional Google Fonts

Additional Google Fonts can be loaded (for use in CSS) via the theme config.php file. This will likely require a developer.

Adding Custom (non-Google) Fonts

Note: This is advanced and will likely require a developer to implement.

If you’d like to disable Google fonts and use a custom font, there are a few easy steps involved.

Set Body and Heading Font Family settings to “Default Browser Font-Family” or a similar non-Google default setting.
Upload your font files wherever you think is best, in the theme, or somewhere on the server.
Load your font files however is recommended, often using @font-face.
Override Mai Theme’s custom properties with your new font values. See snippet below.

Custom Fonts:

:root {
    --heading-font-family: custom-heading-font-name !important;
    --heading-font-weight: 700;
    --body-font-family: custom-body-font-name !important;
    --body-font-weight: 400;
    --body-font-weight-bold: 700;
}