Fonts

Overview #

The theme settings for fonts are essential for defining the typography across the entire site. These settings ensure a consistent look and feel while allowing for customization at the section or block level. They are applied globally but can be tailored to meet specific design needs.

Key components and functionality #

Fonts

This section manages the typography settings for various text elements throughout the theme. It allows you to select fonts for different text types, ensuring a cohesive visual style.

Body font

This setting allows you to choose the font for the body text across the site. The default font is sans-serif.

Button font

This setting specifies the font used for buttons. The default font is sans-serif.

Caption font

This setting determines the font for captions. The default font is mono.

Card heading font

This setting allows you to select the font for card headings. The default font is sans-serif.

Heading fonts

These settings allow you to choose fonts for various heading levels (H1 to H6). The default font for each heading level is sans-serif.

Custom fonts

Custom fonts can be integrated into the theme using external services or by hosting the font files. This provides additional flexibility in typography choices.

Custom font service

You can integrate custom fonts from services like Google Fonts or Adobe Typekit by entering the provider code.

Hosted fonts

Custom hosted fonts must be provided in .woff or .woff2 file formats. You can specify the hosted font name and URLs for the font files.

Custom font family and weight

For body, button, caption, card, and heading fonts, you can specify custom font families and weights. The weight can range from 100 to 800, with a default of 400.

Custom font style

You can choose between regular and italic styles for custom fonts.

Usage examples #

1. Consistent Typography: Use the global font settings to ensure a consistent typography style across your site. This can enhance readability and create a professional appearance.

2. Custom Branding: Integrate custom fonts to align with your brand's identity. For example, use a unique font for headings to make them stand out and reflect your brand's personality.

3. Responsive Design: Ensure that the chosen fonts are legible on all devices. Test the font sizes and styles on different screen sizes to maintain readability.

By utilizing these font settings, you can create a visually appealing and cohesive design that enhances the user experience on your site.