Fonts
The fonts sweetgreen.com uses
sweetgreen.com sets its headlines and body text in SweetSansText. SweetSansText is a licensed font the site serves itself. The closest free match on Google Fonts: Inter.
Measured from sweetgreen.com 32 days ago.
Font families
2 families- Used for
- h1, h2, body, label, button
- Source
- Self-hosted
- Free alternative
- Inter
- Used for
- button
- Source
- Self-hosted
- Free alternative
- Inter
CSS to reproduce it
Font variables with the free stand-in in the stack, so the same CSS works with or without the licensed font.
:root {
--font-heading: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
--font-body: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
--font-button: "Grenette", "Inter", sans-serif; /* Inter stands in for Grenette */
--font-size-base: 18px;
}How the type is set
For AI agents
The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.
curl -s https://stylepack.ai/packs/sweetgreen.com/DESIGN.mdQuestions
What font does sweetgreen.com use?
sweetgreen.com uses SweetSansText, Grenette. Headlines are set in SweetSansText and body text in SweetSansText, measured from the site as it renders, not read from its stylesheet.
Is the sweetgreen.com font free to use?
No. SweetSansText is a licensed font that sweetgreen.com serves itself. The closest free match is Inter, available on Google Fonts. The CSS on this page puts it in the font stack as the stand-in.
How do I get the same typography as sweetgreen.com in my project?
Download the sweetgreen.com design pack from Stylepack: it holds the font stack, the type scale, every text style and the screenshots, in a form an AI coding agent such as Claude Code or Cursor can build from.