HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

Understanding CSS Font Properties

CSS font properties are essential tools that allow web designers to control the typography of a webpage. This tutorial explores different font properties and how to use external fonts to enhance your website's design.

What are CSS Font Properties?

CSS font properties enable the customization of text appearance. These properties can adjust font size, typeface, style, weight, and more, affecting how text is displayed and perceived by users.

Key CSS Font Properties

Example of Using Font Properties


p {
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.5;
}

This example applies multiple font properties to all paragraph (<p>) elements, setting a specific typeface, size, weight, style, and line spacing.

Using External Fonts

External fonts can be incorporated into a webpage to provide more unique typography that isn't limited by the default fonts available in browsers.

Steps to Use an External Font:

  1. Choose a font source: Popular sources include Google Fonts, Adobe Fonts, or any other provider that offers web-safe fonts.
  2. Include the font in your CSS: This is typically done via the @font-face rule or by linking to an external stylesheet provided by the font service.

Example of Including a Google Font


<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

This link tag, placed in the <head> section of your HTML, connects your document to the Google Fonts API, loading the 'Roboto' font in normal and bold weights.

Applying the External Font


body {
    font-family: 'Roboto', sans-serif;
}

This CSS rule applies the 'Roboto' font to all text within the body of the webpage, falling back to 'sans-serif' if the font fails to load.

Conclusion

Understanding and utilizing CSS font properties effectively can greatly enhance the aesthetic appeal and readability of your website. External fonts offer a broad spectrum of styling options beyond the default system fonts, allowing for more distinctive and engaging designs.

.lego {
	display: block;
}