Generate a CSS file like Google Fonts

Question

I have been using webfonts on my website for a while. (My website is using WordPress.)

I'm quite interested in using WOFF2 because of better compression. Currently, I'm using Noto Sans Japanese (via Google Fonts) for Japanese text.

However, I prefer the font M+ C Type-2 as its Japanese glyphs look much better on small sizes (16px). I have added font hinting and converted the font above into WOFF2 and WOFF successfully.

Then I find out that Google Fonts API serves a different CSS file for each browser.

I'm uploading the fonts I want to Google Drive and I want to serve them via such dynamic CSS like that. How should I do?

Answer 1

If you want to do that you will need server-side code, but as you are using Google Drive you may want to add more font extensions so each browser uses the right one.

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/fontawesome-webfont.woff') format('woff'),
       url('/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('/fonts/fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

Use FontSquirrel font generator, it's so popular.