**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Typography and Web Fonts **Topic:** Working with web fonts: `@font-face` and Google Fonts. With the rise of web fonts, designers can now use custom fonts to enhance the visual appeal of their websites. In this topic, we'll explore how to work with web fonts using the `@font-face` rule and Google Fonts. ### The Limitations of Native Web Fonts In the past, web designers were limited to using native web fonts, which are the fonts that come pre-installed on most computers. These fonts are often referred to as "system fonts." While system fonts are convenient to use, they lack the uniqueness and visual appeal that custom fonts can bring to a website. ### Introducing `@font-face` To overcome the limitations of native web fonts, CSS3 introduced the `@font-face` rule. This rule allows you to define a custom font and load it onto your website. Here's an example of how to use `@font-face`: ```css @font-face { font-family: 'MyCustomFont'; src: url('mycustomfont.woff2') format('woff2'), url('mycustomfont.woff') format('woff'), url('mycustomfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } ``` In this example, we define a custom font called `MyCustomFont` and specify the source files for the font. We also define the font weight and style. ### Using `@font-face` with Font Files To use `@font-face`, you'll need to obtain the font files for your custom font. These files usually come in the following formats: * `woff2` (Web Open Font Format 2) * `woff` (Web Open Font Format) * `ttf` (TrueType Font) * `eot` (Embedded OpenType) You can obtain font files from font foundries or websites that offer free fonts. Some popular websites for free fonts include: * [Google Fonts](https://fonts.google.com/) * [Font Squirrel](https://www.fontsquirrel.com/) * [DaFont](https://www.dafont.com/) ### Google Fonts Google Fonts is a popular website that offers a vast collection of free and open-source fonts. To use Google Fonts, simply visit their website, select the font you want to use, and copy the `@import` statement into your CSS file. For example, to use the `Open Sans` font, you would add the following code to your CSS file: ```css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap'); ``` You can then use the font in your CSS file like this: ```css body { font-family: 'Open Sans', sans-serif; } ``` ### Best Practices for Working with Web Fonts When working with web fonts, it's essential to follow best practices to ensure that your website loads quickly and efficiently. Here are some tips to keep in mind: * Use font formats that are supported by most browsers (WOFF2, WOFF, TTF). * Use font weights and styles that are suitable for your website's content. * Avoid using too many custom fonts, as this can slow down your website's loading time. * Use font sizes and line heights that are readable on most devices. ### Conclusion In this topic, we learned how to work with web fonts using the `@font-face` rule and Google Fonts. We also explored the limitations of native web fonts and the benefits of using custom fonts to enhance the visual appeal of our websites. **What's next?** In the next topic, we'll explore responsive typography techniques using REM, EM, and fluid typography. We'll learn how to create flexible and adaptable typography that works on most devices. **Leave a comment or ask for help** If you have any questions or need further clarification on any of the concepts covered in this topic, please leave a comment below. We'll do our best to help you understand the material. **External Resources** * [Google Fonts](https://fonts.google.com/) * [Font Squirrel](https://www.fontsquirrel.com/) * [DaFont](https://www.dafont.com/) * [W3C: Web Fonts](https://www.w3.org/TR/css-fonts-3/) * [MDN: `@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)