Fonts

Key Takeaways

  • The Compass theme uses Font Awesome (Sharp → Solid) for icons to ensure clarity and readability.
  • Configure icons using a Font Awesome Kit ID in Site Settings.
  • Fonts can be customized by:
  1. Adding embed code (e.g., Google Fonts) in Site Settings.
  2. Linking fonts in Theme → Typography settings.
  • Typography settings allow control over:
  1. Font families (heading, body, accent, mono)
  2. Font weights, sizes, and scaling
  3. Line height and spacing
  • The theme uses responsive font scaling based on screen size.

Best Practices

  • Use Sharp Solid icons for better visibility and usability, especially in navigation.
  • Ensure your Font Awesome kit is properly configured (correct styles, domains, and compatibility enabled).
  • Replace any default/shared kit ID with your own kit ID.
  • When using custom fonts:
  1. Add the embed code first, then connect it in Typography settings.
  2. Follow the exact font-family syntax provided by the font source.
  • Keep font adjustments simple—start with defaults and make small changes.
  • Adjust base font size first before modifying individual heading sizes.
  • Maintain clear contrast between heading levels when scaling fonts.
  • Use line height ≥ 1.5 for body text to support readability and accessibility.
  • Optimize for performance—avoid loading unnecessary fonts or styles.
Top