Skip to main content

Forums

This topic contains 3 replies, has 4 voices, and was last updated by  Geoff Graham 3 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #239106

    brenda813
    Participant

    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.

    #239159

    rahul.kapuriya
    Participant

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

    #239211

    Zlate
    Participant

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

    #239424

    Geoff Graham
    Keymaster

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star