ao5357/about.md

## about.md

      
    Raw
  

              about.md
            
          
    'Fun' CSS @font-face facts:

If you ignore the font-variant property (as it adds nearly infinite combinations), then there are 243 @font-face declarations you can make to a single font-family name/ident (9 font-stretch, 9 font-weight, 3 font-style).
Allowing for a more-than-bulletproof dec that includes filetypes you don't need (eot, svg, ttf, woff, woff2) and their respective 'average' sizes in kb (28, 150, 215, 25, 20), the src file payload for that many declarations would be ≈105 MB across 1215 files.
Surprisingly, the HTML needed to display all 243 variants can come in under 10 kb sans compression. The necessary CSS is less than 40 kb.
[This gist does not contain demo fonts]

  
## f.css
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:100;src:url('f0.eot'),url('f0.svg'),url('f0.ttf'),url('f0.woff'),url('f0.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:100;src:url('f1.eot'),url('f1.svg'),url('f1.ttf'),url('f1.woff'),url('f1.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:100;src:url('f2.eot'),url('f2.svg'),url('f2.ttf'),url('f2.woff'),url('f2.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:200;src:url('fa.eot'),url('fa.svg'),url('fa.ttf'),url('fa.woff'),url('fa.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:200;src:url('fb.eot'),url('fb.svg'),url('fb.ttf'),url('fb.woff'),url('fb.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:200;src:url('fc.eot'),url('fc.svg'),url('fc.ttf'),url('fc.woff'),url('fc.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:300;src:url('fk.eot'),url('fk.svg'),url('fk.ttf'),url('fk.woff'),url('fk.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:300;src:url('fl.eot'),url('fl.svg'),url('fl.ttf'),url('fl.woff'),url('fl.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:300;src:url('fm.eot'),url('fm.svg'),url('fm.ttf'),url('fm.woff'),url('fm.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;src:url('fu.eot'),url('fu.svg'),url('fu.ttf'),url('fu.woff'),url('fu.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;src:url('fv.eot'),url('fv.svg'),url('fv.ttf'),url('fv.woff'),url('fv.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;src:url('f10.eot'),url('f10.svg'),url('f10.ttf'),url('f10.woff'),url('f10.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:500;src:url('f18.eot'),url('f18.svg'),url('f18.ttf'),url('f18.woff'),url('f18.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:500;src:url('f19.eot'),url('f19.svg'),url('f19.ttf'),url('f19.woff'),url('f19.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:500;src:url('f1a.eot'),url('f1a.svg'),url('f1a.ttf'),url('f1a.woff'),url('f1a.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:600;src:url('f1i.eot'),url('f1i.svg'),url('f1i.ttf'),url('f1i.woff'),url('f1i.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:600;src:url('f1j.eot'),url('f1j.svg'),url('f1j.ttf'),url('f1j.woff'),url('f1j.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:600;src:url('f1k.eot'),url('f1k.svg'),url('f1k.ttf'),url('f1k.woff'),url('f1k.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:700;src:url('f1s.eot'),url('f1s.svg'),url('f1s.ttf'),url('f1s.woff'),url('f1s.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:700;src:url('f1t.eot'),url('f1t.svg'),url('f1t.ttf'),url('f1t.woff'),url('f1t.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:700;src:url('f1u.eot'),url('f1u.svg'),url('f1u.ttf'),url('f1u.woff'),url('f1u.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:800;src:url('f26.eot'),url('f26.svg'),url('f26.ttf'),url('f26.woff'),url('f26.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:800;src:url('f27.eot'),url('f27.svg'),url('f27.ttf'),url('f27.woff'),url('f27.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:800;src:url('f28.eot'),url('f28.svg'),url('f28.ttf'),url('f28.woff'),url('f28.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:italic;font-weight:900;src:url('f2g.eot'),url('f2g.svg'),url('f2g.ttf'),url('f2g.woff'),url('f2g.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-weight:900;src:url('f2h.eot'),url('f2h.svg'),url('f2h.ttf'),url('f2h.woff'),url('f2h.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-condensed;font-style:oblique;font-weight:900;src:url('f2i.eot'),url('f2i.svg'),url('f2i.ttf'),url('f2i.woff'),url('f2i.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:100;src:url('f34.eot'),url('f34.svg'),url('f34.ttf'),url('f34.woff'),url('f34.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:100;src:url('f35.eot'),url('f35.svg'),url('f35.ttf'),url('f35.woff'),url('f35.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:100;src:url('f36.eot'),url('f36.svg'),url('f36.ttf'),url('f36.woff'),url('f36.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:200;src:url('f3e.eot'),url('f3e.svg'),url('f3e.ttf'),url('f3e.woff'),url('f3e.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:200;src:url('f3f.eot'),url('f3f.svg'),url('f3f.ttf'),url('f3f.woff'),url('f3f.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:200;src:url('f3g.eot'),url('f3g.svg'),url('f3g.ttf'),url('f3g.woff'),url('f3g.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:300;src:url('f3o.eot'),url('f3o.svg'),url('f3o.ttf'),url('f3o.woff'),url('f3o.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:300;src:url('f3p.eot'),url('f3p.svg'),url('f3p.ttf'),url('f3p.woff'),url('f3p.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:300;src:url('f3q.eot'),url('f3q.svg'),url('f3q.ttf'),url('f3q.woff'),url('f3q.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;src:url('f42.eot'),url('f42.svg'),url('f42.ttf'),url('f42.woff'),url('f42.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;src:url('f43.eot'),url('f43.svg'),url('f43.ttf'),url('f43.woff'),url('f43.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;src:url('f44.eot'),url('f44.svg'),url('f44.ttf'),url('f44.woff'),url('f44.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:500;src:url('f4c.eot'),url('f4c.svg'),url('f4c.ttf'),url('f4c.woff'),url('f4c.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:500;src:url('f4d.eot'),url('f4d.svg'),url('f4d.ttf'),url('f4d.woff'),url('f4d.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:500;src:url('f4e.eot'),url('f4e.svg'),url('f4e.ttf'),url('f4e.woff'),url('f4e.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:600;src:url('f4m.eot'),url('f4m.svg'),url('f4m.ttf'),url('f4m.woff'),url('f4m.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:600;src:url('f4n.eot'),url('f4n.svg'),url('f4n.ttf'),url('f4n.woff'),url('f4n.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:600;src:url('f4o.eot'),url('f4o.svg'),url('f4o.ttf'),url('f4o.woff'),url('f4o.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:700;src:url('f50.eot'),url('f50.svg'),url('f50.ttf'),url('f50.woff'),url('f50.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:700;src:url('f51.eot'),url('f51.svg'),url('f51.ttf'),url('f51.woff'),url('f51.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:700;src:url('f52.eot'),url('f52.svg'),url('f52.ttf'),url('f52.woff'),url('f52.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:800;src:url('f5a.eot'),url('f5a.svg'),url('f5a.ttf'),url('f5a.woff'),url('f5a.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:800;src:url('f5b.eot'),url('f5b.svg'),url('f5b.ttf'),url('f5b.woff'),url('f5b.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:800;src:url('f5c.eot'),url('f5c.svg'),url('f5c.ttf'),url('f5c.woff'),url('f5c.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:italic;font-weight:900;src:url('f5k.eot'),url('f5k.svg'),url('f5k.ttf'),url('f5k.woff'),url('f5k.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-weight:900;src:url('f5l.eot'),url('f5l.svg'),url('f5l.ttf'),url('f5l.woff'),url('f5l.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-condensed;font-style:oblique;font-weight:900;src:url('f5m.eot'),url('f5m.svg'),url('f5m.ttf'),url('f5m.woff'),url('f5m.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:100;src:url('f68.eot'),url('f68.svg'),url('f68.ttf'),url('f68.woff'),url('f68.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:100;src:url('f69.eot'),url('f69.svg'),url('f69.ttf'),url('f69.woff'),url('f69.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:100;src:url('f6a.eot'),url('f6a.svg'),url('f6a.ttf'),url('f6a.woff'),url('f6a.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:200;src:url('f6i.eot'),url('f6i.svg'),url('f6i.ttf'),url('f6i.woff'),url('f6i.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:200;src:url('f6j.eot'),url('f6j.svg'),url('f6j.ttf'),url('f6j.woff'),url('f6j.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:200;src:url('f6k.eot'),url('f6k.svg'),url('f6k.ttf'),url('f6k.woff'),url('f6k.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:300;src:url('f6s.eot'),url('f6s.svg'),url('f6s.ttf'),url('f6s.woff'),url('f6s.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:300;src:url('f6t.eot'),url('f6t.svg'),url('f6t.ttf'),url('f6t.woff'),url('f6t.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:300;src:url('f6u.eot'),url('f6u.svg'),url('f6u.ttf'),url('f6u.woff'),url('f6u.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;src:url('f76.eot'),url('f76.svg'),url('f76.ttf'),url('f76.woff'),url('f76.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;src:url('f77.eot'),url('f77.svg'),url('f77.ttf'),url('f77.woff'),url('f77.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;src:url('f78.eot'),url('f78.svg'),url('f78.ttf'),url('f78.woff'),url('f78.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:500;src:url('f7g.eot'),url('f7g.svg'),url('f7g.ttf'),url('f7g.woff'),url('f7g.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:500;src:url('f7h.eot'),url('f7h.svg'),url('f7h.ttf'),url('f7h.woff'),url('f7h.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:500;src:url('f7i.eot'),url('f7i.svg'),url('f7i.ttf'),url('f7i.woff'),url('f7i.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:600;src:url('f7q.eot'),url('f7q.svg'),url('f7q.ttf'),url('f7q.woff'),url('f7q.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:600;src:url('f7r.eot'),url('f7r.svg'),url('f7r.ttf'),url('f7r.woff'),url('f7r.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:600;src:url('f7s.eot'),url('f7s.svg'),url('f7s.ttf'),url('f7s.woff'),url('f7s.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:700;src:url('f84.eot'),url('f84.svg'),url('f84.ttf'),url('f84.woff'),url('f84.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:700;src:url('f85.eot'),url('f85.svg'),url('f85.ttf'),url('f85.woff'),url('f85.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:700;src:url('f86.eot'),url('f86.svg'),url('f86.ttf'),url('f86.woff'),url('f86.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:800;src:url('f8e.eot'),url('f8e.svg'),url('f8e.ttf'),url('f8e.woff'),url('f8e.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:800;src:url('f8f.eot'),url('f8f.svg'),url('f8f.ttf'),url('f8f.woff'),url('f8f.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:800;src:url('f8g.eot'),url('f8g.svg'),url('f8g.ttf'),url('f8g.woff'),url('f8g.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:italic;font-weight:900;src:url('f8o.eot'),url('f8o.svg'),url('f8o.ttf'),url('f8o.woff'),url('f8o.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-weight:900;src:url('f8p.eot'),url('f8p.svg'),url('f8p.ttf'),url('f8p.woff'),url('f8p.woff2'),;}
@font-face{font-family:'f';font-stretch:condensed;font-style:oblique;font-weight:900;src:url('f8q.eot'),url('f8q.svg'),url('f8q.ttf'),url('f8q.woff'),url('f8q.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:100;src:url('f9c.eot'),url('f9c.svg'),url('f9c.ttf'),url('f9c.woff'),url('f9c.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:100;src:url('f9d.eot'),url('f9d.svg'),url('f9d.ttf'),url('f9d.woff'),url('f9d.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:100;src:url('f9e.eot'),url('f9e.svg'),url('f9e.ttf'),url('f9e.woff'),url('f9e.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:200;src:url('f9m.eot'),url('f9m.svg'),url('f9m.ttf'),url('f9m.woff'),url('f9m.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:200;src:url('f9n.eot'),url('f9n.svg'),url('f9n.ttf'),url('f9n.woff'),url('f9n.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:200;src:url('f9o.eot'),url('f9o.svg'),url('f9o.ttf'),url('f9o.woff'),url('f9o.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:300;src:url('fa0.eot'),url('fa0.svg'),url('fa0.ttf'),url('fa0.woff'),url('fa0.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:300;src:url('fa1.eot'),url('fa1.svg'),url('fa1.ttf'),url('fa1.woff'),url('fa1.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:300;src:url('fa2.eot'),url('fa2.svg'),url('fa2.ttf'),url('fa2.woff'),url('fa2.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;src:url('faa.eot'),url('faa.svg'),url('faa.ttf'),url('faa.woff'),url('faa.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;src:url('fab.eot'),url('fab.svg'),url('fab.ttf'),url('fab.woff'),url('fab.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;src:url('fac.eot'),url('fac.svg'),url('fac.ttf'),url('fac.woff'),url('fac.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:500;src:url('fak.eot'),url('fak.svg'),url('fak.ttf'),url('fak.woff'),url('fak.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:500;src:url('fal.eot'),url('fal.svg'),url('fal.ttf'),url('fal.woff'),url('fal.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:500;src:url('fam.eot'),url('fam.svg'),url('fam.ttf'),url('fam.woff'),url('fam.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:600;src:url('fau.eot'),url('fau.svg'),url('fau.ttf'),url('fau.woff'),url('fau.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:600;src:url('fav.eot'),url('fav.svg'),url('fav.ttf'),url('fav.woff'),url('fav.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:600;src:url('fb0.eot'),url('fb0.svg'),url('fb0.ttf'),url('fb0.woff'),url('fb0.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:700;src:url('fb8.eot'),url('fb8.svg'),url('fb8.ttf'),url('fb8.woff'),url('fb8.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:700;src:url('fb9.eot'),url('fb9.svg'),url('fb9.ttf'),url('fb9.woff'),url('fb9.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:700;src:url('fba.eot'),url('fba.svg'),url('fba.ttf'),url('fba.woff'),url('fba.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:800;src:url('fbi.eot'),url('fbi.svg'),url('fbi.ttf'),url('fbi.woff'),url('fbi.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:800;src:url('fbj.eot'),url('fbj.svg'),url('fbj.ttf'),url('fbj.woff'),url('fbj.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:800;src:url('fbk.eot'),url('fbk.svg'),url('fbk.ttf'),url('fbk.woff'),url('fbk.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:italic;font-weight:900;src:url('fbs.eot'),url('fbs.svg'),url('fbs.ttf'),url('fbs.woff'),url('fbs.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-weight:900;src:url('fbt.eot'),url('fbt.svg'),url('fbt.ttf'),url('fbt.woff'),url('fbt.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-condensed;font-style:oblique;font-weight:900;src:url('fbu.eot'),url('fbu.svg'),url('fbu.ttf'),url('fbu.woff'),url('fbu.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:100;src:url('fcg.eot'),url('fcg.svg'),url('fcg.ttf'),url('fcg.woff'),url('fcg.woff2'),;}
@font-face{font-family:'f';font-weight:100;src:url('fch.eot'),url('fch.svg'),url('fch.ttf'),url('fch.woff'),url('fch.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:100;src:url('fci.eot'),url('fci.svg'),url('fci.ttf'),url('fci.woff'),url('fci.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:200;src:url('fcq.eot'),url('fcq.svg'),url('fcq.ttf'),url('fcq.woff'),url('fcq.woff2'),;}
@font-face{font-family:'f';font-weight:200;src:url('fcr.eot'),url('fcr.svg'),url('fcr.ttf'),url('fcr.woff'),url('fcr.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:200;src:url('fcs.eot'),url('fcs.svg'),url('fcs.ttf'),url('fcs.woff'),url('fcs.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:300;src:url('fd4.eot'),url('fd4.svg'),url('fd4.ttf'),url('fd4.woff'),url('fd4.woff2'),;}
@font-face{font-family:'f';font-weight:300;src:url('fd5.eot'),url('fd5.svg'),url('fd5.ttf'),url('fd5.woff'),url('fd5.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:300;src:url('fd6.eot'),url('fd6.svg'),url('fd6.ttf'),url('fd6.woff'),url('fd6.woff2'),;}
@font-face{font-family:'f';font-style:italic;src:url('fde.eot'),url('fde.svg'),url('fde.ttf'),url('fde.woff'),url('fde.woff2'),;}
@font-face{font-family:'f';src:url('fdf.eot'),url('fdf.svg'),url('fdf.ttf'),url('fdf.woff'),url('fdf.woff2'),;}
@font-face{font-family:'f';font-style:oblique;src:url('fdg.eot'),url('fdg.svg'),url('fdg.ttf'),url('fdg.woff'),url('fdg.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:500;src:url('fdo.eot'),url('fdo.svg'),url('fdo.ttf'),url('fdo.woff'),url('fdo.woff2'),;}
@font-face{font-family:'f';font-weight:500;src:url('fdp.eot'),url('fdp.svg'),url('fdp.ttf'),url('fdp.woff'),url('fdp.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:500;src:url('fdq.eot'),url('fdq.svg'),url('fdq.ttf'),url('fdq.woff'),url('fdq.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:600;src:url('fe2.eot'),url('fe2.svg'),url('fe2.ttf'),url('fe2.woff'),url('fe2.woff2'),;}
@font-face{font-family:'f';font-weight:600;src:url('fe3.eot'),url('fe3.svg'),url('fe3.ttf'),url('fe3.woff'),url('fe3.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:600;src:url('fe4.eot'),url('fe4.svg'),url('fe4.ttf'),url('fe4.woff'),url('fe4.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:700;src:url('fec.eot'),url('fec.svg'),url('fec.ttf'),url('fec.woff'),url('fec.woff2'),;}
@font-face{font-family:'f';font-weight:700;src:url('fed.eot'),url('fed.svg'),url('fed.ttf'),url('fed.woff'),url('fed.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:700;src:url('fee.eot'),url('fee.svg'),url('fee.ttf'),url('fee.woff'),url('fee.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:800;src:url('fem.eot'),url('fem.svg'),url('fem.ttf'),url('fem.woff'),url('fem.woff2'),;}
@font-face{font-family:'f';font-weight:800;src:url('fen.eot'),url('fen.svg'),url('fen.ttf'),url('fen.woff'),url('fen.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:800;src:url('feo.eot'),url('feo.svg'),url('feo.ttf'),url('feo.woff'),url('feo.woff2'),;}
@font-face{font-family:'f';font-style:italic;font-weight:900;src:url('ff0.eot'),url('ff0.svg'),url('ff0.ttf'),url('ff0.woff'),url('ff0.woff2'),;}
@font-face{font-family:'f';font-weight:900;src:url('ff1.eot'),url('ff1.svg'),url('ff1.ttf'),url('ff1.woff'),url('ff1.woff2'),;}
@font-face{font-family:'f';font-style:oblique;font-weight:900;src:url('ff2.eot'),url('ff2.svg'),url('ff2.ttf'),url('ff2.woff'),url('ff2.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:100;src:url('ffk.eot'),url('ffk.svg'),url('ffk.ttf'),url('ffk.woff'),url('ffk.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:100;src:url('ffl.eot'),url('ffl.svg'),url('ffl.ttf'),url('ffl.woff'),url('ffl.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:100;src:url('ffm.eot'),url('ffm.svg'),url('ffm.ttf'),url('ffm.woff'),url('ffm.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:200;src:url('ffu.eot'),url('ffu.svg'),url('ffu.ttf'),url('ffu.woff'),url('ffu.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:200;src:url('ffv.eot'),url('ffv.svg'),url('ffv.ttf'),url('ffv.woff'),url('ffv.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:200;src:url('fg0.eot'),url('fg0.svg'),url('fg0.ttf'),url('fg0.woff'),url('fg0.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:300;src:url('fg8.eot'),url('fg8.svg'),url('fg8.ttf'),url('fg8.woff'),url('fg8.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:300;src:url('fg9.eot'),url('fg9.svg'),url('fg9.ttf'),url('fg9.woff'),url('fg9.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:300;src:url('fga.eot'),url('fga.svg'),url('fga.ttf'),url('fga.woff'),url('fga.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;src:url('fgi.eot'),url('fgi.svg'),url('fgi.ttf'),url('fgi.woff'),url('fgi.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;src:url('fgj.eot'),url('fgj.svg'),url('fgj.ttf'),url('fgj.woff'),url('fgj.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;src:url('fgk.eot'),url('fgk.svg'),url('fgk.ttf'),url('fgk.woff'),url('fgk.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:500;src:url('fgs.eot'),url('fgs.svg'),url('fgs.ttf'),url('fgs.woff'),url('fgs.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:500;src:url('fgt.eot'),url('fgt.svg'),url('fgt.ttf'),url('fgt.woff'),url('fgt.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:500;src:url('fgu.eot'),url('fgu.svg'),url('fgu.ttf'),url('fgu.woff'),url('fgu.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:600;src:url('fh6.eot'),url('fh6.svg'),url('fh6.ttf'),url('fh6.woff'),url('fh6.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:600;src:url('fh7.eot'),url('fh7.svg'),url('fh7.ttf'),url('fh7.woff'),url('fh7.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:600;src:url('fh8.eot'),url('fh8.svg'),url('fh8.ttf'),url('fh8.woff'),url('fh8.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:700;src:url('fhg.eot'),url('fhg.svg'),url('fhg.ttf'),url('fhg.woff'),url('fhg.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:700;src:url('fhh.eot'),url('fhh.svg'),url('fhh.ttf'),url('fhh.woff'),url('fhh.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:700;src:url('fhi.eot'),url('fhi.svg'),url('fhi.ttf'),url('fhi.woff'),url('fhi.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:800;src:url('fhq.eot'),url('fhq.svg'),url('fhq.ttf'),url('fhq.woff'),url('fhq.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:800;src:url('fhr.eot'),url('fhr.svg'),url('fhr.ttf'),url('fhr.woff'),url('fhr.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:800;src:url('fhs.eot'),url('fhs.svg'),url('fhs.ttf'),url('fhs.woff'),url('fhs.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:italic;font-weight:900;src:url('fi4.eot'),url('fi4.svg'),url('fi4.ttf'),url('fi4.woff'),url('fi4.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-weight:900;src:url('fi5.eot'),url('fi5.svg'),url('fi5.ttf'),url('fi5.woff'),url('fi5.woff2'),;}
@font-face{font-family:'f';font-stretch:semi-expanded;font-style:oblique;font-weight:900;src:url('fi6.eot'),url('fi6.svg'),url('fi6.ttf'),url('fi6.woff'),url('fi6.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:100;src:url('fio.eot'),url('fio.svg'),url('fio.ttf'),url('fio.woff'),url('fio.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:100;src:url('fip.eot'),url('fip.svg'),url('fip.ttf'),url('fip.woff'),url('fip.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:100;src:url('fiq.eot'),url('fiq.svg'),url('fiq.ttf'),url('fiq.woff'),url('fiq.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:200;src:url('fj2.eot'),url('fj2.svg'),url('fj2.ttf'),url('fj2.woff'),url('fj2.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:200;src:url('fj3.eot'),url('fj3.svg'),url('fj3.ttf'),url('fj3.woff'),url('fj3.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:200;src:url('fj4.eot'),url('fj4.svg'),url('fj4.ttf'),url('fj4.woff'),url('fj4.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:300;src:url('fjc.eot'),url('fjc.svg'),url('fjc.ttf'),url('fjc.woff'),url('fjc.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:300;src:url('fjd.eot'),url('fjd.svg'),url('fjd.ttf'),url('fjd.woff'),url('fjd.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:300;src:url('fje.eot'),url('fje.svg'),url('fje.ttf'),url('fje.woff'),url('fje.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;src:url('fjm.eot'),url('fjm.svg'),url('fjm.ttf'),url('fjm.woff'),url('fjm.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;src:url('fjn.eot'),url('fjn.svg'),url('fjn.ttf'),url('fjn.woff'),url('fjn.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;src:url('fjo.eot'),url('fjo.svg'),url('fjo.ttf'),url('fjo.woff'),url('fjo.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:500;src:url('fk0.eot'),url('fk0.svg'),url('fk0.ttf'),url('fk0.woff'),url('fk0.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:500;src:url('fk1.eot'),url('fk1.svg'),url('fk1.ttf'),url('fk1.woff'),url('fk1.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:500;src:url('fk2.eot'),url('fk2.svg'),url('fk2.ttf'),url('fk2.woff'),url('fk2.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:600;src:url('fka.eot'),url('fka.svg'),url('fka.ttf'),url('fka.woff'),url('fka.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:600;src:url('fkb.eot'),url('fkb.svg'),url('fkb.ttf'),url('fkb.woff'),url('fkb.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:600;src:url('fkc.eot'),url('fkc.svg'),url('fkc.ttf'),url('fkc.woff'),url('fkc.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:700;src:url('fkk.eot'),url('fkk.svg'),url('fkk.ttf'),url('fkk.woff'),url('fkk.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:700;src:url('fkl.eot'),url('fkl.svg'),url('fkl.ttf'),url('fkl.woff'),url('fkl.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:700;src:url('fkm.eot'),url('fkm.svg'),url('fkm.ttf'),url('fkm.woff'),url('fkm.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:800;src:url('fku.eot'),url('fku.svg'),url('fku.ttf'),url('fku.woff'),url('fku.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:800;src:url('fkv.eot'),url('fkv.svg'),url('fkv.ttf'),url('fkv.woff'),url('fkv.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:800;src:url('fl0.eot'),url('fl0.svg'),url('fl0.ttf'),url('fl0.woff'),url('fl0.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:italic;font-weight:900;src:url('fl8.eot'),url('fl8.svg'),url('fl8.ttf'),url('fl8.woff'),url('fl8.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-weight:900;src:url('fl9.eot'),url('fl9.svg'),url('fl9.ttf'),url('fl9.woff'),url('fl9.woff2'),;}
@font-face{font-family:'f';font-stretch:expanded;font-style:oblique;font-weight:900;src:url('fla.eot'),url('fla.svg'),url('fla.ttf'),url('fla.woff'),url('fla.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:100;src:url('fls.eot'),url('fls.svg'),url('fls.ttf'),url('fls.woff'),url('fls.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:100;src:url('flt.eot'),url('flt.svg'),url('flt.ttf'),url('flt.woff'),url('flt.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:100;src:url('flu.eot'),url('flu.svg'),url('flu.ttf'),url('flu.woff'),url('flu.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:200;src:url('fm6.eot'),url('fm6.svg'),url('fm6.ttf'),url('fm6.woff'),url('fm6.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:200;src:url('fm7.eot'),url('fm7.svg'),url('fm7.ttf'),url('fm7.woff'),url('fm7.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:200;src:url('fm8.eot'),url('fm8.svg'),url('fm8.ttf'),url('fm8.woff'),url('fm8.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:300;src:url('fmg.eot'),url('fmg.svg'),url('fmg.ttf'),url('fmg.woff'),url('fmg.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:300;src:url('fmh.eot'),url('fmh.svg'),url('fmh.ttf'),url('fmh.woff'),url('fmh.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:300;src:url('fmi.eot'),url('fmi.svg'),url('fmi.ttf'),url('fmi.woff'),url('fmi.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;src:url('fmq.eot'),url('fmq.svg'),url('fmq.ttf'),url('fmq.woff'),url('fmq.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;src:url('fmr.eot'),url('fmr.svg'),url('fmr.ttf'),url('fmr.woff'),url('fmr.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;src:url('fms.eot'),url('fms.svg'),url('fms.ttf'),url('fms.woff'),url('fms.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:500;src:url('fn4.eot'),url('fn4.svg'),url('fn4.ttf'),url('fn4.woff'),url('fn4.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:500;src:url('fn5.eot'),url('fn5.svg'),url('fn5.ttf'),url('fn5.woff'),url('fn5.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:500;src:url('fn6.eot'),url('fn6.svg'),url('fn6.ttf'),url('fn6.woff'),url('fn6.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:600;src:url('fne.eot'),url('fne.svg'),url('fne.ttf'),url('fne.woff'),url('fne.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:600;src:url('fnf.eot'),url('fnf.svg'),url('fnf.ttf'),url('fnf.woff'),url('fnf.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:600;src:url('fng.eot'),url('fng.svg'),url('fng.ttf'),url('fng.woff'),url('fng.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:700;src:url('fno.eot'),url('fno.svg'),url('fno.ttf'),url('fno.woff'),url('fno.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:700;src:url('fnp.eot'),url('fnp.svg'),url('fnp.ttf'),url('fnp.woff'),url('fnp.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:700;src:url('fnq.eot'),url('fnq.svg'),url('fnq.ttf'),url('fnq.woff'),url('fnq.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:800;src:url('fo2.eot'),url('fo2.svg'),url('fo2.ttf'),url('fo2.woff'),url('fo2.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:800;src:url('fo3.eot'),url('fo3.svg'),url('fo3.ttf'),url('fo3.woff'),url('fo3.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:800;src:url('fo4.eot'),url('fo4.svg'),url('fo4.ttf'),url('fo4.woff'),url('fo4.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:italic;font-weight:900;src:url('foc.eot'),url('foc.svg'),url('foc.ttf'),url('foc.woff'),url('foc.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-weight:900;src:url('fod.eot'),url('fod.svg'),url('fod.ttf'),url('fod.woff'),url('fod.woff2'),;}
@font-face{font-family:'f';font-stretch:extra-expanded;font-style:oblique;font-weight:900;src:url('foe.eot'),url('foe.svg'),url('foe.ttf'),url('foe.woff'),url('foe.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:100;src:url('fp0.eot'),url('fp0.svg'),url('fp0.ttf'),url('fp0.woff'),url('fp0.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:100;src:url('fp1.eot'),url('fp1.svg'),url('fp1.ttf'),url('fp1.woff'),url('fp1.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:100;src:url('fp2.eot'),url('fp2.svg'),url('fp2.ttf'),url('fp2.woff'),url('fp2.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:200;src:url('fpa.eot'),url('fpa.svg'),url('fpa.ttf'),url('fpa.woff'),url('fpa.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:200;src:url('fpb.eot'),url('fpb.svg'),url('fpb.ttf'),url('fpb.woff'),url('fpb.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:200;src:url('fpc.eot'),url('fpc.svg'),url('fpc.ttf'),url('fpc.woff'),url('fpc.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:300;src:url('fpk.eot'),url('fpk.svg'),url('fpk.ttf'),url('fpk.woff'),url('fpk.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:300;src:url('fpl.eot'),url('fpl.svg'),url('fpl.ttf'),url('fpl.woff'),url('fpl.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:300;src:url('fpm.eot'),url('fpm.svg'),url('fpm.ttf'),url('fpm.woff'),url('fpm.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;src:url('fpu.eot'),url('fpu.svg'),url('fpu.ttf'),url('fpu.woff'),url('fpu.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;src:url('fpv.eot'),url('fpv.svg'),url('fpv.ttf'),url('fpv.woff'),url('fpv.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;src:url('fq0.eot'),url('fq0.svg'),url('fq0.ttf'),url('fq0.woff'),url('fq0.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:500;src:url('fq8.eot'),url('fq8.svg'),url('fq8.ttf'),url('fq8.woff'),url('fq8.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:500;src:url('fq9.eot'),url('fq9.svg'),url('fq9.ttf'),url('fq9.woff'),url('fq9.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:500;src:url('fqa.eot'),url('fqa.svg'),url('fqa.ttf'),url('fqa.woff'),url('fqa.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:600;src:url('fqi.eot'),url('fqi.svg'),url('fqi.ttf'),url('fqi.woff'),url('fqi.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:600;src:url('fqj.eot'),url('fqj.svg'),url('fqj.ttf'),url('fqj.woff'),url('fqj.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:600;src:url('fqk.eot'),url('fqk.svg'),url('fqk.ttf'),url('fqk.woff'),url('fqk.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:700;src:url('fqs.eot'),url('fqs.svg'),url('fqs.ttf'),url('fqs.woff'),url('fqs.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:700;src:url('fqt.eot'),url('fqt.svg'),url('fqt.ttf'),url('fqt.woff'),url('fqt.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:700;src:url('fqu.eot'),url('fqu.svg'),url('fqu.ttf'),url('fqu.woff'),url('fqu.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:800;src:url('fr6.eot'),url('fr6.svg'),url('fr6.ttf'),url('fr6.woff'),url('fr6.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:800;src:url('fr7.eot'),url('fr7.svg'),url('fr7.ttf'),url('fr7.woff'),url('fr7.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:800;src:url('fr8.eot'),url('fr8.svg'),url('fr8.ttf'),url('fr8.woff'),url('fr8.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:italic;font-weight:900;src:url('frg.eot'),url('frg.svg'),url('frg.ttf'),url('frg.woff'),url('frg.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-weight:900;src:url('frh.eot'),url('frh.svg'),url('frh.ttf'),url('frh.woff'),url('frh.woff2'),;}
@font-face{font-family:'f';font-stretch:ultra-expanded;font-style:oblique;font-weight:900;src:url('fri.eot'),url('fri.svg'),url('fri.ttf'),url('fri.woff'),url('fri.woff2'),;}

body{font-family:'f';}
div>div{padding:0 20px;}
.a0{font-stretch:ultra-condensed;}
.a1{font-stretch:extra-condensed;}
.a2{font-stretch:condensed;}
.a3{font-stretch:semi-condensed;}
.a5{font-stretch:semi-expanded;}
.a6{font-stretch:expanded;}
.a7{font-stretch:extra-expanded;}
.a8{font-stretch:ultra-expanded;}
.b0{font-weight:100;}
.b1{font-weight:200;}
.b2{font-weight:300;}
.b4{font-weight:500;}
.b5{font-weight:600;}
.b6{font-weight:700;}
.b7{font-weight:800;}
.b8{font-weight:900;}
.c0{font-style:italic;}
.c2{font-style:oblique;}

## fontface.php
#!/usr/bin/php
<?php
/**
 * @file
 * CLI command to generate the necessary HTML and CSS.
 */

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
ini_set('xdebug.max_nesting_level', 200);

$name = 'f';
$font_stretch = array(
  'ultra-condensed',
  'extra-condensed',
  'condensed',
  'semi-condensed',
  'normal',
  'semi-expanded',
  'expanded',
  'extra-expanded',
  'ultra-expanded',
);
$font_style = array(
  'italic',
  'normal',
  'oblique',
);
$font_weight = array(
  '100',
  '200',
  '300',
  '400',
  '500',
  '600',
  '700',
  '800',
  '900',
);
$src = array(
  'eot',
//  'otf',
  'svg',
  'ttf',
  'woff',
  'woff2',
);

// eot = 28, otf = 80, svg = 150, ttf = 215, woff = 25, woff2 = 20
$kb = 438;
$src_payload = 106434; // 106,434 kb or 106 MB (First CERN site was 2.2 kb)

// Create the CSS for handling all these variants.
$handle = fopen('f.css', 'x');

foreach ($font_stretch as $i => $stretch) {
  foreach ($font_weight as $j => $weight) {
    foreach ($font_style as $k => $style) {
      $output = "@font-face{font-family:'f';";
      if ($stretch !== 'normal') {
        $output .= 'font-stretch:' . $stretch . ';';
      }
      if ($style !== 'normal') {
        $output .= 'font-style:' . $style . ';';
      }
      if ($weight !== '400') {
        $output .= 'font-weight:' . $weight . ';';
      }

      $output .= 'src:';
      foreach ($src as $l => $this_src) {
        $output .= "url('f" . base_convert($i . $j . $k, 10, 32) . '.' . $this_src . "')";
        if ($l < 5) {
          $output .= ',';
        }
      }
      $output .= ";}\n";
      fwrite($handle, $output);
    }
  }
}

// Append classes for the html file.
$output = "\nbody{font-family:'f';}\ndiv>div{padding:0 20px;}\n";
foreach ($font_stretch as $i => $stretch) {
  if ($stretch !== 'normal') {
    $output .= '.a' . $i . '{font-stretch:' . $stretch . ";}\n";
  }
}
foreach ($font_weight as $j => $weight) {
  if ($weight !== '400') {
    $output .= '.b' . $j . '{font-weight:' . $weight . ";}\n";
  }
}
foreach ($font_style as $k => $style) {
  if ($style !== 'normal') {
    $output .= '.c' . $k . '{font-style:' . $style . ";}\n";
  }
}
fwrite($handle, $output);
fclose($handle);

// Create the smallest possible HTML.
$handle = fopen('index.html', 'x');
$fragment = file_get_contents('fragment.html');
fwrite($handle, $fragment);

$output = '';
foreach ($font_stretch as $i => $stretch) {
  $output .= '<div class="a' . $i . '">' . $stretch . "\n";
  foreach ($font_weight as $j => $weight) {
    $output .= '  <div class="b' . $j . '">' . $weight . "\n";
    foreach ($font_style as $k => $style) {
      if ($style !== 'normal') {
        $output .= '    <div class="c' . $k . '">' . $style . '</div>' . "\n";
      }
    }
    $output .= '  </div>' . "\n";
  }
  $output .= '</div>' ."\n";
}
$output .= '</body></html>';
fwrite($handle, $output);
fclose($handle);

## fragment.html
<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>f font demo</title>
  <link href="f.css" rel="stylesheet" type="text/css" />
</head><body>

## index.html
<!DOCTYPE html>
<html><head>
  <meta charset="utf-8">
  <title>f font demo</title>
  <link href="f.css" rel="stylesheet" type="text/css" />
</head><body>
<div class="a0">ultra-condensed
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a1">extra-condensed
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a2">condensed
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a3">semi-condensed
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a4">normal
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a5">semi-expanded
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a6">expanded
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a7">extra-expanded
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
<div class="a8">ultra-expanded
  <div class="b0">100
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b1">200
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b2">300
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b3">400
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b4">500
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b5">600
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b6">700
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b7">800
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
  <div class="b8">900
    <div class="c0">italic</div>
    <div class="c2">oblique</div>
  </div>
</div>
</body></html>
	#!/usr/bin/php
	<?php
	/**
	* @file
	* CLI command to generate the necessary HTML and CSS.
	*/

	error_reporting(E_ALL);
	ini_set('display_errors', TRUE);
	ini_set('display_startup_errors', TRUE);
	ini_set('xdebug.max_nesting_level', 200);

	$name = 'f';
	$font_stretch = array(
	'ultra-condensed',
	'extra-condensed',
	'condensed',
	'semi-condensed',
	'normal',
	'semi-expanded',
	'expanded',
	'extra-expanded',
	'ultra-expanded',
	);
	$font_style = array(
	'italic',
	'normal',
	'oblique',
	);
	$font_weight = array(
	'100',
	'200',
	'300',
	'400',
	'500',
	'600',
	'700',
	'800',
	'900',
	);
	$src = array(
	'eot',
	// 'otf',
	'svg',
	'ttf',
	'woff',
	'woff2',
	);

	// eot = 28, otf = 80, svg = 150, ttf = 215, woff = 25, woff2 = 20
	$kb = 438;
	$src_payload = 106434; // 106,434 kb or 106 MB (First CERN site was 2.2 kb)

	// Create the CSS for handling all these variants.
	$handle = fopen('f.css', 'x');

	foreach ($font_stretch as $i => $stretch) {
	foreach ($font_weight as $j => $weight) {
	foreach ($font_style as $k => $style) {
	$output = "@font-face{font-family:'f';";
	if ($stretch !== 'normal') {
	$output .= 'font-stretch:' . $stretch . ';';
	}
	if ($style !== 'normal') {
	$output .= 'font-style:' . $style . ';';
	}
	if ($weight !== '400') {
	$output .= 'font-weight:' . $weight . ';';
	}

	$output .= 'src:';
	foreach ($src as $l => $this_src) {
	$output .= "url('f" . base_convert($i . $j . $k, 10, 32) . '.' . $this_src . "')";
	if ($l < 5) {
	$output .= ',';
	}
	}
	$output .= ";}\n";
	fwrite($handle, $output);
	}
	}
	}

	// Append classes for the html file.
	$output = "\nbody{font-family:'f';}\ndiv>div{padding:0 20px;}\n";
	foreach ($font_stretch as $i => $stretch) {
	if ($stretch !== 'normal') {
	$output .= '.a' . $i . '{font-stretch:' . $stretch . ";}\n";
	}
	}
	foreach ($font_weight as $j => $weight) {
	if ($weight !== '400') {
	$output .= '.b' . $j . '{font-weight:' . $weight . ";}\n";
	}
	}
	foreach ($font_style as $k => $style) {
	if ($style !== 'normal') {
	$output .= '.c' . $k . '{font-style:' . $style . ";}\n";
	}
	}
	fwrite($handle, $output);
	fclose($handle);

	// Create the smallest possible HTML.
	$handle = fopen('index.html', 'x');
	$fragment = file_get_contents('fragment.html');
	fwrite($handle, $fragment);

	$output = '';
	foreach ($font_stretch as $i => $stretch) {
	$output .= '<div class="a' . $i . '">' . $stretch . "\n";
	foreach ($font_weight as $j => $weight) {
	$output .= ' <div class="b' . $j . '">' . $weight . "\n";
	foreach ($font_style as $k => $style) {
	if ($style !== 'normal') {
	$output .= ' <div class="c' . $k . '">' . $style . '</div>' . "\n";
	}
	}
	$output .= ' </div>' . "\n";
	}
	$output .= '</div>' ."\n";
	}
	$output .= '</body></html>';
	fwrite($handle, $output);
	fclose($handle);
	<!DOCTYPE html>
	<html><head>
	<meta charset="utf-8">
	<title>f font demo</title>
	<link href="f.css" rel="stylesheet" type="text/css" />
	</head><body>