In HTML, you can specify fonts using the CSS (Cascading Style Sheets) `font-family` property. This property allows you to define the font face or font family for the text within an HTML element. Here's an explanation of how to use fonts in HTML along with examples:
1. Using Web Safe Fonts:
Web safe fonts are fonts that are commonly available across various operating systems and web browsers. These fonts are guaranteed to be available on most devices.
Example:
<p style="font-family: Arial, sans-serif;">This text uses Arial font or a sans-serif font if Arial is not available.</p>
2. Using Google Fonts:
Google Fonts provides a vast collection of free and open-source fonts that you can easily integrate into your HTML pages.
Example:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
p {
font-family: 'Roboto', sans-serif;
}
</style>
<p>This text uses the Roboto font from Google Fonts.</p>
3. Using Custom Fonts:
You can also use custom fonts by importing them using `@font-face` rule in CSS. This allows you to use any font file hosted on your server.
Example:
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
/* Add other font formats as necessary */
}
p {
font-family: 'MyCustomFont', sans-serif;
}
</style>
<p>This text uses a custom font named MyCustomFont.</p>
4. Using System Fonts:
You can also use the system default font by specifying `system-ui` as the font family. This will use the default font of the user's operating system.
Example:
<p style="font-family: system-ui;">This text uses the system default font.</p>
Notes:
- Ensure that when using custom fonts, you have the appropriate license to use them on your website.
- Always provide fallback fonts in case the specified font is not available on the user's system to ensure readability.
- Using web fonts from external sources like Google Fonts or hosting your own font files can impact page loading times, so consider the trade-offs between aesthetics and performance.
1. Using Web Safe Fonts:
Web safe fonts are fonts that are commonly available across various operating systems and web browsers. These fonts are guaranteed to be available on most devices.
Example:
<p style="font-family: Arial, sans-serif;">This text uses Arial font or a sans-serif font if Arial is not available.</p>
2. Using Google Fonts:
Google Fonts provides a vast collection of free and open-source fonts that you can easily integrate into your HTML pages.
Example:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
p {
font-family: 'Roboto', sans-serif;
}
</style>
<p>This text uses the Roboto font from Google Fonts.</p>
3. Using Custom Fonts:
You can also use custom fonts by importing them using `@font-face` rule in CSS. This allows you to use any font file hosted on your server.
Example:
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
/* Add other font formats as necessary */
}
p {
font-family: 'MyCustomFont', sans-serif;
}
</style>
<p>This text uses a custom font named MyCustomFont.</p>
4. Using System Fonts:
You can also use the system default font by specifying `system-ui` as the font family. This will use the default font of the user's operating system.
Example:
<p style="font-family: system-ui;">This text uses the system default font.</p>
Notes:
- Ensure that when using custom fonts, you have the appropriate license to use them on your website.
- Always provide fallback fonts in case the specified font is not available on the user's system to ensure readability.
- Using web fonts from external sources like Google Fonts or hosting your own font files can impact page loading times, so consider the trade-offs between aesthetics and performance.