CodeSnap

Font Configuration

Learn how to configure fonts in your application

Font Configuration

Learn how to configure fonts in your application.

Font Options

Font Family

const fontConfig = {
  family: {
    primary: 'Inter',
    secondary: 'Roboto Mono',
    fallback: 'system-ui'
  }
}

Font Sizes

const fontSizeConfig = {
  base: '16px',
  scale: {
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem'
  }
}

Font Properties

PropertyTypeDescription
familystringFont family name
sizestringFont size
weightnumberFont weight (100-900)
lineHeightnumberLine height multiplier

Usage Example

import { FontProvider } from '@your-package-name'
 
function App() {
  return (
    <FontProvider config={fontConfig}>
      <YourApp />
    </FontProvider>
  )
}

Best Practices

  1. Use system fonts as fallbacks
  2. Consider loading performance
  3. Maintain consistent font scales
  4. Test across different devices

On this page