CSS Fonts and Text

CSS Fonts

Fonts in CSS are controlled using properties like font-family, font-size, and font-style.

<style>
  .font-example {
	font-family: 'Georgia', serif;
	font-size: 20px;
	font-style: italic;
  }
</style>

<p class="font-example">This is a styled paragraph using Georgia font, 20px size, and italic style.</p>

This is a styled paragraph using Georgia font, 20px size, and italic style.

CSS Text Formatting

You can control alignment, spacing, and decoration using the following properties:

text-align: left, center, right, justify
letter-spacing: spacing between characters
line-height: spacing between lines
text-decoration: underline, line-through, overline, none

<style>
  .text-formatting {
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.5;
	text-decoration: underline;
  }
</style>

<p class="text-formatting">
  Center aligned text with letter spacing and underlined decoration.
</p>

Center aligned text with letter spacing and underlined decoration.

Google Fonts Integration

Google Fonts can be added using a <link> tag in the <head> of your HTML. Then you can apply it using font-family.

<!-- Add this in the <head> section -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<style>
  .google-font {
	font-family: 'Roboto', sans-serif;
	font-size: 18px;
  }
</style>

<p class="google-font">This paragraph uses the Roboto font from Google Fonts.</p>

This paragraph uses the Roboto font from Google Fonts.

If you have any questions, feel free to ask. Thank you for reading!

Previous Next

If you have any query or question, please contact through below form. Our team will be in touch with you soon.

Please provide your valueable feedback or suggession as well.