🌙

Google Fonts CSS Generator

Generate the optimized HTML tag for including specific Google Font weights and styles in your project.

Generated <link> Tag

About This Tool

Loading unnecessary font weights can slow down your website. This tool helps you create the perfect, optimized `` tag for your project. You can select a font and then choose only the specific weights (e.g., 400, 700) and styles you actually need, resulting in a smaller download for your users and a faster page load.

How to Use

  1. Select your desired font family from the dropdown.
  2. A list of available weights and styles for that font will appear.
  3. Check the boxes for only the weights and styles your design requires.
  4. The optimized `` tag will be automatically generated in the result box.
  5. Click the 'Copy' button to copy the tag and paste it into the `` of your HTML document.

Frequently Asked Questions (FAQs)

Should I use or @import?

Using the `` tag in your HTML's `` is generally recommended for performance because it allows for parallel downloading, whereas `@import` in a CSS file can block rendering.

What does '&display=swap' do?

This is a crucial performance attribute. It tells the browser to show text immediately with a fallback font while the Google Font is loading, preventing a blank space (Flash of Invisible Text).