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 #
-
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.
-
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.
-
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.
Align v1.7 is out now! Learn more about our best release yet →