How to Customize Fonts

FAQ  How To  Tutorials  Last Updated: Time to Read: 2 minutes

Layers offers two integrated ways to customize fonts, the Google Font selector and TypeKit script integration.

Layers bundles a simple font customization tool that lets you choose a Google webfont for Headings/Titles, body text and buttons which you can access from LayersCustomize under Site Settings. Simply choose your desired font from each drop-down. You may preview fonts in advance by visiting the Google Fonts page.

Advanced font customization will be available via the Layers FontKit extension, or you may use a 3rd Party plugin such as Easy Google Fonts and a little custom CSS, outlined below.

The Layers font options offer a Typekit integration field where you only need to enter your TypeKit ID. Whichever font is set for your domain on your Typekit account will be automatically pulled in when Layers loads.

To get elements in your pages to use this font, you must set them with Custom CSS.

You may include fonts from other sources beyond TypeKit via the Custom Scripts area in the Header or Footer sections of the Customizer if the font host provides you with a Javascript snippet to use. For fonts that require including a stylehsheet or set of files (such as FontAwesome), you must use a plugin or create a child theme.

The @font-face method may be used in the CSS area of the Customizer by placing the code at the top/before any other CSS. The font itself can be hosted on your site by uploading it to your webspace or may be hosted anywhere else. The URL must be correct in the file path of the @font-face declaration. Example:

FontAwesome requires a stylesheet to be enqueued and cannot be included this way. Use the FontAwesome plugin instead.

The below examples  may be used to replace the primary font-family declarations in Layers,. Simply replace the first font name within quotes with your font’s name (refer to the code snippet on TypeKit, your Font provider or in your @font-face declaration).

For anything more specific, you will need to use the browser inspector to grab the right CSS selectors for the text element you wish to change. We offer tips on this in How to Customize Your Site With CSS and in the Child Theme Styling guide.

Child Theme Developers

You may set Google font defaults in your functions.php or use @font-face. See Child Theming: Styling & Fonts in our developer guide.

Font size is determined by the widget options, therefore we don’t offer detailed font tweaking in terms of size to help keep your layouts balanced and readable.

Layers uses the rem font size value, which also sets line-height automatically. If customizing fonts with Custom CSS, use rem values!