Search code examples
cssfontsfont-facewebfonts

Consolidate font-files while supporting IE

I have quite a few fonts right now that I need to use for my site:

fonts/
├── Knockout-30.otf
├── Verlag-Black.otf
├── Verlag-Bold.otf
├── Verlag-Book.otf
├── Verlag-Light.otf
├── VerlagCond-Black.otf
└── VerlagCond-Bold.otf

Right now my css looks like:

@font-face {
  font-family: 'Knockout';
  src: url('fonts/Knockout-30.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Book.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Verlag';
  src: url('fonts/Verlag-Light.otf') format('opentype');
  font-weight: lighter;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagBlack';
  src: url('fonts/Verlag-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagCond';
  src: url('fonts/VerlagCond-Black.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'VerlagCond';
  src: url('fonts/VerlagCond-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

Right now these fonts are not supported by IE apparently so I'm looking at using https://onlinefontconverter.com/ to generate IE friendly font file types. It seems a bit gross to me that I'd have to make 7 calls for font files. Is there a good standard in regards to consolidating these files so I would somehow only need to make one call? Or at least consolidate the similar font family types? I was recommended base64 encoding everything and including in the css but I know base64 increases file size from what I gather so I'm not sure if that trade would be worth it. Any advice is much appreciated, thank you.

Solution

  • There are many ways to do this, but below is a standard way of calling @font-face

    @font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: local("Roboto Thin Italic"), local("Roboto-ThinItalic"),
       url(../fonts/Roboto/Roboto-ThinItalic.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto-ThinItalic.woff) format("woff"), 
       url(../fonts/Roboto/Roboto-ThinItalic.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto-ThinItalic.eot), 
       url(../fonts/Roboto/Roboto-ThinItalic.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto-ThinItalic.svg#Roboto) format("svg");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: local("Roboto Thin"), local("Roboto-Thin"), 
       url(../fonts/Roboto/Roboto-Thin.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto-Thin.woff) format("woff"), 
       url(../fonts/Roboto/Roboto-Thin.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto-Thin.eot),
       url(../fonts/Roboto/Roboto-Thin.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto-Thin.svg#Roboto) format("svg");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
...

    font-family - defining a global name
    font-style - defining the font style of the font file
    font-weight - defining the font weight of the font file
    src - defining paths
    unicode-range - well, this is optional: you ignore this line if you don't know

    So basically you will have to do this repeatedly for all the font types & weights, unless you have all the font types contain in a single font file. So by defining these separately it will be easy for the browser to pick up the required font file. So you will just have to define the font-style & weight for the child elements, and browser will decide which file to pick. So there are no other options than defining them all.

    If you don't want to call multiple files,

    you can simply call the font like this and font-style & font-weight will render by the browser instead of files (NOTE: This might cause some anti-aliasing issues)

    @font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: normal;
  src: local("Roboto"),
       url(../fonts/Roboto/Roboto.woff2) format("woff2"), 
       url(../fonts/Roboto/Roboto.woff) format("woff"), 
       url(../fonts/Roboto/Roboto.ttf) format("truetype"), 
       url(../fonts/Roboto/Roboto.eot), 
       url(../fonts/Roboto/Roboto.eot?#iefix) format("embedded-opentype"),
       url(../fonts/Roboto/Roboto.svg#Roboto) format("svg");
}

    To get a better idea read: https://www.w3.org/TR/2009/WD-css3-fonts-20090618/