Introduction to Fonts in CSS
Fonts are very important in web design as they help to shape the visual composition of your page's content and have a significant impact on the user experience. Using appropriate fonts can enhance both the aesthetics and readability of the site.
Safe Fonts for the Web
In web design, sometimes due to incompatibility between browsers, we need to use safe web fonts that display well on all browsers. This includes fonts such as Arial, Verdana, and Times New Roman.
Using Custom Fonts
For having a unique design, you can use custom fonts. For this purpose, typically fonts that are available in Google Fonts or other online resources are used. Keep in mind that using custom fonts can quickly make the site less appealing.
Impact of Fonts on User Experience
Fonts are one of the key factors in user experience. The right font can convey mood and meaning more effectively than the message itself. By choosing the right font, not only do you enhance the aesthetics of your site, but you also create a desirable and legible experience for your users.
p {
font-family: 'Arial', sans-serif;
}
h1 {
font-family: 'Georgia', serif;
}
@font-face {
font-family: 'MyCustomFont';
src: url('my-custom-font.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Line-by-Line Explanation
p { font-family: 'Arial', sans-serif; } For paragraphs, the Arial font is used, or if it is not available, a default sans-serif font will be used.
h1 { font-family: 'Georgia', serif; } Headings will be displayed using the Georgia font, and if it is not accessible, it will switch to the serif font family.
@font-face gives you the ability to define custom fonts for your website.
font-family: 'MyCustomFont'; is the name of the custom font that you can refer to in CSS.
src: url('my-custom-font.woff2') format('woff2'); is the file path for the font formatted as woff2, which is a widely accepted format for the web.
body { font-family: 'MyCustomFont', sans-serif; } applies the custom font to all text on the page.