D DesignFonts Open Font Preview

Google Fonts (for reference)

The largest free web font library. Included here as a baseline reference.

Visit library site →

Families we list from this library

These are Google Fonts families we’ve catalogued with samples and CSS snippets.

Inter

Sans · Cyrillic support

font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

Roboto

Sans · Cyrillic support

font-family: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Open Sans

Sans · Cyrillic support

font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

Lato

Sans · Cyrillic support

font-family: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

Montserrat

Sans · Cyrillic support

font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Poppins

Sans · Cyrillic support

font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

Nunito

Sans · Cyrillic support

font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

Source Sans 3

Sans · Cyrillic support

font-family: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700&display=swap');

Work Sans

Sans · Cyrillic support

font-family: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');

Raleway

Sans · Cyrillic support

font-family: 'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

PT Sans

Sans · Cyrillic support

font-family: 'PT Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

PT Serif

Sans · Cyrillic support

font-family: 'PT Serif', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap');

Noto Sans

Sans · Cyrillic support

font-family: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

Noto Serif

Sans · Cyrillic support

font-family: 'Noto Serif', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');

Noto Sans Display

Display · Latin-only

font-family: 'Noto Sans Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@400;700&display=swap');

Noto Serif Display

Display · Latin-only

font-family: 'Noto Serif Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@400;700&display=swap');

Ubuntu

Sans · Cyrillic support

font-family: 'Ubuntu', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

Merriweather

Serif · Latin-only

font-family: 'Merriweather', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

Playfair Display

Display · Latin-only

font-family: 'Playfair Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

Oswald

Display · Cyrillic support

font-family: 'Oswald', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

Roboto Slab

Sans · Cyrillic support

font-family: 'Roboto Slab', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

Roboto Condensed

Sans · Cyrillic support

font-family: 'Roboto Condensed', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

Mulish

Sans · Cyrillic support

font-family: 'Mulish', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap');

Manrope

Sans · Cyrillic support

font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap');

Rubik

Sans · Cyrillic support

font-family: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');

Fira Sans

Sans · Cyrillic support

font-family: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;700&display=swap');

Fira Code

Mono · Latin-only

font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

IBM Plex Sans

Sans · Cyrillic support

font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap');

IBM Plex Serif

Sans · Latin-only

font-family: 'IBM Plex Serif', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;700&display=swap');

IBM Plex Mono

Mono · Latin-only

font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

Karla

Sans · Latin-only

font-family: 'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

Inconsolata

Sans · Latin-only

font-family: 'Inconsolata', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap');

Archivo

Sans · Latin-only

font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap');

Archivo Narrow

Sans · Latin-only

font-family: 'Archivo Narrow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;700&display=swap');

Cabin

Sans · Latin-only

font-family: 'Cabin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap');

Quicksand

Sans · Latin-only

font-family: 'Quicksand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap');

Titillium Web

Sans · Latin-only

font-family: 'Titillium Web', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap');

Hind

Sans · Latin-only

font-family: 'Hind', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;700&display=swap');

Hind Siliguri

Sans · Latin-only

font-family: 'Hind Siliguri', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;700&display=swap');

Mukta

Sans · Latin-only

font-family: 'Mukta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Mukta:wght@400;700&display=swap');

Assistant

Sans · Latin-only

font-family: 'Assistant', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&display=swap');

Heebo

Sans · Latin-only

font-family: 'Heebo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;700&display=swap');

Barlow

Sans · Latin-only

font-family: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;700&display=swap');

Barlow Condensed

Sans · Latin-only

font-family: 'Barlow Condensed', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700&display=swap');

Barlow Semi Condensed

Sans · Latin-only

font-family: 'Barlow Semi Condensed', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;700&display=swap');

Kanit

Sans · Latin-only

font-family: 'Kanit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap');

Teko

Sans · Latin-only

font-family: 'Teko', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;700&display=swap');

Bebas Neue

Display · Latin-only

