Css Font Family

CSS font family

Created By: chatGPT

In CSS, the font-family property allows you to specify the typeface for text in your web application. You can use a single font or a list of fonts as a fallback in case the specified font is not available on the user's device. Here's how you can use it:

body {
    font-family: 'Arial', sans-serif;
}

You can include multiple fonts by separating them with commas. In the example above, if 'Arial' is not available, the browser will fall back to a generic sans-serif font. It’s good practice to provide fallback options for better compatibility across different devices and browsers.

h1 {
    font-family: 'Times New Roman', 'Georgia', serif;
}

To use a custom font, you can include it using the @font-face rule in your CSS. This allows you to load fonts not installed on the user’s computer. Here’s an example:

@font-face {
    font-family: 'MyCustomFont';
    src: url('MyCustomFont.woff2') format('woff2'),
         url('MyCustomFont.woff') format('woff');
}

p {
    font-family: 'MyCustomFont', sans-serif;
}

Remember to ensure you have the rights to use any custom fonts you include in your projects. Also, for better performance and user experience, consider using font formats like WOFF or WOFF2 that are optimized for the web.

/* Example of including different font formats */
@font-face {
    font-family: 'ExampleFont';
    src: url('ExampleFont.woff2') format('woff2'),
         url('ExampleFont.woff') format('woff'),
         url('ExampleFont.ttf') format('truetype');
}