Skip to main content

​
Overview

The Sunflower Capital website uses two custom font families to create a distinctive typographic hierarchy:
  • Arya - Used for headings and display text
  • Bitter - Used for body text and readable content
Both fonts are loaded locally from the /public/fonts directory and configured via CSS @font-face declarations.

​
Font Loading

Font faces are defined in src/app/globals.css using the @layer base directive:
globals.css
@layer base {
  @font-face {
    font-family: 'Arya';
    src: url('/fonts/Arya/Arya-Regular.ttf') format('truetype');
    font-weight: 400;
  }
  @font-face {
    font-family: 'Arya';
    src: url('/fonts/Arya/Arya-Bold.ttf') format('truetype');
    font-weight: 700;
  }
  @font-face {
    font-family: 'Bitter';
    src: url('/fonts/Bitter/Bitter-VariableFont_wght.ttf') format('truetype');
  }
  @font-face {
    font-family: 'Bitter-italic';
    src: url('/fonts/Bitter/Bitter-Italic-VariableFont_wght.ttf') format('truetype');
  }
}
Using @layer base ensures font declarations are included in Tailwind’s base layer, loaded before components and utilities.

​
Font Directory Structure

public/
└── fonts/
    ├── Arya/
    │   ├── Arya-Regular.ttf
    │   └── Arya-Bold.ttf
    └── Bitter/
        ├── Bitter-VariableFont_wght.ttf
        └── Bitter-Italic-VariableFont_wght.ttf

​
Tailwind Configuration

The fonts are registered in tailwind.config.ts for use with utility classes:
tailwind.config.ts
fontFamily: {
  'arya': ['Arya', 'system-ui'],
  'bitter': ['Bitter', 'system-ui'],
  'bitter-italic': ['Bitter-italic', 'system-ui']
}
Each font family includes system-ui as a fallback in case the custom font fails to load.

​
Usage

​
Arya Font (Headings)

Use font-arya for headings and display text: 
<h1 className="font-arya text-txl text-offwhite">
  Sunflower Capital
</h1>

​
Bitter Font (Body Text)

Use font-bitter for body text and readable content: 
<p className="font-bitter text-b3xs text-offwhite">
  We invest in companies that align with our values
  and demonstrate sustainable growth potential.
</p>

​
Font Weights

​
Arya

WeightClassValue
Regularfont-normal400
Boldfont-bold700

​
Bitter (Variable Font)

Bitter uses a variable font file, which supports a range of weights: 
<p className="font-bitter font-light">Light weight (300)</p>
<p className="font-bitter font-normal">Normal weight (400)</p>
<p className="font-bitter font-medium">Medium weight (500)</p>
<p className="font-bitter font-semibold">Semibold (600)</p>
<p className="font-bitter font-bold">Bold weight (700)</p>
Variable fonts contain multiple font weights in a single file, allowing you to use any weight value between the minimum and maximum supported range. This reduces the number of font files needed and provides more typographic flexibility.The Bitter variable font likely supports weights from 100-900, though the specific range depends on the font file.

​
Performance Considerations

​
Font Loading Strategy

1

Preload Critical Fonts

Consider preloading fonts used above the fold:
<link rel="preload" href="/fonts/Arya/Arya-Bold.ttf" as="font" type="font/ttf" crossorigin />
2

Font Display Strategy

Add font-display to @font-face declarations:
@font-face {
  font-family: 'Arya';
  src: url('/fonts/Arya/Arya-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap; /* Show fallback immediately */
}
3

Subset Fonts

For production, consider subsetting font files to include only the glyphs you need, reducing file size.

​
Troubleshooting

  1. Verify font files exist in /public/fonts/
  2. Check browser console for 404 errors
  3. Ensure paths in @font-face are correct (relative to /public)
  4. Clear browser cache and hard reload
Use the font-bitter-italic class instead of font-bitter italic:
{/* Correct */}
<em className="font-bitter-italic">Italic text</em>

{/* Won't work as expected */}
<em className="font-bitter italic">Italic text</em>
For Arya, only weights 400 and 700 are loaded. Use font-normal or font-bold.For Bitter, the variable font should support all weights. If not working:
  • Verify the font file is a true variable font
  • Check browser compatibility with variable fonts

​
Adding New Fonts

To add a new custom font:
1

Add font files

Place .ttf, .woff, or .woff2 files in /public/fonts/[font-name]/
2

Add @font-face declarations

In src/app/globals.css:
@layer base {
  @font-face {
    font-family: 'NewFont';
    src: url('/fonts/NewFont/NewFont-Regular.ttf') format('truetype');
    font-weight: 400;
  }
}
3

Register in Tailwind config

In tailwind.config.ts:
fontFamily: {
  'arya': ['Arya', 'system-ui'],
  'bitter': ['Bitter', 'system-ui'],
  'new-font': ['NewFont', 'system-ui'], // Add here
}
4

Use in components

<p className="font-new-font">Text in new font</p>

Tailwind Configuration

Font sizes, colors, and theme customization

Animations

CSS animations and interactive effects

Build docs developers (and LLMs) love

Get started for freeTalk to us