Font Weight Previewer
Preview all available weights (100–900) of any Google Font side by side with our free font weight previewer. Select a font, type your own text, and compare Thin, Light, Regular, Medium, Bold, and Black in one view. Copy the CSS font-weight declaration for any weight in one click. No signup required.
Select any Google Font and preview all available weights (100–900) side by side with your own text. Compare Thin, Light, Regular, Medium, Bold, and Black in one view. All fonts load directly from Google Fonts — no signup required.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');font-weight: 100; /* Thin */ font-weight: 200; /* ExtraLight */ font-weight: 300; /* Light */ font-weight: 400; /* Regular */ font-weight: 500; /* Medium */ font-weight: 600; /* SemiBold */ font-weight: 700; /* Bold */ font-weight: 800; /* ExtraBold */ font-weight: 900; /* Black */
Why Use Our Font Weight Previewer?
Fast, visual, and comprehensive Google Font weight comparison
Instant Font Weight Preview
Preview all available weights of any Google Font side by side instantly. Our font weight previewer loads the selected font directly from Google Fonts and renders all weights — from Thin (100) to Black (900) — in a single view with no page reloads.
Secure Font Weight Previewer Online
Our font weight previewer runs entirely in your browser. Fonts are loaded directly from Google Fonts CDN — no data is sent to any server, and your preview text stays completely private on your device.
Font Weight Previewer — No Installation
Use our font weight previewer directly in any browser with no downloads, plugins, or account required. Preview font weights for any Google Font from any device, anywhere, completely free.
Multiple Display Modes
Choose from Stacked (full-size rows), Compact (smaller rows for quick comparison), or Comparison mode. Filter to show only available weights, adjust preview size from 14px to 48px, and copy the CSS font-weight declaration for any weight in one click.
Common Use Cases for Font Weight Previewer
Practical applications for Google Font weight comparison and selection
Choosing the Right Font Weight for UI
Use our font weight previewer to compare how a font looks at different weights before committing to it in your design system. See whether 500 or 600 works better for your headings, or whether 300 is too light for body text at your target font size.
Typography Scale Design
Design a complete typography scale by previewing how different weights interact. Our font weight previewer shows all weights side by side so you can pick the right combination for headings, subheadings, body text, and captions.
Font Pairing Research
Research font pairings by previewing the weight range of each candidate font. Some fonts have limited weight support — our font weight previewer clearly shows which weights are available and which are not, saving you from discovering gaps after implementation.
Accessibility and Readability Testing
Test font weight readability at different sizes. Our font weight previewer lets you adjust the preview size from 14px to 48px while comparing all weights, helping you verify that your chosen weight is legible at small sizes for body text.
CSS font-weight Reference
Use our font weight previewer as a quick reference when writing CSS. Each weight card shows the numeric value and name (Thin, Light, Regular, Medium, Bold, etc.) with a one-click copy button for the CSS font-weight declaration.
Client Presentations and Design Reviews
Show clients the full weight range of a proposed font during design reviews. Our font weight previewer renders the font with the client's actual brand text, making it easy to demonstrate how the font will look across different UI contexts.
Understanding Font Weights in CSS
What font weights are, how they work, and how to choose the right ones
What is a Font Weight Previewer?
A font weight previewer shows all available weight variants of a typeface side by side — from Thin (100) to Black (900) — so you can compare them visually before choosing which weights to include in your project. Not all fonts support all nine weights; our font weight previewer clearly indicates which weights are available for each Google Font and grays out unavailable ones. All fonts are loaded directly from Google Fonts CDN — no data is sent to any server, and your preview text stays private on your device.
How Our Font Weight Previewer Works
- Select a Font: Search for any Google Font by name using the search box. The font weight previewer shows all 80+ available fonts with their category and weight count. Click any font to load it instantly.
- Preview All Weights:The font weight previewer renders all weights (100–900) side by side with your custom preview text. Available weights are shown in full; unavailable weights are grayed out. Toggle “Available only” to hide unavailable weights.
- Copy and Use: Click the copy icon on any weight card to copy the CSS font-weight declaration. The CSS Reference section at the bottom provides the Google Fonts @import URL and all available font-weight values ready to paste into your stylesheet.
CSS Font Weight Reference
- 100 — Thin: The lightest weight. Use sparingly for large display text only — too light for body text at small sizes.
- 300 — Light: Slightly lighter than regular. Works well for subheadings and secondary text when paired with a heavier weight for headings.
- 400 — Regular: The default weight. The standard choice for body text and the baseline for most typographic scales.
- 700 — Bold: The standard bold weight. Used for headings, emphasis, and UI labels. The most commonly used weight after Regular.
How Many Font Weights Should I Load?
Each font weight you load from Google Fonts adds to your page's network requests and total font file size. For most projects, loading 2–3 weights is sufficient — typically Regular (400), Medium or SemiBold (500–600) for UI labels, and Bold (700) for headings. Avoid loading weights you don't use. Our font weight previewer helps you identify exactly which weights you need before adding them to your Google Fonts import URL, preventing unnecessary weight loading that slows down your page.
Related Tools
JSON to YAML
Convert JSON to YAML format instantly - Free online JSON to YAML converter
XML to YAML
Convert XML to YAML format for configuration migration - Free online XML to YAML converter
CSV to YAML
Convert CSV spreadsheet data to YAML format - Free online CSV to YAML converter
TSV to YAML
Convert TSV tab-separated data to YAML format - Free online TSV to YAML converter
Frequently Asked Questions About Font Weight Previewer
Common questions about CSS font weights, Google Fonts, and typography
A font weight previewer shows all available weight variants of a typeface side by side — from Thin (100) to Black (900) — so you can compare them visually before choosing which weights to include in your project. Our font weight previewer loads fonts directly from Google Fonts and runs entirely in your browser.
CSS font weights use a numeric scale from 100 to 900 in increments of 100. The standard names are: 100 Thin, 200 ExtraLight, 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold, 800 ExtraBold, 900 Black. Not all fonts support all nine weights — our font weight previewer shows which weights are available for each font.
Grayed-out weights are not available in the selected font. For example, Merriweather only supports 300, 400, 700, and 900 — the other weights are not included in the font files. When you use an unavailable weight in CSS, the browser substitutes the nearest available weight, which can cause unexpected visual results. Toggle "Available only" to hide unavailable weights.
Load only the weights you actually use. Each weight adds to your page's font file size and network requests. For most projects, 2–3 weights are sufficient: Regular (400) for body text, SemiBold (600) or Bold (700) for headings, and optionally Medium (500) for UI labels. Our font weight previewer helps you identify exactly which weights you need.
Yes. Our font weight previewer runs entirely in your browser. Your preview text is never sent to any server. Fonts are loaded directly from Google Fonts CDN — the same way they load on any website using Google Fonts.
Yes! Our font weight previewer is 100% free with no signup, no account, and no usage limits. Preview font weights for any Google Font as many times as you need — completely free, forever.
They are equivalent. The CSS keyword "bold" maps to the numeric value 700, and "normal" maps to 400. Using numeric values (400, 700) is more precise and is the recommended approach when working with variable fonts or fonts that have more than two weights.
The Font Preview Tool lets you browse and compare different fonts with custom text, adjusting size and weight. The Font Weight Previewer focuses on a single font and shows all its available weights side by side — making it easier to compare how the same text looks at different weights and choose the right ones for your typography scale.