Fonts

The Ellemment Stack comes with Tailwind CSS's default font configuration. While this provides a solid foundation, you can easily customize fonts to match your brand identity.

Custom Font Implementation

Step 1: Font Files Setup

1. Create font directory:

   mkdir -p ./public/fonts

2. Add font files:

   • Download from Google Fonts
   • Place files in ./public/fonts
   • Generate CSS using Transfonter
   • Set Transfonter's fonts directory to fonts

3. Verify font URLs:

   /* Should be relative to public folder */
   url('/fonts/yourfont/yourfont-200.woff2')
   

Step 2: Configuration Updates

1. CSS Variables:

   /* tailwind.css */
   @layer base {
     :root {
       --font-sans: <YourFont>;
     }
   }
   

2. Tailwind Configuration:

   import defaultTheme from 'tailwindcss/defaultTheme.js'
   // tailwind.config.ts
   extend: {
   ...extendedTheme,
   fontFamily: {
   sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
   }
   }
   

3. Stylesheet Import:

   // app/routes/root.tsx
   import fontStyleSheetUrl from './styles/yourfont.css?url'
   // Add to links array
   { rel: 'preload', href: fontStyleSheetUrl, as: 'style' },
   { rel: 'stylesheet', href: fontStyleSheetUrl },
   

4. Server Configuration:

   // server/index.ts
   app.use(
     '/fonts',
     express.static('public/fonts', { 
       immutable: true, 
       maxAge: '1y' 
     })
   )

Performance Optimization

Font Metric Overrides

Prevent Cumulative Layout Shift (CLS) by implementing font metric overrides:

1. Generate Overrides:

   # For single font file
   npx fontpie ./local/font/location.woff2 -w font-weight -s normal/italic -n YourFont
   ,[object Object],
   npx fontpie-from-css ./public/fonts/yourfont/yourfont.css
   

2. Example Output:

   @font-face {
     font-family: 'CustomFont Fallback';
     font-style: normal;
     font-weight: 200;
     src: local('Arial');
     ascent-override: 103.02%;
     descent-override: 35.97%;
     line-gap-override: 0%;
     size-adjust: 98.13%;
   }
   

3. Implementation:

   • Add overrides to your font stylesheet
   • Include fallback in root configuration:

   /* tailwind.css */
   @layer base {
     :root {
       --font-sans: <YourFont> <YourFontFallback>;
     }
   }
   

Best Practices

1. Font Loading:

   • Use font-display: swap
   • Preload critical fonts
   • Implement metric overrides
   • Consider subsetting for specific character ranges

2. Performance:

   • Compress font files
   • Use modern formats (woff2)
   • Cache fonts aggressively
   • Load only necessary weights/styles

3. Accessibility:

   • Ensure readable fallback fonts
   • Maintain sufficient contrast ratios
   • Consider font size adjustments
   • Test with screen readers

Troubleshooting

Common issues and solutions:

1. Layout Shift:

   • Verify metric overrides implementation
   • Check fallback font configuration
   • Monitor CLS in performance tools

2. Font Loading:

   • Confirm file paths
   • Check CORS configuration
   • Verify preload implementation
   • Monitor network requests

3. Font Display:

   • Test across browsers
   • Verify CSS syntax
   • Check font-family order
   • Confirm weight/style declarations

For more performance considerations, check the performance guide.