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

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:
https://youtu.be/WuppPid9H1E

2. CSS Colors:
https://youtu.be/SZzqlnsohK4

3. CSS font-family:
https://youtu.be/KxM0hueFnNM

4. Learn HTML:
https://youtube.com/playlist?list=PL0pI48bNGOh3Lm3TnTf85-heThQGHjQbJ

- - - - Interesting Links - - - -

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

2. W3Schools @font-face:
https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

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