Styling text using CSS font-family | Web-safe fonts | serif, sans-serif, monospace, cursive, fantasy

Опубликовано: 16 Октябрь 2024
на канале: Code Range

1,769

In this part of the 'Styling Text' series of videos, we will look at setting a different font for the text on your web page, using the CSS font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements.

We also learn about the five generic font-family names in CSS like serif, sans-serif, monospace, cursive & fantasy that are used as a fallback option by the browser in a worst case scenario where it will try its best to provide a font that looks appropriate from our mentioned generic name.

Speaking of font availability, we also cover 'Web Safe Fonts' which are generally available across all systems and can therefore be used without much worry.

Do check out the recommended videos and interesting links below.

- - - Contents Of The Video - - - -

00:00 - Introduction to Styling Text on a webpage
00:53 - What is font-family ?
01:19 - Syntax of using font-family property
02:58 - Providing alternative fonts as fallback
04:39 - Generic font-families (serif, sans-serif, monospace, cursive, fantasy)
07:46 - Web Safe fonts
08:50 - Conclusion

- - - Recommended Videos - - - -

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

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

3. Learn HTML:
   • HTML5 Tutorials

- - - Interesting Links - - - -

1. MDN Web Docs Fundamental text and font styling:
https://developer.mozilla.org/en-US/d...

2. W3 Schools CSS Fonts Tutorial:
https://www.w3schools.com/css/css_fon...

3. Web Safe Fonts on CSS Font Stack:
https://www.cssfontstack.com/