The best fonts for websites are readable at small sizes, load fast and suit the brand: Inter or Geist for product sites, Source Serif 4 or Newsreader for reading, Rubik or Nunito for local businesses. Here are 30 free Google Fonts shown live, with licences, variable axes and copy-paste CSS.
These are 30 free fonts from Google Fonts that hold up on real websites, sorted by the job they do best. Each one is shown below in a heading, a paragraph and a button, with its licence, whether it is a variable font, the weights it ships, a fallback stack and a copy-ready snippet. The details were checked against the Google Fonts catalog and the licence files in the Google Fonts repository in October 2026.
Type below to replace the sample text in every preview on this page. The fonts load from Google Fonts when you open this section; until then each preview shows its fallback stack, which is also what visitors see for a moment while a web font downloads.
All 30 are released under the SIL Open Font License 1.1, which allows commercial use, embedding on websites and self-hosting, and lets you modify the fonts as long as you do not sell the font files on their own or reuse the reserved font names for modified versions. A small number of Google Fonts families use other open licences: some are under the Apache License 2.0 (for example Permanent Marker and Special Elite) and the Ubuntu family uses the Ubuntu Font Licence. Always check the licence shown on a family's page on fonts.google.com before you ship it.
Showing all 30
SaaS and product interfaces
Product sites and app screens need type that stays clear at 13 to 16 pixels, has tabular numbers for prices and tables, and comes in enough weights for buttons, labels and headings.
Inter
Sans Serif · Rasmus Andersson
Inter sets this headline
A neutral sans with a tall x-height; holds up in dense dashboards, tables and settings screens. Its optical size axis adjusts letter shapes for large headings.
Start free trial
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Engineered and a little mechanical, with distinctive details. Fits technical, B2B and enterprise products; the wider Plex family adds matching serif and mono styles.
Start free trial
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Serif and text faces for articles, newsletters and publishers. Look for comfortable body sizes, real italics and a clear difference between heading and text weights.
Merriweather
Serif · Sorkin Type
Merriweather sets this headline
Sturdy serif with a large x-height that reads well on screens. Now variable, including width and optical size axes.
Read the issue
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Best for
Editorial, blogs and long reading
Variable
Yes: optical size 18 to 144, width 87 to 112, weight 300 to 900
For restaurants, salons, trades and shops: legible from a phone at arm's length, warm without being childish, and bold enough for a phone-number button.
Poppins
Sans Serif · Indian Type Foundry, Jonny Pinhorn, Ninad Kale
Poppins sets this headline
Geometric sans with near-circular rounds. Very common on small business sites; bold weights make clear buttons and prices. Static files only, so load just the weights you use.
Book a visit
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Best for
Local business and friendly brands
Variable
No (static files)
Weights
100 to 900 (100, 200, 300, 400, 500, 600, 700, 800, 900), with italics
A grotesque loosely based on early English and German styles. Its middle weights are tuned for screen text at medium sizes and its extreme weights for display, which makes it a good all-rounder for service businesses.
Book a visit
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Families with broad language support and very wide familiarity. Choose these when the site must cover many languages or when neutrality matters more than character.
Roboto
Sans Serif · Christian Robertson, ParaType, Font Bureau
Roboto sets this headline
Long the system font on Android, and a neutral grotesque; safe for apps and forms. Variable with weight and width axes.
Continue
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Specialist families: condensed display faces for impact and a monospace for code samples and technical details.
Oswald
Sans Serif · Vernon Adams, Kalapi Gajjar, Cyreal
Oswald sets this headline
A condensed sans reworked from classic gothic styles. Fits a lot of words into one headline line; for posters, sports, events and menus, not body text.
Get tickets
Licence
SIL Open Font License 1.1 (free for commercial use, including self-hosting)
Put these lines in the <head> of your page, before your own stylesheet. The two preconnect hints let the browser open connections to the stylesheet host and the font file host early; the font files are served from a different domain and are fetched in CORS mode, which is why the second hint has crossorigin.
family=Inter:[email protected] requests a weight range from a variable font. Narrow the range to what you use; the browser still downloads one file per subset.
family=Lato:wght@400;700 requests two specific static weights. For static families, every weight you list is another file.
ital,wght@0,400..700;1,400..700 adds the italic styles. Axis names go in alphabetical order, lowercase before uppercase.
Repeat family= to load several families in one request.
display=swap sets font-display: swap in the returned @font-face rules, so text shows immediately in the fallback font and switches when the web font arrives, instead of staying invisible.
text=Hello returns a file containing only those characters, which is useful for a logo word set in a font you use nowhere else.
font-display options
Value
What visitors see
Use it for
swap
Fallback text right away, swapped for the web font whenever it loads
Most body and heading text
optional
The web font only if it is ready almost immediately; otherwise the fallback for this page view
Sites where avoiding layout shift matters more than the exact font
fallback
A very short invisible period, then fallback, with a limited window to swap
A middle ground between the two
block
Invisible text for a short time while the font loads
Icon fonts, where fallback glyphs would be wrong
Self-hosting
Because these fonts are open-licensed, you can serve the files from your own domain instead of Google's. Reasons people do it: one fewer third-party connection, full control over caching, and privacy, since requests to Google's servers send the visitor's IP address to Google, which some European site owners avoid. Ways to do it:
Download the family from its page on fonts.google.com, convert or keep the WOFF2 files, and write your own @font-face rules.
In a JavaScript project, install the family from Fontsource (for example npm install @fontsource-variable/inter) and import it in your entry file.
Next.js projects can use next/font/google, which downloads the files at build time and serves them from your own domain.
When self-hosting, preload only the one file your above-the-fold text needs, with <link rel="preload" href="/fonts/inter-latin-var.woff2" as="font" type="font/woff2" crossorigin>. Preloading several fonts makes them compete with your images and scripts.
Variable font notes
A variable font is a single file that contains a continuous range along one or more axes, instead of one file per weight. 28 of the 30 fonts here are variable; Poppins and Lato are static.
Weight (wght) is controlled with the normal font-weight property, and any number in the range works: font-weight: 650 is valid.
Width (wdth), offered here by Roboto, Open Sans, IBM Plex Sans, Noto Sans, Archivo and Merriweather, maps to font-stretch as a percentage, for example font-stretch: 85%.
Optical size (opsz), in Inter, DM Sans, Source Serif 4, Newsreader, Merriweather and Fraunces, adjusts letter shapes for the size they are set at. Browsers apply it automatically from the font size because font-optical-sizing defaults to auto. Request the axis in the URL (for example family=Inter:opsz,[email protected],100..900) to get it.
Custom axes such as Fraunces' SOFT and WONK are set with font-variation-settings: "SOFT" 100, "WONK" 1;. Use the standard properties for weight, width and slant instead of this property where they exist, because font-variation-settings values do not combine across rules.
A variable file is larger than any single static weight. It pays off once you use about three or more weights, and when you want in-between weights for fine tuning.
"Web-safe" fonts are the ones installed on almost every Windows and Mac computer, so they need no download. They are not guaranteed on Android, Linux or every iPhone, which is why a font stack always ends with a generic family such as sans-serif or serif.
Font
Type
Notes
Arial
Sans
On Windows and macOS. Not part of Android, which uses its own sans instead.
Helvetica
Sans
On Apple devices. Windows has no Helvetica, so the next font in the stack is used.
Verdana
Sans
Very wide and readable at small sizes; on Windows and macOS.
Tahoma
Sans
A narrower relative of Verdana; on Windows and macOS.
Trebuchet MS
Sans
Humanist sans on Windows and macOS.
Georgia
Serif
A serif designed for screens; on Windows and macOS.
Times New Roman
Serif
Narrow and dated on screen; mostly useful as a last fallback.
Courier New
Mono
Thin strokes; prefer a modern monospace stack below.
A system font stack goes further and uses each operating system's own interface font: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android and usually Noto or another default on Linux. It costs nothing to load and looks native. These are the stacks we recommend at the time of writing:
system-ui is supported by all current major browsers. -apple-system and BlinkMacSystemFont only help older browsers on Apple devices and can be dropped if you do not support them. ui-serif and ui-monospace are not recognized by every browser, which is why each stack continues with named fonts. The emoji fonts sit at the end so emoji characters render in color.
This paragraph is set in the system sans stack, so it shows your own device's interface font.
Performance notes
Use fewer families and weights. Each static weight, each italic and each extra family is another file. Two families, or one variable family plus its italic, cover most sites.
Prefer WOFF2. It is the most compressed web font format and every current browser supports it. Google Fonts serves it automatically.
Subset by language. The Google Fonts stylesheet already splits each family into subsets with unicode-range, so a page in English only downloads the Latin file. Do the same when self-hosting.
Reduce layout shift on swap. If the fallback and the web font have different widths, text reflows when the font arrives. Choose a fallback with similar proportions, or adjust it with size-adjust, ascent-override and descent-override in a fallback @font-face. next/font and some build tools generate these values for you.
Do not hide text. Without font-display: swap or optional, browsers may show no text for a short period while fonts download, which delays when the page can be read.
Measure, do not guess. Run your page through a lab test before and after changing fonts. Our guide to PageSpeed Insights explains which numbers fonts affect.
Font pairing suggestions
Pair fonts that differ clearly (a serif with a sans, or a wide display face with a plain text face) and share something, such as a similar x-height or mood. Limit yourself to two families. These combinations use only fonts from this page:
Headings
Body
Why it works
Good for
Fraunces
Inter
A soft, characterful serif against a neutral sans
Food, lifestyle, craft brands
Playfair Display
Source Sans 3
High-contrast headlines with a quiet, open text face
Boutiques, hotels, events
Space Grotesk
IBM Plex Sans
Both technical in tone, but the heading has more personality
Developer tools, B2B tech
Montserrat
Merriweather
Wide geometric sans over a sturdy reading serif
Blogs, nonprofits
Oswald
Lato
Condensed impact headings with a warm body font
Gyms, sports, trades
Newsreader
Newsreader
One family using optical sizes for both roles
Newsletters, magazines
Plus Jakarta Sans
Plus Jakarta Sans
A single sans with weight contrast only, simple and consistent
There is no single best font, but Inter, Source Sans 3 and Open Sans are dependable choices for body text because they stay clear at small sizes. For headings, pick something with more character that suits the brand, such as Playfair Display, Fraunces or Space Grotesk.
Are Google Fonts free for commercial use?
Yes. Every family on Google Fonts is under an open licence, mostly the SIL Open Font License 1.1, with some under Apache License 2.0 and the Ubuntu Font Licence. All three allow commercial use on websites, in apps and in print. Check the licence on each family's page before you use it.
How many fonts should a website use?
Usually one or two families. A common setup is one for headings and one for body text, or a single family using different weights for both. Each extra family and weight adds files the browser has to download.
What is a variable font?
A variable font is one font file that contains a continuous range of styles along axes such as weight, width or optical size. Instead of loading separate files for regular, medium and bold, you load one file and can use any weight in its range.
What are web-safe fonts?
Fonts that are already installed on almost all Windows and Mac computers, such as Arial, Verdana, Georgia and Times New Roman, so they need no download. They are not guaranteed on every phone or Linux system, so always end a font stack with a generic family like sans-serif.
Should I self-host Google Fonts?
You can, since the licences allow it. Self-hosting removes a connection to a third-party domain, gives you control of caching and keeps visitor IP addresses away from Google. Loading from Google Fonts is simpler and handles subsetting for you. Either way, use WOFF2 and font-display: swap.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.
Product
AI Website Builder: Describe a site in plain English; it's live in minutes