Typography Settings
Last updated
Last updated
Various settings are available to help you customize the typography on your site. Here’s a look at the options for managing and adjusting your fonts
This setting allows you to enable or disable fonts on the front end of your website. By toggling this option, you can control whether the selected fonts are applied to your site’s design.
The Font Preload option helps improve page loading speed and user experience by preloading the fonts. When enabled, it loads the fonts early in the page rendering process, making sure your text displays as soon as possible.
When this option is enabled, Kalium will load Google Fonts locally instead of pulling them from Google’s servers. This can help with site performance and privacy by reducing external requests.
This setting determines where the font import code is placed within your HTML document. You can choose between:
Before page renders (Inside <head>): This option loads fonts before the page content is displayed.
After page renders (Inside <body>): This option loads fonts after the page content is displayed.
The Font Face Rendering setting lets you choose how to render the font faces for better performance. The available options are:
Swap (default): Ensures text is displayed using a fallback font until the custom font is fully loaded.
Auto: The browser decides the best rendering method.
Block: Prevents text from being displayed until the custom font is fully loaded.
Fallback: Uses a fallback font initially, then swaps to the custom font.
Optional: Similar to fallback, but with less priority on loading the custom font.
To use Adobe Fonts with Kalium, you need to provide an Adobe Fonts API token. This token fetches your font projects and integrates them into the theme, allowing you to utilize Adobe’s extensive font library.
This option allows you to set the default unit for font sizes, line heights, and letter spacing. You can choose between units like pixels (px), em, or rem, depending on your design preferences.
Here, you can enter custom text that will be displayed as a preview when selecting different font variants. This allows you to see how your chosen fonts will appear with your specific text.
This setting lets you specify the font size, in pixels, for the preview text. Adjusting this helps you better visualize how the font will look in different sizes.
The Fonts Directory option shows you where your fonts are stored and managed. The default directory is: ~/wp-content/uploads/typolab-fonts/ This is where your locally stored fonts are kept and where you can manage permissions for font usage.
The Export Fonts section allows you to export various font settings, making it easy to back up or transfer your typography setup. You can choose to export:
Fonts
Font Sizes
Font Settings
Simply click the Export button to generate an export string.
In the Import Fonts section, you can paste an export string from another site or backup to import your font settings. This makes it simple to replicate typography settings across multiple sites.
These typography settings give you granular control over how fonts are managed, rendered, and displayed on your site, ensuring a consistent and professional appearance.