font-family: 'Bebas Neue', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400;700&display=swap');

Anton

Display · Latin-only

font-family: 'Anton', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Anton:wght@400;700&display=swap');

Pacifico

Hand · Latin-only

font-family: 'Pacifico', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Pacifico:wght@400;700&display=swap');

Dancing Script

Hand · Latin-only

font-family: 'Dancing Script', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');

Roboto Mono

Mono · Cyrillic support

font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

Space Grotesk

Sans · Latin-only

font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

Space Mono

Mono · Latin-only

font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

JetBrains Mono

Mono · Latin-only

font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

DM Sans

Sans · Latin-only

font-family: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');

DM Serif Display

Display · Latin-only

font-family: 'DM Serif Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:wght@400;700&display=swap');

DM Serif Text

Sans · Latin-only

font-family: 'DM Serif Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:wght@400;700&display=swap');

Crimson Text

Serif · Latin-only

font-family: 'Crimson Text', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap');

Crimson Pro

Serif · Latin-only

font-family: 'Crimson Pro', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700&display=swap');

Cormorant Garamond

Serif · Latin-only

font-family: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap');

Cormorant

Sans · Latin-only

font-family: 'Cormorant', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;700&display=swap');

Libre Baskerville

Serif · Latin-only

font-family: 'Libre Baskerville', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');

Libre Franklin

Sans · Latin-only

font-family: 'Libre Franklin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700&display=swap');

Libre Caslon Text

Sans · Latin-only

font-family: 'Libre Caslon Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&display=swap');

Source Serif 4

Sans · Latin-only

font-family: 'Source Serif 4', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap');

Source Code Pro

Mono · Latin-only

font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

CSS: @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

Source Sans Pro

Sans · Latin-only

font-family: 'Source Sans Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');

Spectral

Sans · Latin-only

font-family: 'Spectral', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;700&display=swap');

Zilla Slab

Sans · Latin-only

font-family: 'Zilla Slab', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;700&display=swap');

Alegreya

Sans · Latin-only

font-family: 'Alegreya', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@400;700&display=swap');

Alegreya Sans

Sans · Latin-only

font-family: 'Alegreya Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&display=swap');

Vollkorn

Sans · Latin-only

font-family: 'Vollkorn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;700&display=swap');

Vollkorn SC

Sans · Latin-only

font-family: 'Vollkorn SC', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Vollkorn+SC:wght@400;700&display=swap');

Lora

Sans · Latin-only

font-family: 'Lora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

Figtree

Sans · Latin-only

font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;700&display=swap');

Urbanist

Sans · Latin-only

font-family: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;700&display=swap');

Sora

Sans · Latin-only

font-family: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap');

Plus Jakarta Sans

Sans · Latin-only

font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap');

Outfit

Sans · Latin-only

font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

Lexend

Sans · Latin-only

font-family: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');

Lexend Deca

Sans · Latin-only

font-family: 'Lexend Deca', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;700&display=swap');

Asap

Sans · Latin-only

font-family: 'Asap', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;700&display=swap');

Asap Condensed

Sans · Latin-only

font-family: 'Asap Condensed', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@400;700&display=swap');

Exo 2

Sans · Latin-only

font-family: 'Exo 2', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700&display=swap');

Exo

Sans · Latin-only

font-family: 'Exo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700&display=swap');

Monda

Sans · Latin-only

font-family: 'Monda', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Monda:wght@400;700&display=swap');

Oxygen

Sans · Latin-only

font-family: 'Oxygen', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@400;700&display=swap');

Arimo

Sans · Latin-only

font-family: 'Arimo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');

Tinos

Sans · Latin-only

font-family: 'Tinos', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap');

Cousine

Sans · Latin-only

font-family: 'Cousine', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&display=swap');

Newsreader

Sans · Latin-only

font-family: 'Newsreader', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;700&display=swap');

Public Sans

Sans · Latin-only

font-family: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700&display=swap');

