bdusell / webfont-generator

Locally convert fonts to web formats and generate CSS rules
MIT License
190 stars 34 forks source link

[suggestion] CSS generating with real font-family using otfinfo #16

Closed ghost closed 6 years ago

ghost commented 6 years ago

I've been playing with a CSS generator for my Windows based webkit-generator, that uses otfinfo --quiet --family filename.ttf (it first generates one if the input file is not a ttf one), so it won't relay on whatever the filename is, but for the "font-family" entry stored in the file itself.

mine uses otfinfo from Cygwin with a Windows batch file, it does not generate the font-weight or the style, although it is too, possible, (but I think fc-scan might be better for this).

here is a CSS auto-generated from the NotoEmoji-Regular.ttf file:

@font-face{
 font-weight:400; font-style:normal; font-display:swap; font-family:'Noto Emoji';
 src: url('NotoEmoji-Regular.eot');
 src: local('Noto Emoji')
     ,local('NotoEmoji-Regular.ttf')
     ,url('NotoEmoji-Regular.eot?#iefix')  format('embedded-opentype')
     ,url('NotoEmoji-Regular.otf')         format('opentype')
     ,url('NotoEmoji-Regular.ttf')         format('truetype')
     ,url('NotoEmoji-Regular.woff2')       format('woff2')
     ,url('NotoEmoji-Regular.woff')        format('woff')
     ,url('NotoEmoji-Regular.svg#svg')     format('svg')
     ;
}

html, input, textarea{  /*for example...*/
  font-family: 'Noto Emoji', sans-serif;
}

I think it will be great in your generator since it is *nix-native, so you won't need to do all the weird pipe-things I use to grab the output :] (and the file-name can always be used as a fallback for any reason)

bdusell commented 6 years ago

Cool, I'll look into this. Maybe this can help with #7. Thanks!

ghost commented 6 years ago

#7- it might, I avoided working directly with the input file, by first converting it to all the types, then got the information from the TTF (and last, generated the CSS).