HTML-Fonts
HTML provides several ways to specify and control the fonts used in a web page. Here are some common methods for working with fonts in HTML:
Font Family: You can specify the font family for an HTML element using the CSS font-family property. This property allows you to specify a list of font names or generic font families. The browser will try to use the first available font in the list. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-family: Arial, sans-serif; } </style> <p>This is a paragraph with Arial font.</p> |
In the example above, the browser will first try to use the “Arial” font. If Arial is not available, it will use a sans-serif font as a fallback.
Font Size: You can control the font size using the CSS font-size property. It allows you to specify the size in various units such as pixels, percentages, or ems. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-size: 16px; } </style> <p>This is a paragraph with a font size of 16 pixels.</p> |
Font Weight: The CSS font-weight property controls the thickness or boldness of the font. It accepts values such as “normal,” “bold,” or numeric values like 100, 200, etc. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-weight: bold; } </style> <p>This is a bold paragraph.</p> |
Google Fonts: Google Fonts is a popular service that provides a wide variety of web fonts that you can use in your HTML pages. To use Google Fonts, you need to link the appropriate CSS file in the head section of your HTML document. For example
|
1 2 3 4 5 6 7 8 9 |
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <style> p { font-family: 'Open Sans', sans-serif; } </style> <p>This is a paragraph with the "Open Sans" font from Google Fonts.</p> |
- In the example above, we’ve linked the Open Sans font from Google Fonts and applied it to the paragraph element.
These are just a few examples of how you can work with fonts in HTML. CSS provides many more properties and options for controlling the appearance of text, such as font style, text decoration, letter spacing, and more.
Font Style: The CSS font-style property allows you to specify the style of the font, such as “normal” (default), “italic,” or “oblique.” For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-style: italic; } </style> <p>This is an italicized paragraph.</p> |
Font Decoration: The CSS text-decoration property controls the decoration of the text, such as underline, overline, or line-through. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { text-decoration: underline; } </style> <p>This is an underlined paragraph.</p> |
Web Safe Fonts: Web safe fonts are fonts that are widely available across different operating systems and devices. These fonts are typically pre-installed on most computers. Some common web safe fonts include Arial, Helvetica, Times New Roman, and Verdana. You can use web safe fonts by specifying the font names in your CSS font-family property. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-family: Arial, sans-serif; } </style> <p>This is a paragraph with Arial font.</p> |
Fallback Fonts: It’s a good practice to provide a fallback list of fonts in case a particular font is not available. By specifying multiple fonts in the font-family property, separated by commas, you can ensure that the browser will try to use the next font if the previous one is not available. For example:
|
1 2 3 4 5 6 7 8 |
<style> p { font-family: "Open Sans", Arial, sans-serif; } </style> <p>This is a paragraph with the "Open Sans" font, and if it's not available, Arial will be used as a fallback.</p> |
Font Units: The font-size property accepts different units of measurement. Some commonly used units include pixels (px), percentages (%), and ems (em). Pixels provide a fixed size, percentages are relative to the parent element, and ems are relative to the font size of the element itself. For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> p { font-size: 20px; /* 20 pixels */ } h1 { font-size: 150%; /* 150% of the parent element's font size */ } h2 { font-size: 1.5em; /* 1.5 times the font size of the element itself */ } </style> <p>This is a paragraph with a font size of 20 pixels.</p> <h1>This is a heading with a font size of 150%.</h1> <h2>This is a subheading with a font size of 1.5em.</h2> |
