CSS font declaration question

Question

whats the difference between this: ``` font-family: Arial, helevetica; ``` and this: ``` font: arial/ helvetica; ``` I've seen both but not really sure of the difference?

Accepted Answer

Is the slash (`/`) a typo? Because the only slash I can image in the `font:` property is the one denoting font-size and line-height (e.g. `16px/20px`)

Anyway, `font:` is the property that lets you set several font properties at once, whereas `font-family` obviously only lets you set the font face. With `font:` you can also set size, bold/italic, line-height and variant:

```
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
```

Is the same as:

```
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
```

You can omit properties that are already set, too. For just size, family and bold:

```
font: bold 1em arial,verdana;
```

CSS font declaration question

Solution

Problem