Font Styler Generator

Live Preview (Click elements to style)

Heading 1 Sample

Heading 2 Sample

Heading 3 Sample

Heading 4 Sample

Heading 5 Sample

Heading 6 Sample

This is a sample bold paragraph (P-Bold). Vivamus hendrerit arcu sed erat molestie vehicula.

This is a sample paragraph (P tag). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.

This is sample small paragraph text (p.small). Use this for less emphasized text.

This is sample fine print text (.fp). Donec et odio pellentesque, rutrum lorem quis, venenatis ligula.

h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
}

h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

h4 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

h5 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

h6 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

p.bold, strong {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

p {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

p.small {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

p.fine-print {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
}

CSSSASSSCSS

Styling: H1

Font Family:

Loading fonts...

Font Weight:

Font Size:

Letter Spacing:

Line Height:

Output Format:

Unit Settings:

Use rem units

Save & Change Text Set

Style Set Name:

Load Saved Set:

Loading sets...