How I Load JetBrains Mono and DM Sans from Bunny Fonts Over HTTPS (Weights 400–700)

I’ve been shipping bootstrapped software for a decade, and I’ve learned that typography is either a nuisance or a quiet performance win. For my recent side project, I built a lean UI with JetBrains Mono for code blocks and DM Sans for the interface, loaded over HTTPS from Bunny Fonts. The result was fast to render, visually coherent, and easy to audit in production.

In this post, I’ll walk you through exactly how I set up JetBrains Mono and DM Sans with weights 400 and 700, using a clean font stack and HTTPS delivery. I’ll keep it practical, with real-world code you can copy-paste into a small project and ship today.

Why Bunny Fonts, and why these weights?

For bootstrapped products, I want predictable performance, licensing peace of mind, and a simple integration path. Bunny Fonts (font.bunny.net) gives me:

Open-source fonts with permissive licenses (JetBrains Mono and DM Sans are suitable for web apps).
HTTPS delivery from a fast CDN by default, with a compact CSS snippet.
A simple, predictable weight set you can rely on in production.

I chose JetBrains Mono for code because it’s designed for legibility in source blocks, with clear 400 and 700 weights that map nicely to normal and bold code. I chose DM Sans for UI text (headings, body) because it’s clean, highly legible at small sizes, and pairs well with a monospaced code face.

Weights 400 and 700 give me a strong typographic hierarchy without pulling in extra font files. If you later find you need 500 or 600 for slightly heavier UI text, you can extend the endpoint to include those, but for most apps, 400 and 700 cover the common use cases.

The exact plan: set up a clean, HTTPS-first font stack

What I want:

A minimal HTML/CSS setup that loads fonts over HTTPS from Bunny Fonts.
A font stack that gracefully falls back to system fonts if the network is unavailable.
Code blocks that render in JetBrains Mono, with the rest of the UI in DM Sans.
A good default rendering path that avoids FOUT/FOIT and minimizes CLS.

Key decisions:

Use the CSS2 API endpoint that bundles multiple fonts in a single request.
Include display=swap to ensure text is visible during font loading.
Add preconnect hints and a small CSS-based fallback to keep a pleasant initial render.

Here’s a compact, production-ready setup you can drop into a fresh project.

