Generate Optimized Font CSS
Create the perfect, performance-optimized CSS for embedding Google Fonts. Select only the weights and styles you need to minimize file size.
Generate Optimized Font CSS in Action
HTML <link>
CSS @import
About This Tool
Using the default Google Fonts embed code can load unnecessary font weights, slowing down your site. This tool lets you visually select only the variants you need and generates a clean, optimized `` tag or `@import` rule for you to copy.
How to Use
1. Choose a font family.
2. Check the boxes next to the weights and styles you need (e.g., Regular 400, Bold 700).
3. The tool will automatically generate the corresponding code.
4. Use the copy buttons to grab the HTML `` or CSS `@import` rule.
2. Check the boxes next to the weights and styles you need (e.g., Regular 400, Bold 700).
3. The tool will automatically generate the corresponding code.
4. Use the copy buttons to grab the HTML `` or CSS `@import` rule.
Frequently Asked Questions
Q: Should I use `` or `@import`? A: Using the `` tag in your HTML's `` is generally recommended for better performance as it allows for parallel downloading.