CSS Tips and Tricks For Fonts

[brenda813]

I’m working on cleaning up my CSS file and am looking for ways to make it more streamlined and efficient.

One question in particular, that I have, is regarding defining fonts. I’m using a custom font via @font-face. Do I have to specify the following for EACH style?

font-family:
font-weight:
font-size:
font-style:
font-stretch:

Or can I specify only the first three?

Any other tips/tricks anyone has for steamlining a CSS file, would be helpful as well.

[rahul.kapuriya]

You must have to specify ‘font-family’. Other properties use their default values.

[Zlate]

If you aim for saving some lines of code, you can try with the font shorthand.

[Geoff Graham]

Hey @brenda813,

Good question. Just echoing Rahul’s reply, the only CSS attribute needed for @font-face is font-family which, when set, defines the name of the font when you call it on other elements in your stylesheet.

But adding on to that, src is the other required attribute, which tells the browser where to locate the font needed to put it to use.

@font-face {
  font-family: "My Custom Font";
  src: url("path/to-font-file");
}

It’s worth noting that there are several types of font files needed to ensure that the font is properly downloaded and used by as many browsers as possible. This CSS-Tricks post does a nice job of noting which files offer the deepest support: https://css-tricks.com/snippets/css/using-font-face/

All of the other attributes are not really required, unless you want the font to render a specific way on all elements where it is called. Probably easier to change those attributes on an as-needed basis though to keep you code slim.

[Author]

Posts