How to Embed Bunny Fonts on Your Website

You embed Bunny Fonts by adding a stylesheet link or an @import rule that points to fonts.bunny.net, then referencing the font family in your CSS. The site itself exposes two embed paths — a CSS link and an HTML @import url(https://fonts.bunny.net/css) — and you should pick your fonts and language subsets through the site's filters before copying the snippet, since the exact URL depends on what you selected.

Before you start

Bunny Fonts is a font delivery service positioned around speed and GDPR compliance, so the embed works like a typical hosted-font stylesheet: your page requests CSS from their domain, and that CSS points to the actual font files. You don't self-host anything.

What you need:

• Edit access to your site's HTML <head> or your CSS file.
• The font family names you want, chosen from the Bunny Fonts catalog.
• The language subsets you actually need (Latin, Cyrillic, Greek, Vietnamese, and others are listed as filters).

Step 1: Pick fonts and subsets with the filters

On the Bunny Fonts site, the catalog is filtered by:

• # of Styles — how many weights/styles a family offers.
• Category — Serif, Sans-Serif, Display, Handwriting, Monospace.
• Language (subset) — Arabic, Bengali, Chinese (Simplified/Hong Kong/Traditional), Cyrillic, Cyrillic Extended, Devanagari, Greek, Greek Extended, Gujarati, Gurmukhi, Hebrew, Japanese, Kannada, Khmer, Korean, Latin, Latin Extended, Malayalam, Myanmar, Oriya, Sinhala, Tamil, Telugu, Thai, Tibetan, Vietnamese.

There's also a search box, a sample-text preview with symbols, sentences, and alphabets, and a font-size control (shown at 30 px) so you can judge rendering before committing.

Filtering first matters because the subset you choose changes what the stylesheet serves. Requesting only Latin when your page is Latin keeps the payload smaller than pulling every subset.

Step 2: Choose your embed method

Bunny Fonts presents two options, labeled CSS and HTML.

Method A — CSS link (recommended for most sites)

Add a <link> element in your document <head>:

<link rel="stylesheet" href="https://fonts.bunny.net/css?family=your-font">

Then use the family in your stylesheet:

body {
  font-family: 'Your Font', sans-serif;
}

Input: the stylesheet URL for your chosen family and weights. Action: the browser fetches that CSS, which in turn declares @font-face rules. Expected result: the family becomes available to your CSS, and text renders in it once the font files load.

Method B — HTML @import

If you can't add a <link> (for example, you only control a CSS file), use the import form shown on the site:

@import url(https://fonts.bunny.net/css);

Place it at the very top of your CSS file, before any other rules — @import must come first or browsers ignore it.

Trade-off: @import inside CSS blocks rendering slightly later than a <link> in the head, because the browser has to download and parse the CSS before it discovers the import. Prefer the <link> method when you have a choice.

Step 3: Verify the exact snippet before deploying

The base URL https://fonts.bunny.net/css is the entry point, but the full URL — including family= parameters and any subset or weight qualifiers — is generated by the site based on your filter selections. Copy the snippet the site gives you rather than hand-writing the query string.

To verify it works:

1. Paste the stylesheet URL directly into a browser tab. You should get CSS back containing @font-face blocks, not an error page.
2. Load your page and check the rendered text against the sample preview you saw on the site.
3. Open DevTools → Network, filter by "font", and confirm the font files load with a 200 status.

Common snags

• @import ignored. It isn't the first rule in the file, or it sits after other declarations.
• Font not applying. The font-family name in your CSS doesn't match the family name in the served stylesheet, or a fallback is winning due to a more specific selector.
• Wrong characters rendering. You filtered for a subset that doesn't cover your content — add the relevant language subset and re-copy the snippet.
• Flash of unstyled text. Expected with any hosted font; the browser swaps in the font once it loads.

Choosing between the two methods

If you can edit the HTML head, use the link. Reach for @import only when that's your only option.