CSS Font Style Generator - Customize Text Styles & Google Fonts

Design and customize your text effortlessly with this powerful Online CSS Font Style Generator. It provides a simple way to create professional typography styles with real-time preview and instant CSS code output.

You can easily adjust font-size, word-spacing, letter-spacing, line-height, font-weight, font-style, text-decoration, and text-align to match your design requirements. The tool also allows you to transform text using text-transform options like uppercase, lowercase, and capitalize.

For more advanced styling, you can use font-variant features such as unicase, all-small-caps, petite-caps, and small-caps to enhance typography appearance. Additionally, select from standard font family options or explore a large collection of 999+ Google Fonts to create unique and visually appealing text styles for your projects.

Contents

  1. Font Style Generator
  2. Text Transform Styles
  3. Text Decoration Styles
  4. Font Variant Styles
  5. Google Font Style

CSS Font Style Generator

Use this tool to quickly customize and preview text styles for your website or projects. Simply adjust options like font-size, spacing, alignment, weight, and text transformations, then choose your preferred font family or Google Font. The tool instantly generates clean CSS code, allowing you to copy and apply the styles directly without manual coding.

Font Style:
Text Decoration:
Text Transform:
Text Align:
This sample text is designed to demonstrate various font styles, spacing, and text transformations. Adjust the font-size, letter-spacing, and line-height to see how readability changes across different layouts. Experiment with font-weight, font-style, and text-decoration to highlight important content. You can also apply uppercase, lowercase, or capitalize transformations to modify the appearance of text. Try different font-variant options and explore Google Fonts to create unique and visually appealing typography for your design.
Your Text
Font Size Style

HTML and CSS code:

HTML
<p class="css-text-style">Text Paragraph</p>
CSS
.css-text-style {
    text-align: left;
    color: #000000;
    font-family: Arial Black, Gadget, sans-serif;
    background-color: #ffffff;
    font-size: 16px;
    padding: 10px;
}

Text Transform Styles

Control how text appears using text-transform. You can convert text to uppercase, lowercase, or capitalize the first letter of each word for better readability and design consistency.

Preview:

uppercase text example

LOWERCASE TEXT EXAMPLE

capitalize text example

HTML
<p class="uppercase">uppercase text example</p>
<p class="lowercase">LOWERCASE TEXT EXAMPLE</p>
<p class="capitalize">capitalize text example</p>
CSS
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}
Run code Try it yourself

Text Decoration Styles

Apply decorative effects like underline, overline, or line-through to highlight or modify text appearance. You can also customize decoration style and color.

Preview:

Underline text

Overline text

Line through text

HTML
<p class="underline">Underline text</p>
<p class="overline">Overline text</p>
<p class="line-through">Line through text</p>
CSS
.underline {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: #ff0057;
}

.overline {
  text-decoration: overline;
  text-decoration-style: dotted;
  text-decoration-color: #0027ff;
}

.line-through {
  text-decoration: line-through;
  text-decoration-style: dashed;
  text-decoration-color: #00b145;
}
Run code Try it yourself

Font Variant Styles

Enhance typography using font-variant to control the display of characters such as small caps and stylistic variations for a more refined text look.

Preview:

Small Caps Text Example

All Small Caps Text Example

HTML
<p class="small-caps">Small Caps Text Example</p>
<p class="all-small-caps">All Small Caps Text Example</p>
CSS
.small-caps {
  font-variant: small-caps;
}

.all-small-caps {
  font-variant: all-small-caps;
}
Run code Try it yourself

Google Font Style

Use Google Fonts to apply custom typography to your text. By adding the font link to your HTML, you can easily use fonts like 'Annie Use Your Telescope' and style your content with a unique handwritten look for headings, paragraphs, or decorative text.

Preview:

This is Google font style example

HTML
<!-- Google Font Link -->
<link href="//fonts.googleapis.com/css?family=Annie+Use+Your+Telescope" rel="stylesheet" type="text/css">

<p class="google-font">This is Google font style example</p>
CSS
.google-font {
  font-family: 'Annie Use Your Telescope', cursive;
  font-size: 24px;
}
Run code Try it yourself