Documentation
Start typing to search…

Custom Fonts

Transform your app's typography by adding custom fonts that align with your brand identity. Knack supports custom fonts through Font Style Sheet URLs, giving you the flexibility to use any web font service or self-hosted font files.

Understanding Font Style Sheet URLs

A Font Style Sheet URL is a web address that points to a CSS file containing font definitions. When you add this URL to your Knack app, it loads the specified fonts and makes them available for use in your theme.

A common source for Font Style Sheet URLs is Google Fonts, which provides free, web-optimized fonts with reliable hosting. Other font services like Adobe Fonts, Typekit, or self-hosted solutions can also provide compatible URLs.

Creating a Font Style Sheet URL

Using Google Fonts

Google Fonts is a straightforward way to add custom fonts to your Knack app. Here's how to create a proper Font Style Sheet URL:

  1. Visit Google Fonts at fonts.google.com
  2. Browse and select your desired font by clicking on it
  3. Choose your font weight - Select only one weight at a time (e.g., 400 for regular, 700 for bold)
  4. Click "Get font" to add it to your selection
  5. Click "Get embed code" in the top-right corner
  6. Copy only the URL portion (not the entire HTML tag)

Important Limitation: Knack only supports one font weight per Font Style Sheet URL. If you need multiple weights (like both regular and bold), you must choose one weight for your theme. However, you can have as many themes as you'd like.


Example Font Style Sheet URLs

Here are properly formatted examples:

  • Regular weight (400): https://fonts.googleapis.com/css2?family=Spectral:wght@400&display=swap
  • Bold weight (700): https://fonts.googleapis.com/css2?family=Spectral:wght@700&display=swap
  • Light weight (300): https://fonts.googleapis.com/css2?family=Spectral:wght@300&display=swap

Using Other Font Services

If you're using Adobe Fonts, Typekit, or another service:

  1. Follow your font service's instructions to generate an embed code
  2. Look for the CSS link or @import URL in the provided code
  3. Copy only the URL portion (not the entire HTML tag)
  4. Ensure the URL starts with https:// for security compatibility

Self-Hosted Fonts

For self-hosted fonts, you'll need to:

  1. Upload your font files to a web server
  2. Create a CSS file that defines the @font-face rules
  3. Host the CSS file on the same server
  4. Use the CSS file's URL as your Font Style Sheet URL

Adding Custom Fonts to Your Theme

Once you have your Font Style Sheet URL, follow these steps to add it to your Knack app:

  1. Open your Knack Builder
  2. Navigate to Themes in the left sidebar
  3. Select "My Custom Theme" to open Theme Settings
  4. Click on the "Styles" tab if not already selected
  5. Expand the "Font Section" in the left panel
  6. Locate the "Font Family Selection" area
  7. Enter your Font Style Sheet URL in the custom font field
  8. Preview your changesin the Fonts Preview and use Quick View to see how your custom font appears throughout your application.

Testing Your Custom Font

  1. Click "Quick View" to open a preview of your app
  2. Navigate through different pages to see the font in various contexts
  3. Check text readability across different content types
  4. Verify the font loads properly on different devices and browsers
  5. Return to Theme Settings to make adjustments if needed or Save

Troubleshooting Common Issues

Font Not Appearing

If your custom font isn't showing up:

  • Check that your URL is correct and accessible
  • Ensure the URL starts with https:// for security
  • Ensure the Font Name field matches the font name in the URL
  • Test the URL directly in your browser to confirm it loads

Multiple Font Weights Not Working

Knack does not support multiple font weights in a single Font Style Sheet URL. If you specify multiple weights (like wght@400;700), only one weight will be available. Choose the single weight that best fits your design needs.

Best Practices

Font Selection

  • Choose web-safe fonts that load quickly and reliably
  • Test readability across different screen sizes and devices
  • Consider your brand identity when selecting fonts

Performance Considerations

  • Use established font services like Google Fonts for reliability
  • Test on mobile devices to ensure good performance
  • Choose fonts with good browser support

Accessibility

  • Ensure sufficient contrast between text and background colors
  • Test readability at different font sizes
  • Choose fonts that are clear and easy to read
💡

Remember that typography is a key element of your app's visual identity! Take time to test your custom font thoroughly across different pages and user scenarios to ensure it enhances rather than hinders the user experience.

Updated 2 days ago