Website fonts
Pick a font for headings and one for text, and see them on a sample website. Type your name to try it in every font, then copy the code for your site. All 100 fonts are free for any use.
Brand studio
Colour that tells your story.
We help small brands find a look people remember, from the first sketch to the sign above the door.
Start a project See our work
Logos
Marks that work at any size, on any screen.
Learn more →Packaging
Boxes, bags and labels that stand out on the shelf.
Learn more →Websites
Fast, friendly sites that sound like you.
Learn more →120+
brands launched since 2015
Add them to your site
Paste this into the <head> of your pages, or into your site builder’s custom code box:
Then use the fonts in your CSS:
Sans serif fonts
Inter
Inter Sans serif · regular and bold
Roboto
Roboto Sans serif · regular and bold
Open Sans
Open Sans Sans serif · regular and bold
Lato
Lato Sans serif · regular and bold
Montserrat
Montserrat Sans serif · regular and bold
Poppins
Poppins Sans serif · regular and bold
Nunito
Nunito Sans serif · regular and bold
Raleway
Raleway Sans serif · regular and bold
Work Sans
Work Sans Sans serif · regular and bold
DM Sans
DM Sans Sans serif · regular and bold
Manrope
Manrope Sans serif · regular and bold
Source Sans 3
Source Sans 3 Sans serif · regular and bold
Outfit
Outfit Sans serif · regular and bold
Rubik
Rubik Sans serif · regular and bold
Noto Sans
Noto Sans Sans serif · regular and bold
Plus Jakarta Sans
Plus Jakarta Sans Sans serif · regular and bold
Figtree
Figtree Sans serif · regular and bold
Mulish
Mulish Sans serif · regular and bold
Karla
Karla Sans serif · regular and bold
Barlow
Barlow Sans serif · regular and bold
Quicksand
Quicksand Sans serif · regular and bold
Josefin Sans
Josefin Sans Sans serif · regular and bold
Nunito Sans
Nunito Sans Sans serif · regular and bold
IBM Plex Sans
IBM Plex Sans Sans serif · regular and bold
Space Grotesk
Space Grotesk Sans serif · regular and bold
Lexend
Lexend Sans serif · regular and bold
Urbanist
Urbanist Sans serif · regular and bold
Sora
Sora Sans serif · regular and bold
Archivo
Archivo Sans serif · regular and bold
Kanit
Kanit Sans serif · regular and bold
Cabin
Cabin Sans serif · regular and bold
Fira Sans
Fira Sans Sans serif · regular and bold
Public Sans
Public Sans Sans serif · regular and bold
Red Hat Display
Red Hat Display Sans serif · regular and bold
Bricolage Grotesque
Bricolage Grotesque Sans serif · regular and bold
Serif fonts
Playfair Display
Playfair Display Serif · regular and bold
Merriweather
Merriweather Serif · regular and bold
Lora
Lora Serif · regular and bold
Libre Baskerville
Libre Baskerville Serif · regular and bold
EB Garamond
EB Garamond Serif · regular and bold
Cormorant Garamond
Cormorant Garamond Serif · regular and bold
DM Serif Display
DM Serif Display Serif · one weight
Fraunces
Fraunces Serif · regular and bold
Instrument Serif
Instrument Serif Serif · one weight
Source Serif 4
Source Serif 4 Serif · regular and bold
Crimson Text
Crimson Text Serif · regular and bold
Libre Caslon Text
Libre Caslon Text Serif · regular and bold
Noto Serif
Noto Serif Serif · regular and bold
PT Serif
PT Serif Serif · regular and bold
Spectral
Spectral Serif · regular and bold
Bitter
Bitter Serif · regular and bold
Zilla Slab
Zilla Slab Serif · regular and bold
Roboto Slab
Roboto Slab Serif · regular and bold
Cardo
Cardo Serif · regular and bold
Prata
Prata Serif · one weight
Gloock
Gloock Serif · one weight
Young Serif
Young Serif Serif · one weight
DM Serif Text
DM Serif Text Serif · one weight
Cormorant
Cormorant Serif · regular and bold
Display fonts
Bebas Neue
Bebas Neue Display · one weight
Oswald
Oswald Display · regular and bold
Archivo Black
Archivo Black Display · one weight
Abril Fatface
Abril Fatface Display · one weight
Anton
Anton Display · one weight
Righteous
Righteous Display · one weight
Alfa Slab One
Alfa Slab One Display · one weight
Bungee
Bungee Display · one weight
Lilita One
Lilita One Display · one weight
Ultra
Ultra Display · one weight
Shrikhand
Shrikhand Display · one weight
Fredoka
Fredoka Display · regular and bold
Syne
Syne Display · regular and bold
Unbounded
Unbounded Display · regular and bold
Rubik Mono One
Rubik Mono One Display · one weight
Monoton
Monoton Display · one weight
Bowlby One
Bowlby One Display · one weight
Handwriting fonts
Pacifico
Pacifico Handwriting · one weight
Dancing Script
Dancing Script Handwriting · regular and bold
Caveat
Caveat Handwriting · regular and bold
Lobster
Lobster Handwriting · one weight
Great Vibes
Great Vibes Handwriting · one weight
Satisfy
Satisfy Handwriting · one weight
Sacramento
Sacramento Handwriting · one weight
Kaushan Script
Kaushan Script Handwriting · one weight
Permanent Marker
Permanent Marker Handwriting · one weight
Shadows Into Light
Shadows Into Light Handwriting · one weight
Indie Flower
Indie Flower Handwriting · one weight
Amatic SC
Amatic SC Handwriting · regular and bold
Homemade Apple
Homemade Apple Handwriting · one weight
Yellowtail
Yellowtail Handwriting · one weight
Allura
Allura Handwriting · one weight
Monospace fonts
JetBrains Mono
JetBrains Mono Monospace · regular and bold
Space Mono
Space Mono Monospace · regular and bold
IBM Plex Mono
IBM Plex Mono Monospace · regular and bold
Fira Code
Fira Code Monospace · regular and bold
Roboto Mono
Roboto Mono Monospace · regular and bold
Source Code Pro
Source Code Pro Monospace · regular and bold
DM Mono
DM Mono Monospace · one weight
Inconsolata
Inconsolata Monospace · regular and bold
Courier Prime
Courier Prime Monospace · regular and bold
Every font here is from Google Fonts and free under the SIL Open Font License or the Apache 2.0 licence, for personal and commercial use, on websites, in logos and in print. The code above loads them from Google; to host them yourself, download them from each font’s Google Fonts page. Good pairings usually mix a serif with a sans serif, or use one family in two weights. Pick colours to go with them in the palette visualiser.
How to pair fonts
Most good websites use two fonts: one with character for headings and a plain, readable one for body text. The easiest way to pair them is contrast: a serif heading with a sans-serif body (Playfair Display with Source Sans 3), or a bold display face with a quiet sans (Bebas Neue with Open Sans). Fonts from the same designer or family, like DM Serif Display and DM Sans, are a safe match. One family in two weights, such as Poppins bold and regular, also works and keeps things simple.
Avoid pairing two fonts that are similar but not the same, such as two geometric sans serifs: they look like a mistake. Save handwriting and display fonts for headings and logos, never long text.
How to add Google Fonts to your website
Copy the HTML above into the <head> of your pages. On WordPress, Squarespace, Wix and most other builders, there is a custom code or header code setting, and many let you pick Google Fonts by name too. Then copy the CSS to apply the fonts. To load them faster and avoid sending visitors’ details to Google, download the fonts and host them yourself.
Frequently asked questions
Are these fonts free for commercial use?
Yes. Every font here is free under the SIL Open Font License or the Apache 2.0 licence, for websites, logos, print and products you sell.
What is the best font for a website?
For body text, a clear sans serif such as Inter, Source Sans 3, Lato or Open Sans, or a sturdy serif like Merriweather or Source Serif 4. Use at least 16px and a line height around 1.5.
Which fonts are good for logos?
Display and bold serif fonts make strong wordmarks: try Abril Fatface, DM Serif Display, Bebas Neue or Archivo Black, then build the logo in our free logo maker.