Commissioner

Sans · Latin-only

font-family: 'Commissioner', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@400;700&display=swap');

Literata

Sans · Latin-only

font-family: 'Literata', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Literata:wght@400;700&display=swap');

Khand

Sans · Latin-only

font-family: 'Khand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Khand:wght@400;700&display=swap');

Red Hat Display

Display · Latin-only

font-family: 'Red Hat Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;700&display=swap');

Red Hat Text

Sans · Latin-only

font-family: 'Red Hat Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap');

Inter Tight

Sans · Latin-only

font-family: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');

Instrument Sans

Sans · Latin-only

font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;700&display=swap');

Instrument Serif

Sans · Latin-only

font-family: 'Instrument Serif', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;700&display=swap');

Fraunces

Sans · Latin-only

font-family: 'Fraunces', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700&display=swap');

EB Garamond

Serif · Latin-only

font-family: 'EB Garamond', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap');

Gloock

Serif · Latin-only

font-family: 'Gloock', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Gloock:wght@400;700&display=swap');

Marcellus

Serif · Latin-only

font-family: 'Marcellus', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Marcellus:wght@400;700&display=swap');

Prata

Serif · Latin-only

font-family: 'Prata', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Prata:wght@400;700&display=swap');

Abril Fatface

Display · Latin-only

font-family: 'Abril Fatface', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400;700&display=swap');

Cardo

Serif · Latin-only

font-family: 'Cardo', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');

Cinzel

Display · Latin-only

font-family: 'Cinzel', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

Cinzel Decorative

Sans · Latin-only

font-family: 'Cinzel Decorative', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');

Nanum Gothic

Sans · Latin-only

font-family: 'Nanum Gothic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');

Nanum Myeongjo

Serif · Latin-only

font-family: 'Nanum Myeongjo', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&display=swap');

Prompt

Sans · Latin-only

font-family: 'Prompt', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;700&display=swap');

Chakra Petch

Sans · Latin-only

font-family: 'Chakra Petch', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;700&display=swap');

Rajdhani

Sans · Latin-only

font-family: 'Rajdhani', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;700&display=swap');

Yanone Kaffeesatz

Sans · Latin-only

font-family: 'Yanone Kaffeesatz', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@400;700&display=swap');

Josefin Sans

Sans · Latin-only

font-family: 'Josefin Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

Josefin Slab

Sans · Latin-only

font-family: 'Josefin Slab', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@400;700&display=swap');

Questrial

Sans · Latin-only

font-family: 'Questrial', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Questrial:wght@400;700&display=swap');

Nixie One

Sans · Latin-only

font-family: 'Nixie One', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Nixie+One:wght@400;700&display=swap');

Bad Script

Hand · Latin-only

font-family: 'Bad Script', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Bad+Script:wght@400;700&display=swap');

Caveat

Hand · Latin-only

font-family: 'Caveat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

Patrick Hand

Hand · Latin-only

font-family: 'Patrick Hand', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Patrick+Hand:wght@400;700&display=swap');

Shadows Into Light

Hand · Latin-only

font-family: 'Shadows Into Light', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light:wght@400;700&display=swap');

Permanent Marker

Hand · Latin-only

font-family: 'Permanent Marker', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400;700&display=swap');

Cairo

Sans · Cyrillic support

font-family: 'Cairo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

Tajawal

Sans · Cyrillic support

font-family: 'Tajawal', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

Almarai

Sans · Latin-only

font-family: 'Almarai', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&display=swap');

Amiri

Serif · Cyrillic support

font-family: 'Amiri', ui-serif, Georgia, 'Times New Roman', Times, serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap');

Vazirmatn

Sans · Cyrillic support

font-family: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif

CSS: @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

Usage tips

  • Check licensing carefully for commercial work.
  • Limit weights and subsets to keep CSS payloads small.
  • Prefer self-hosting when you need analytics-friendly, privacy-safe font serving.

Web font loading strategies