How do I preview a Google Font before using it?

Type the family name as Google Fonts spells it, such as Roboto or Noto Sans. A name may hold letters, digits and single spaces, up to 60 characters. The tool loads the family from Google Fonts and applies it only once the stylesheet and the font file have both loaded. If Google does not serve the name, the status says so and the preview keeps the font it was showing.

How do I add a Google Font to my CSS?

After a Google family is applied, press Show Import in the Google Import CSS block. For Roboto it reads @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap'); followed by the font-family rules. Put the @import at the very top of your stylesheet, or use the same address in a link tag in the page head, which starts the download sooner.

Why does it say the font loaded in regular weight only?

Google’s CSS API takes a weight range only inside the family’s own range, and a family with fewer weights can refuse the 100 to 900 request. The tool then asks again for the plain family, shows it in regular weight and says so; the browser approximates other weights. The output keeps the plain address.

What font weights can I preview?

Whole numbers from 100 to 900, by the slider in steps of 100 or by typing a value such as 450. A value like 950 or an empty box is refused with a message and the last valid weight stays. Whether 450 looks different from 400 depends on the font.

Why does a standard font look different on another computer?

The 16 standard entries are font names your device must have installed, so Garamond or Bookman may be drawn in another font on a system without them. The tool cannot detect that fallback, so test on the devices you care about.

What does this tool send to Google?

The family name you type, as part of the stylesheet address, and your IP address, which any browser request carries. Your sample text is not sent.

CSS Font Preview

Preview a standard font stack or any Google Fonts family at 8 to 120 px with weight, line height and letter spacing, and copy the CSS and @import. How it works

Standard Fonts

Compare with

Shown under the first font with the same size, weight and spacing.

Google Font Name

Font Size (24px)

Font Weight (400)

Line Height (1.5)

Letter Spacing (0em)

Text Transform

Font Style

Preview Text

Preview Background

The quick brown fox jumps over the lazy dog.

CSS

font-family: sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0em;
text-transform: none;

To see two Google families together, try the Font Pair Generator.

Font previews load fonts from Google Fonts (fonts.googleapis.com and fonts.gstatic.com); the font name you type is sent to Google Fonts.

About the CSS Font Preview

Type a Google Fonts family such as Roboto, or pick one of 16 standard font stacks, and your sample text is drawn in it at 8 to 120 px, weight 100 to 900, line height 1 to 3 and letter spacing -0.1 to 0.5 em. The CSS starts as font-family: sans-serif; font-size: 24px; font-weight: 400; line-height: 1.5; letter-spacing: 0em; text-transform: none; and each control changes one line.

The Google Fonts request for a family name

Name typed	First request (weights 100 to 900)	If Google refuses it (regular weight only)
Roboto	https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap	https://fonts.googleapis.com/css2?family=Roboto&display=swap
Noto Sans	https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap	https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap
Roboto Mono	https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap	https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap
Source Sans 3	https://fonts.googleapis.com/css2?family=Source+Sans+3:[email protected]&display=swap	https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap

Spaces in the name are written as +.

What the family and weight boxes accept

Typed	Result
Family: " Open Sans " (extra spaces)	Requested as Open Sans
Family: Roboto & Co	Use only letters, digits and spaces, such as Noto Sans or Roboto Mono.
Family: 61 characters	Use at most 60 characters.
Family: (empty)	Type a Google Fonts family name, such as Roboto.
Weight: 400	Applied as 400
Weight: 950	Enter a weight from 100 to 900.
Weight: 700.5	Enter a whole number from 100 to 900.
Weight: (empty)	Enter a whole number from 100 to 900.

A refused weight is not clamped: the last valid weight stays.

How to use this tool

Pick a standard font from the list, or type a Google Fonts family and wait a moment or press Load.
Set the size, weight, line height and letter spacing, then a text transform and italic if you want them.
Edit the sample text or pick Pangram, Letters + Digits or Symbols, and switch the specimen between a white and a dark page.
To compare, pick a standard stack under Compare with: it is drawn under your font with the same size, weight and spacing.
Copy the CSS. For a Google family, press Show Import under it and copy the snippet that starts with @import.

