Fontlog
All typefaces

Funnel Sans

by Julieta Ulanovsky · 2024 · variable

A contemporary neo-grotesque from the designer of Montserrat — soft, clear and quietly versatile. It's the face this site is set in.

Preview

Pair it with another font →

Funnel Sans is the text companion to Funnel Display, both drawn by Julieta Ulanovsky — the designer behind Montserrat and Archivo — and released through Google Fonts in 2024. It’s what Fontlog itself is set in, so I’ve been staring at it for a while. Soft, slightly rounded terminals keep it warm at UI sizes without looking childish, the 300–800 range covers most needs, and there’s a real italic.

It’s newer and less battle-tested than something like Inter, so language coverage and hinting on Windows are worth checking for a text-heavy build. Reach for the more eccentric Funnel Display when you want headlines with more attitude than the Sans gives you.

Best for

Where Funnel Sans earns its place — and why. My opinion, not a rule.

Get it

Pick the one that fits your setup. Self-hosting is best for production; the CDN link is quickest to try.

npm (Fontsource) bash 
pnpm add @fontsource-variable/funnel-sans
# npm install @fontsource-variable/funnel-sans
# yarn add @fontsource-variable/funnel-sans
Import & use ts 
import '@fontsource-variable/funnel-sans';

/* then, in your CSS */
font-family: 'Funnel Sans Variable', sans-serif;

Fontsource appends “Variable” to the family name for variable fonts — use “Funnel Sans Variable”, not “Funnel Sans”.

next/font tsx 
import { Funnel_Sans } from 'next/font/google';

const funnelSans = Funnel_Sans({
  subsets: ['latin'],
  display: 'swap',
  axes: [],
});

// <body className={funnelSans.className}>

Self-hosted and optimised at build time — no network request to Google.

Google Fonts (CDN) html 
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap"
  rel="stylesheet"
/>

/* CSS */
font-family: 'Funnel Sans', sans-serif;

Quickest to paste in, but adds a third-party request. Prefer self-hosting for production.

Self-host css 
/* Download the OFL-1.1 files from the source below, then: */
@font-face {
  font-family: 'Funnel Sans';
  src: url('/fonts/funnel-sans.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

Files: https://github.com/google/fonts/tree/main/ofl/funnelsans

AI / agent prompt prompt 
Add the "Funnel Sans" font to this project.

- CSS family name once loaded: 'Funnel Sans Variable'
- Fallback stack: sans-serif
- Variable font. Axes: wght 300–800, ital
- Fontsource package (self-hosted, npm): @fontsource-variable/funnel-sans
- next/font/google export name: Funnel_Sans
- Google Fonts CDN family param: Funnel+Sans:ital,wght@0,300..800;1,300..800
- License: OFL-1.1 — Free for commercial use — self-host, bundle, and modify freely; only selling the font files on their own is prohibited.
- Source: https://github.com/google/fonts/tree/main/ofl/funnelsans

Detect how this project already loads fonts (Fontsource import, next/font, Tailwind @theme, plain @font-face) and follow that pattern. Prefer self-hosting over the Google Fonts CDN link for production.

Paste into Claude Code, Codex, T3 Code, Cursor or similar — it has what an agent needs to wire the font up itself.

Seen on

Real sites using Funnel Sans. Click through to see it live.

If you like this, try

Pairs well with