HTML snippet (head)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Load JetBrains Mono (400, 700) and DM Sans (400, 700) over HTTPS -->
  <link href="https://fonts.bunny.net/css2?family=JetBrains+Mono:wght@400;700&family=DM+Sans:wght@400;700&display=swap" rel="stylesheet" />
  <!-- Optional: hints to help the browser start fetching fonts early -->
  <link rel="preconnect" href="https://fonts.bunny.net" crossorigin />
  <style>
    :root {
      /* UI sans stack includes DM Sans and common fallbacks */
      --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      /* Monospace stack for code blocks (JetBrains Mono) */
      --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    }

    /* Base typography */
    html {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.6;
      color: #111;
      background: #fff;
    }

    /* Code blocks and inline code use the monospaced face */
    code, kbd, pre {
      font-family: var(--font-mono);
    }

    /* Optional: keep headings bold with a clear hierarchy */
    h1, h2, h3 {
      font-weight: 700;
      letter-spacing: .2px;
    }

    /* Small UX niceties */
    p { margin: 0 0 1rem; }
    pre { padding: 1rem; overflow: auto; border-radius: 6px; background: #f6f6f6; }
  </style>
</head>

CSS snippet (typography block)

If you’re wiring this into a framework or a static site generator, you can keep the font rules centralized. This CSS demonstrates the essential setup without relying on additional tooling.

/* fonts.css (optional, if you prefer a dedicated file) */
:root {
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
}
code, pre {
  font-family: var(--font-mono);
}

How it actually looks in practice

I keep the interface typography simple and predictable:

Body text uses DM Sans 400 for regular content and 700 where I want emphasis.
Headings use 700 to create a clean typographic rhythm without juggling font files.
Code blocks render in JetBrains Mono 400 for normal text and 700 when bold code is needed (e.g., highlighting within a snippet).

This approach yields a crisp, readable UI and keeps the font footprint small. The Bunny Fonts CSS endpoint delivers only the weights you request, so you’re not paying for weights you don’t use.

Practical examples you can drop into a real project

A basic page with a few blocks of text and a code example:

<section>
  <h1>Bootstrap typography with Bunny Fonts</h1>
  <p>
    I load JetBrains Mono for code and DM Sans for UI. The path is HTTPS, and I use weights 400 and 700 to create hierarchy.
  </p>

  <pre><code>// Example JS snippet
function hello(name) {
  console.log("Hello, " + name);
}
hello("World");
</code></pre>

  <p>Notice how the code block uses a monospace font, while the body uses a clean sans-serif UI font. This separation improves readability, especially for developers who skim code blocks first.</p>
</section>

A tiny React snippet showing how I’d apply the same approach in a component-based app:

import React from 'react';
import './fonts.css'; // if you extracted font rules to a CSS file

export function PostHeader({ title }) {
  return (
    <header style={{ marginBottom: '1rem' }}>
      <h1 style={{ fontWeight: 700 }}>{title}</h1>
      <p style={{ marginTop: 0, color: '#555' }}>
        Loaded from Bunny Fonts over HTTPS with weights 400 and 700.
      </p>
    </header>
  );
}

If you’d rather inline styles, you can keep the font-family declarations in a top-level CSS module or a CSS-in-JS theme. The important bit is that your font-family stack is coherent across the app and that you’re loading the fonts via the same HTTPS endpoint.

Performance, reliability, and small debugging tricks

Display swap is your friend. The URL includes display=swap, which minimizes the flash of invisible text (FOIT) and reduces layout shifts when fonts finally load.
Preconnect to fonts.bunny.net. The above HTML includes a preconnect hint to speed up DNS resolution and TLS handshake. In a larger app, you might also preconnect to your asset hosts.
Prefer a single, consolidated font load when possible. The CSS2 endpoint lets you request multiple families and weights in one go, which reduces HTTP requests and keeps the critical path lean.
Use a sane fallback stack. If DM Sans isn’t available for any reason, your UI should gracefully fall back to system-ui or another sans-serif family.
For code blocks, ensure a visual separation from the rest of the UI. JetBrains Mono provides good legibility at 400 and bold emphasis at 700, which is enough to make code blocks easy to scan.

In production, I verify that the font files are actually delivered by inspecting the Network tab in Chrome DevTools. I look for:

The fonts.bunny.net CSS file loading (the font families and weights are defined in the CSS2 link).
Font file requests for JetBrains Mono and DM Sans with 400 and 700 weights.
font-display: swap behavior in practice (no long FOUT; text appears quickly with a fallback font and then swaps).

If you’re curious, you can simulate a slower connection with the browser’s network throttling to see how the swap behaves under pressure. For bootstrapped apps, this is a valuable sanity check before you ship.

Common pitfalls and how I avoid them

Pitfall: Loading too many font weights
- Solution: Start with 400 and 700 only. You can always add 500/600 later if you notice a gap in emphasis. The fewer weights, the smaller your font payload and the faster your first paint.
Pitfall: Fonts look different across devices
- Solution: Use a consistent fallback stack and let the browser render with the fonts it can access. If you need pixel-perfect typography, consider a design system with explicit font metrics and responsive typography rules.
Pitfall: Self-hosting vs CDN dependencies
- Solution: For bootstrapped projects, CDN-hosted fonts are usually good enough, and Bunny Fonts is a reliable option. If you hit a reliability issue or need offline access, you can mirror fonts to your own CDN or host within your own domain, but that adds maintenance work.
Pitfall: Accessibility concerns from font choices
- Solution: DM Sans is relatively readable at small sizes, but always pair with accessible sizes, line-height, and color contrast. If you make headings too tight or text too small, users will struggle regardless of the font.

Production mindset: what I actually do in a bootstrapped setup

I keep the font loading logic small and isolated. A tiny fonts CSS import in the main HTML head is enough; I don’t sprinkle font logic throughout the app.
I document the font stack in the project’s design system notes so future me or a contractor can reuse it consistently.
I verify licensing and distribution: JetBrains Mono (MIT-like license with OFL overlap) and DM Sans (open font, permissive license). This matters when you’re shipping a project publicly and want to avoid licensing surprises.
I keep a habit of auditing font usage with Lighthouse or WebPageTest. If LCP suffers, I re-check asset ordering, font-display strategy, and whether I can reduce the number of resources blocking the render.

How this fits into a bootstrapped, sustainable product

Typography is a surprisingly powerful lever for perceived product quality. It’s not just about aesthetics; it affects comprehension, readability, and the user’s sense of trust. Loading JetBrains Mono for code and DM Sans for UI from Bunny Fonts keeps my stack lean, simple, and auditable. It’s HTTPS-first, dependency-light, and easy to reason about in a solo-engineer context.

And yes, this approach aligns with my broader philosophy: profitable, sustainable software built without chasing venture capital. I ship practical tooling with a manual, not a hype cycle. If something fails, I can fix it quickly, because the setup is small, transparent, and well-documented.

Takeaways

Use Bunny Fonts for a clean, HTTPS-delivered font stack with minimal fuss. We’re targeting weights 400–700 for both JetBrains Mono and DM Sans.
Load fonts via a single CSS2 endpoint to minimize HTTP requests and simplify maintenance.
Include display=swap and preconnect hints to optimize perceived performance and avoid layout shifts.
Pair JetBrains Mono for code with DM Sans for UI to achieve a readable, cohesive design system.
Start lean: assume 400 and 700 weights cover 90% of use cases; extend only if you have a clear need.
Keep it honest: document decisions and licenses, so you or a future maintainer can audit or replace fonts without drama.

If you want a quick one-liner to kick off your own project, here’s the essential bite:

HTML head import:
CSS fonts:
- --font-sans: "DM Sans", system-ui, etc.
- --font-mono: "JetBrains Mono", monospace

That’s it: a robust, practical typography setup that you can rely on, day in and day out, as you ship your bootstrapped software.

If you’d like to see more real-world tweaks (like how I integrate this into a Next.js + Tailwind project or how I document typography in a small design system), I’ll happily share a follow-up with concrete, copy-paste-ready configs.

One more note from the Bay Area desk: I use a minimal asset footprint to keep CI/CD feedback fast and predictable. The fewer “moving parts” in your typography stack, the less you have to chase when things change—be it a browser update or a font CDN hiccup. That pragmatism has kept my indie-hacker projects sustainable and profitable without external funding.

If you’ve got your own font-loading tricks or a favorite pair of typefaces for bootstrapped UI, I’d love to hear about them. Reach me on X @fullybootstrap, or drop a comment below. Here’s to fast, accessible, bootstrapped software—and to the tiny details that make it feel professional.