Custom fonts

Lumeex allows you to customize the fonts used on your site. The system supports both online Google Fonts and locally hosted fonts served from your server.

Declaring Google Fonts

Google Fonts should be declared in your theme.yaml file under the google_fonts key. You can also specify font weights to load — by default, the site uses weights 200, 400 and 700.

For example, this configuration declares two Google Fonts, Lato and Montserrat, with their respective weights:

google_fonts:
  - family: Lato 
    weights:
    - '200'
    - '400'
    - '700'
  - family: Montserrat
    weights:
    - '200'
    - '400'
    - '700'

These Google Fonts will be automatically included in your site’s HTML header..

Declaring custom local font

The build process scans the lumeex/config/themes/your_theme/fonts/ directory for .woff and .woff2 font files. It then includes them in your site’s header and declares them in font.css.

Simply place your font files in the fonts folder:

lumeex/
└── config/
    └── themes/
        └── your_theme/
            ├── theme.yaml
            └── fonts/
                ├── your_font.woff
                └── your_font.woff2

Configuring which font to use

After declaring your fonts, specify where to use them in your theme.yaml under the fonts key. For example:

fonts:
  primary:
    name: Lato
    fallback: sans-serif
  secondary:
    name: Montserrat
    fallback: serif
  • primary is applied to h2 titles and navigation text.
  • secondaryis used for site titles, menus, tags, and body text.
Table of Contents