brandsweets

Roboto

sansroboto100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900· Apache-2.0· Christian Robertson, ParaType, Font Bureau
mcpConnect your agent — pair Roboto live
live endpoint

Point any MCP client at the shared fonts endpoint and your agent can search this exact catalog and suggest pairings — list_fonts and suggest_fonts, read-only, no key.

endpointhttps://mcp.brandsweets.com/fonts/mcp
claude mcp add --transport http brandsweets-fonts https://mcp.brandsweets.com/fonts/mcp
try this prompt

›find me a heading font that pairs with Roboto

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.

Pairs well with

Roboto Condensed
sansroboto100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Christian Robertson · Apache-2.0
View specimen →

Same superfamily as Roboto — shared skeleton, natural body pairing.

Open Sans
sans300 · 400 · 500 · 600 · 700 · 800
Steve Matteson · OFL-1.1
View specimen →

fits body; hand-vetted

Inter
sans100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Rasmus Andersson · OFL-1.1
View specimen →

fits body; hand-vetted

Roboto Slab
serifroboto100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Christian Robertson · OFL-1.1
View specimen →

Same superfamily — slab headings over the workhorse sans.

More sans fonts

Open Sans
sans300 · 400 · 500 · 600 · 700 · 800
Steve Matteson · OFL-1.1
View specimen →
Inter
sans100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Rasmus Andersson · OFL-1.1
View specimen →
Montserrat
sans100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly · OFL-1.1
View specimen →
Noto Sans JP
sans100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Google · OFL-1.1
View specimen →
Poppins
sans100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900
Indian Type Foundry, Jonny Pinhorn, Ninad Kale · OFL-1.1
View specimen →
Lato
sans100 · 300 · 400 · 700 · 900
Łukasz Dziedzic · OFL-1.1
View specimen →

Self-host embed

Roboto is free to self-host under Apache-2.0. Drop these @font-face rules into your CSS — the .woff2 files are served straight from BrandSweets.

css
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-100.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-200.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-300.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-600.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-800.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-900.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-100i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-200i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-300i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-500i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-600i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-700i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-800i.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("https://fonts.brandsweets.com/roboto/roboto-900i.woff2") format("woff2");
}

/* Usage */
.heading { font-family: "Roboto", sans-serif; }

License & attribution

License
Apache-2.0
Designed by
Christian Robertson, ParaType, Font Bureau
Weights
100, 200, 300, 400, 500, 600, 700, 800, 900
Languages
cyrillic, cyrillic-ext, greek, greek-ext, latin, latin-ext, math, symbols, vietnamese

Machine-readable: font.md

Build a brand around Roboto

Turn a font choice into a full identity — colors, type roles, logo, and agent-readable tokens your future sessions already know.

Extract a brandDesign one on a canvas