Styling text using CSS @font-face rule | How to use custom fonts on a webpage | Web Development

Опубликовано: 25 Февраль 2025
на канале: Code Range

1,134

In this second part of 'Styling Text' series, we talk about using the @font-face CSS rule to add your favorite fonts or custom fonts to display text on your webpages.
With the @font-face rule, web designers do not have to use one of the "web-safe" fonts anymore.

Do check out the recommended videos and interesting links below.

- - - Contents Of The Video - - - -

00:00 - Introduction to @font-face CSS rule
01:27 - Syntax and rules of writing @font-face rule
03:20 - Relative file paths
04:47 - Cross browser compatibility for font file formats
05:08 - Listing multiple font files
05:15 - Using font from @font-face on the webpage
05:54 - Download free fonts
06:15 - Recommended resource CSS Tricks
06:28 - Upcoming video and conclusion

- - - Recommended Videos - - - -

1. Introduction to CSS:
   • Introduction to CSS | What is CSS? | ...

2. CSS Colors:
   • CSS Colors | Color names, Hexadecimal...

3. CSS font-family:
   • Styling text using CSS font-family | ...

4. Learn HTML:
   • HTML5 Tutorials

- - - Interesting Links - - - -

1. Using @font-face by CSS Tricks:
https://css-tricks.com/snippets/css/u...

2. W3Schools @font-face:
https://www.w3schools.com/cssref/css3...

3. MDN Web Docs @font-face:
https://developer.mozilla.org/en-US/d...