Font Styling and Web Fonts

In this section, we'll learn how to use and style typefaces in CSS, as well as how to load new fonts into the browser. Here's what we’ll cover:

Changing Font Styles

You can adjust the font of your text by using the font-family property in CSS.

For example, if the font name includes spaces, be sure to wrap it in quotation marks (e.g., "Times New Roman"), to ensure it renders correctly in the browser.

https://codepen.io/tmasingale/pen/XWvRVME

Web-Safe Fonts

When loading a web page, the browser will only apply the font specified in font-family only if the font is loaded on the system.. Different operating systems (Windows, Android, macOS, etc.) have different default fonts, which means the same web page can look different across devices.

To ensure consistency across platforms, it's a good idea to use web-safe fonts. These are fonts that are commonly available on most devices. Some widely used web-safe fonts include: