How do I use the CSS font shorthand?

CSS font shorthand format: font: font-style font-weight font-size/line-height font-family. Example: font: normal 400 16px/1.5 'Inter', sans-serif. The tool automatically generates the correct shorthand code for you.

How do I use Google Fonts?

Select a font from the Google Fonts dropdown, click the font name to load it. It will automatically load the font from Google Fonts CDN and update the preview. The required HTML link tag will be shown in the code output section.

How to apply the generated CSS?

Click the 'Copy CSS' button to copy the generated CSS code to your clipboard, then paste it into your stylesheet. If using Google Fonts, also add the provided link tag to your HTML head section.

Can I customize the preview text?

Yes! You can type or paste any text into the preview area to see how different fonts and styles look with your actual content. The preview updates in real-time as you adjust settings.

Free CSS Font Generator

← Back to Tools

Updated: 2026-07-11

🔤 Font / Size

Font

Google Fonts

Size 32px

⚖️ Weight / Style

Weight

Style

Line Height 1.5

📏 Spacing / Decoration

Letter Spacing 0px

Word Spacing 0px

Transform

Decoration

🎨 Color / Background

Text Color

Background

Opacity 100%

📺 Live Preview

CSS Code Output

/* Adjust controls to generate CSS code */

📦 Google Fonts import (add to <head>):

🎯 Quick Presets

📰 Heading

📝 Body Text

💻 Code

✍️ Handwriting

👑 Elegant Serif

🚀 Modern Sans

🎪 Display