Frequently asked questions

How do I preview a Google Font before using it?: Type the family name as Google Fonts spells it, such as Roboto or Noto Sans. A name may hold letters, digits and single spaces, up to 60 characters. The tool loads the family from Google Fonts and applies it only once the stylesheet and the font file have both loaded. If Google does not serve the name, the status says so and the preview keeps the font it was showing.
How do I add a Google Font to my CSS?: After a Google family is applied, press Show Import in the Google Import CSS block. For Roboto it reads @import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap'); followed by the font-family rules. Put the @import at the very top of your stylesheet, or use the same address in a link tag in the page head, which starts the download sooner.
Why does it say the font loaded in regular weight only?: Google’s CSS API takes a weight range only inside the family’s own range, and a family with fewer weights can refuse the 100 to 900 request. The tool then asks again for the plain family, shows it in regular weight and says so; the browser approximates other weights. The output keeps the plain address.
What font weights can I preview?: Whole numbers from 100 to 900, by the slider in steps of 100 or by typing a value such as 450. A value like 950 or an empty box is refused with a message and the last valid weight stays. Whether 450 looks different from 400 depends on the font.
Why does a standard font look different on another computer?: The 16 standard entries are font names your device must have installed, so Garamond or Bookman may be drawn in another font on a system without them. The tool cannot detect that fallback, so test on the devices you care about.
What does this tool send to Google?: The family name you type, as part of the stylesheet address, and your IP address, which any browser request carries. Your sample text is not sent.

Network use

Nothing is requested until you type a font name; the tool then loads that font from Google Fonts (fonts.googleapis.com and fonts.gstatic.com), which receives the name you typed and sees your IP address. Privacy policy

Testing a font at real sizes

A body font for a blog wants checking at about 17 px with a 1.6 line height, and a hero heading at 64 px with tight letter spacing, on the words you will really use. Choose one of 16 standard stacks (sans-serif, serif, monospace, Arial, Georgia, Trebuchet MS and others) or type a Google Fonts family such as Roboto or Noto Sans. Set size from 8 to 120 px, weight from 100 to 900, line height from 1 to 3 and letter spacing from -0.1 to 0.5 em, choose a text transform and italic, change the sample text, and view it on a white or a dark page. Compare with draws one of the standard stacks under your font at the same settings, to show the fallback a visitor sees before a Google font loads. The family box suggests 150 popular Google family names from a list stored with the page; any other name can still be typed.

How a Google font is loaded

https://fonts.googleapis.com/css2?family=Noto+Sans:[email protected]&display=swap

That is the request for Noto Sans: spaces become +, and the range asks for every weight from 100 to 900 (Google Fonts CSS API v2). A name may hold letters, digits and single spaces, up to 60 characters; anything else is refused and no request is made. Some families have fewer weights, and if Google refuses the range the tool asks again for the plain family, ...?family=Noto+Sans&display=swap, and says the font loaded in regular weight only.

The family is applied only after the stylesheet and the font file have both loaded. If Google does not serve the name, the status says so and the preview keeps the font it was showing. Once a Google family is applied, a separate Google Import CSS block appears under the CSS box, and Show Import reveals the @import url(...) line followed by the same declarations.

The font name you type is sent to Google Fonts, which also sees your IP address. Nothing is requested until you type a name.

Related Tools

View all tools

CSS

CSS Box Shadow Generator

Build a CSS box-shadow with up to 5 layers: offset, blur, spread, color, opacity and inset. Copy CSS, Tailwind, SCSS, CSS-in-JS or a variable.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Gradient Generator

Build linear, radial and conic gradients from color stops, ten presets or the colors of an image you upload, then copy CSS, Tailwind, React or SCSS code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.

CSS

CSS Transform Generator

Set translate, rotate, scale, skew, 3D rotation and perspective and see the CSS transform on a live box. Copy CSS, Tailwind, SCSS or custom properties.

CSS

CSS Filter Generator

Combine blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow on a preview; copy CSS, Tailwind or an SVG filter.