Learn CSS

"If you want to learn how to style and design web pages, you need to master CSS. CSS stands for Cascading Style Sheets, and it is the language that defines the appearance and layout of HTML elements. In this course, you will learn the basics of CSS, such as selectors, properties, values, units, and colors. You will also learn how to use CSS to create responsive web design, animations, transitions, and more. By the end of this course, you will be able to create beautiful and functional web pages using CSS."

CSS Chapters Menu

CSS Web Fonts

Web fonts allow designers and developers to use custom fonts on their web pages, even if the fonts are not installed on the user's computer. This is achieved by linking to a font file hosted on a server and downloading it to the user's browser.

 

There are two types of web fonts:

  1. Hosted Web Fonts: These are fonts that are hosted on a third-party server such as Google Fonts, Adobe Fonts, or Typekit. To use hosted web fonts, you need to add a link to the font file in the HTML code. You can refer the previous chapter to learn about hosted web fonts.
  2. Self-Hosted Web Fonts: These are fonts that you host on your own server. To use self-hosted web fonts, you need to upload the font files to your server and add a link to the font file in the HTML code.

 

Self-Hosted Web Fonts

Self-Hosted Web Fonts are loaded using the @font-face rule in CSS, which specifies the font-family, font-weight, font-style, and font-file for the web font.

Here's an example of how to use the @font-face rule to load a web font:

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

In this example, the font-family is set to 'Open Sans', and the font-style and font-weight are set to normal and 400, respectively. The src property specifies the path to the font file and the format of the font file. In this case, the font file is a TrueType font file (.ttf).

Once the web font is loaded, it can be used in CSS just like any other font:

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


In this example, the 'Open Sans' font is used for the body text of the website, with sans-serif as a fallback font in case the web font is not available.

CSS web fonts have revolutionized typography on the web, allowing designers to use a much wider range of fonts to create unique and engaging websites. However, it's important to use web fonts responsibly, as they can slow down the loading time of a website if not optimized correctly.