Search code examples
csssassfont-face

CSS Font Face declarations

I am working on legacy code base that has these and more @font-face declarations

@font-face {
    font-family: 'Lato';
    font-weight: $font-weight-thin;
    font-style: $font-style-normal;
      text-rendering: optimizeLegibility;

      src: url('#{$lato-path}Lato-Thin-webfont.eot');
      src: url('#{$lato-path}Lato-Thin-webfont.eot?#iefix') format('embedded-opentype'),
          url('#{$lato-path}Lato-Thin-webfont.woff2') format('woff2'),
          url('#{$lato-path}Lato-Thin-webfont.woff') format('woff'),
          url('#{$lato-path}Lato-Thin-webfont.ttf') format('truetype'),
          url('#{$lato-path}Lato-Thin-webfont.svg#latothin') format('svg');
  }

  @font-face {
    font-family: 'Lato';
    font-weight: $font-weight-thin;
    font-style: $font-style-italic;
      text-rendering: optimizeLegibility;

      src: url('#{$lato-path}Lato-ThinItalic-webfont.eot');
      src: url('#{$lato-path}Lato-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
          url('#{$lato-path}Lato-ThinItalic-webfont.woff2') format('woff2'),
          url('#{$lato-path}Lato-ThinItalic-webfont.woff') format('woff'),
          url('#{$lato-path}Lato-ThinItalic-webfont.ttf') format('truetype'),
          url('#{$lato-path}Lato-ThinItalic-webfont.svg#latothin_italic') format('svg');
  }

Clearly these are referencing 2 separate font files, but will the other versions ever get reached if they all have the same font family name?

font-family: 'Lato';
Solution

  • Yes. Note that the font-style differs, so the fonts will be applied to their respective font styles (first to normal, second to italic)