Full Text Styling With a Single Line of CSS
Tags: css, webdev, tutorial
Published: 2020-11-11 16:26:06

Am I the only one who always thought the font shorthand was too confusing to use?

Well, I finally decided to start using it.

Now I want to share with you what I've learned. All the quirks, gotchas and use-cases.

> It's a very useful tool, if you're willing to play by its rules.

---

# What does it do?

The font shorthand allows you to set almost all font-related properties with a single line of CSS.

**Including:**
* `font-style`
* `font-variant`
* `font-weight`
* `font-size`
* `line-height`
* `font-family`
* `font-stretch` - this one is not used as often, and won't be discussed in this article

# Required properties

Out of these, only `font-size` and `font-family` are required. If you omit either, the whole line will be ignored. All other properties can be omitted.

![Optional & required properties](https://dev-to-uploads.s3.amazonaws.com/i/hnj8vpx47qi39rc1enzo.png)

> Be careful though.

> If you don't specify a property, it will be reset to its default value. Even if you've defined that property earlier. Including in a parent element.

> `font-kerning` and `font-size-adjust` will also be reset by this shorthand, even though they can't be set by it.

# Order of Properties

The order of properties allows for some flexibility, but there are a few rules.

## Style, Variant & Weight

`font-style`, `font-variant`, and `font-weight` have to come before `font-size`. Their individual order doesn't matter though.

![Style, variant, and weight properties](https://dev-to-uploads.s3.amazonaws.com/i/x4hh1lx8naf4v9mn8ztq.png)

If you don't remember what these properties do, here's a quick reminder:

* `font-style` - allows you to choose between `normal`, `italic`, and `oblique` styles of the font. Oblique is basically the same as italic but uses the same glyphs as the normal font, just slanted.
* `font-variant` - allows you to choose between the `normal`, and `small-caps` variants of the font.
* `font-weight` - allows you to choose the thickness (weight) of the font. Either by using keywords like `normal`, `bold`, `lighter`, `bolder` or a numeric value from 100 to 900.

## Font Family

`font-family` always has to be last.

![Font family property](https://dev-to-uploads.s3.amazonaws.com/i/5bdg4x6u8zx7r9lzjdu8.png)

It can be a [keyword](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Values) or font name. If the font name contains spaces, it should be wrapped in quotation marks. 

You can also specify additional fallback fonts, separated by commas. They will be used (from left to right), if the preferred font is unavailable.

```css
/* keyword */
font: 15px serif;
/* font name */
font: 15px "Playfair Display";
/* font name with keyword fallback */
font: 15px "Playfair Display", serif;
/* font name with 2 fallbacks: font name and keyword */
font: 15px "Playfair Display", Merriweather, serif;
```

## Font Size & Line Height

`font-size` and `line-height` are right in the middle. After `font-style`, `font-variant`, and `font-weight`. But before `font-family`.

`line-height` has to come right after `font-size`, separated with a slash (`/`). If you don't specify `line-height`, the slash should also be omitted.

![Font size and line height properties separated with a slash](https://dev-to-uploads.s3.amazonaws.com/i/n28xo9b95r8g2herpodm.png)

# Gotchas & Use-Cases
The overriding behavior of the font shorthand can make it a bit unpredictable. For this reason it's best suited for small websites, quick prototyping, and experimentation.

# Cheatsheet

If you ever forget the exact order and rules of this shorthand, here's a handy cheatsheet 😃

![Full font shorthand cheatsheet](https://dev-to-uploads.s3.amazonaws.com/i/c9s1wh5hlx60kamsvb21.png)

*Thanks for reading. I hope you learned something useful. If you have any questions, ask in the comments. Follow me for more web development tips.*

### Another article you might enjoy

{% link https://dev.to/hadrysmateusz/custom-list-styles-using-marker-before-4gi4 %}