Skip to main content

CSS Web Fonts: Custom Typography for Your Website

Web fonts are custom fonts that can be downloaded from a server and used on a website. They allow you to use a wide variety of fonts that may not be available on users' computers.

Here's an example of how to use web fonts in CSS:

  • Find a web font you want to use and download the font files (usually in the .ttf, .woff, or .woff2 formats). There are many websites that offer free web fonts, such as Google Fonts, Font Squirrel, and DaFont.

  • Upload the font files to your server and put them in a directory.

  • In your CSS file, use the @font-face rule to define the font family and the location of the font files.

As an example:

@font-face {
     font-family: "Open Sans";
     src: url("/fonts/OpenSans-Regular.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
}

In this example:

  • We're defining a font family called "Open Sans" and specifying the location of the font file on our server.

  • We're also specifying the font weight and style as normal.

  • Once you've defined the @font-face rule, you can use the font family in your CSS rules like this:

body {
     font-family: "Open Sans", sans-serif;
}

In this example:

  • We're setting the font family of the body element to "Open Sans".
  • The sans-serif fallback is there in case the font doesn't load or isn't available.

That's it! With these steps, you can use any web font you want on your website. Remember to test your website on different browsers to make sure the font displays correctly.