<commit_before>---
title: Fonts
---
## Fonts
The CSS font properties define the font family, weight, size, variant, line height, and style of an element's text content.

### Font family
The font family is set by using the `font-family` property.

It works with a *fallback* system i.e. if your browser does not support the first font specified, it tries with the next one, and so on. If the name of the font is longer than one word, it must be in quotes.

```css
p {
  font-family: "Times New Roman", Times, serif;   
}
```
In the above example, "Times New Roman" and "Times" are <family-name>s and "serif" is a <generic-name>. Generic names are used as a fallback mechanism for preserving style if the <family-name> is unavailable. A generic name should always be the last item in the list of font family names. The generic family name options are: 
  
* serif
* sans-serif
* monospace
* cursive
* fantasy
* system-ui

### Importing a font
In addition to specifying common fonts that are found on most operating systems, custom web fonts can be used as well. To import such a font, copy the font URL from the library and reference it in the HTML. [fonts.google.com](https://fonts.google.com/) is a popular place to find fonts to import, but there are many other resources.
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
```
Then you can use the font that you have imported (in this example, `Lobster`) in your code as normal.

### Font style
The `font-style` property can be used to specify the text's style.

This property has 3 values:

* normal - Text shown normally
* italic - Text shown in *italic*
* oblique - Text shown slanted

`italic` and `oblique` both look like the normal font but slanted. The main difference is that `italic` is a whole other version of the font, slanted at a particular angle and sometimes styled slightly differently. `oblique` is the original font but with the ability to be slanted at and angle to different degrees.

If a font does not have an italic version, the oblique version may be substituted, and vice versa. If a font has neither version, the letters will be artificially slanted.

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

### Font size
The `font-size` property sets the size of the text. The default size is usually `16px`.

There are several different values that may be used to determine size:

* `px` (pixels) - specifies the exact number of pixels for the size of the font
* `em` - a relative measurement that is dynamically created based on the font size of an element's parent. `1em` = the current font size, so `1em` = `16px` (recommended by the W3C)
* `small`, `medium`, `large` - absolute size values
* `%` - percentages

```css
.with-pixels {
  font-size: 14px;
}

.with-ems {
  font-size: 0.875em;
}

.with-absolute {
  font-size: large;
}

.with-percentage {
  font-size: 80%;
}
```
<commit_msg>Added rem unit under Font Size properties (#28026)<commit_after>---
title: Fonts
---
## Fonts
The CSS font properties define the font family, weight, size, variant, line height, and style of an element's text content.

### Font family
The font family is set by using the `font-family` property.

It works with a *fallback* system i.e. if your browser does not support the first font specified, it tries with the next one, and so on. If the name of the font is longer than one word, it must be in quotes.

```css
p {
  font-family: "Times New Roman", Times, serif;   
}
```
In the above example, "Times New Roman" and "Times" are <family-name>s and "serif" is a <generic-name>. Generic names are used as a fallback mechanism for preserving style if the <family-name> is unavailable. A generic name should always be the last item in the list of font family names. The generic family name options are: 
  
* serif
* sans-serif
* monospace
* cursive
* fantasy
* system-ui

### Importing a font
In addition to specifying common fonts that are found on most operating systems, custom web fonts can be used as well. To import such a font, copy the font URL from the library and reference it in the HTML. [fonts.google.com](https://fonts.google.com/) is a popular place to find fonts to import, but there are many other resources.
```html
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
```
Then you can use the font that you have imported (in this example, `Lobster`) in your code as normal.

### Font style
The `font-style` property can be used to specify the text's style.

This property has 3 values:

* normal - Text shown normally
* italic - Text shown in *italic*
* oblique - Text shown slanted

`italic` and `oblique` both look like the normal font but slanted. The main difference is that `italic` is a whole other version of the font, slanted at a particular angle and sometimes styled slightly differently. `oblique` is the original font but with the ability to be slanted at and angle to different degrees.

If a font does not have an italic version, the oblique version may be substituted, and vice versa. If a font has neither version, the letters will be artificially slanted.

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

### Font size
The `font-size` property sets the size of the text. The default size is usually `16px`.

There are several different values that may be used to determine size:

* `px` (pixels) - The default size of text being `16px`
* `em` - `1em` = the current font size, so `1em` = `16px` (recommended by the W3C)
* `rem` (root em) - The value of the font size of the root element `html`. Whereas `em` units are relative to the font size of their parent element, `rem` units are always relative to the document's root element.
* `small`, `medium`, `large` - known as absolute size values
* `%` - percentages

```css
.with-pixels {
  font-size: 14px;
}

.with-ems {
  font-size: 0.875em;
}

.with-absolute {
  font-size: large;
}

.with-percentage {
  font-size: 80%;
}
```

{'fraction_non_alphanumeric': 0.09281388115894582, 'fraction_numerical': 0.006384023571779342, 'mean_word_length': 3.880191693290735, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4100686', 'n_tokens_mistral': 1846, 'n_tokens_neox': 1746, 'n_words': 913}