typefaces
typefaces copied to clipboard
KyleAMathews
Allow to import character subsets other than Latin
Tried it locally but it doesn't seem to be working.
Try running it locally:
- clone https://github.com/majodev/google-webfonts-helper
- Install its dependencies and start its server by running
npm start - Try creating a google font file —
node scripts/create-package-from-google-font-id.js roboto
Alright, I cannot make google-webfonts-helper working with node v8, it's works on v0.10 though (typefaces repository works great on v8 and v9). I cannot say more than it works for me :P Clean node modules installation. Here is a video to prove it (maybe you will notice if I do something differently than you?)
Oh hmmm sorry — I ran yarn in typefaces and it started working, oops!
So yeah, managed to generate a bunch of new css files.
I'm not familiar with loading font files for additional languages. Can you really just require the latin & greek versions together? And the browser will figure it out? Looking at the CSS files, it seems they'd clash with each other since the @font-face stuff is the same except for which file it's pointing to.
Yeah, this solution has a major flaw - it's not possible to include Greek AND Cyrillic charsets on the same page. I've copied default behavior of google-webfonts-helper, that means cyrillic.css contains Cyrillic and Latin characters, greek.css includes Greek and Latin and so on. This info is included in updated README of each font package I believe.
Well, there is probably better (I mean "ultimate") solution for this issue, like dynamically created CSS files for every possible combination of charsets, but until we want to stick to static files (which is quite good in my opinion, because it's simple), this one is the best approach I came with. Notice this one isn't breaking change, it shouldn't be major version update even :) So next iteration may be making it more generic/elastic.
The other idea I have is to create second sets of packages, like typeface-roboto-multilang and keep this one as it is for now, so it could be extended in more universal manner once we find out how.
Hey, it's now more than two months since I've opened the PR. Could we do something with it, just move on?
Just a note, while waiting for this to be merged, would be useful to add usage instructions to the README.md
@ryall It is in README. The one inside generated package :) Look at scripts/templates.js.
And what we must to do now to install specific subsets? For example, roboto cyrillic?
@koutsenko you can get this particular one through this package: https://www.npmjs.com/package/typeface-roboto-multilang. I've published it with code from this PR.
@erykpiast thnx, but i already switched to roboto-fontface package. The only reason i tried to use typeface-roboto package was an material-ui-next project recommendations. Why your work wasn't merged here?
@KyleAMathews ping about merging this please? Lack of support for Latin Extended stopped me from using typeface-hind (which looked really promising to streamline font installation and deployment), having to unfortunately devise some manual method of downloading and importing fonts which I am doing right now. Life would be just so much easier if I could use typeface-hind for Latin Extended (and not only for Latin). Thanks.
how about including just the "full" source font file and let the user build the needed fonts by them self? you could include a simple Promise based tool, this should be a simple solution for this issue.
import gulp from 'gulp';
import fontUbuntu from 'typeface-ubuntu';
gulp.task('font', () => fontUbuntu({
charsets: ['greek', 'latin'],
styles: ['regular', '300'],
dest: 'path_to_dest_directory',
}));
@KyleAMathews one of the issues with not using GF API is that the API now uses unicode-range; it would be good to avoid this whole issue by doing the same :)
@cezarneaga I've published this version of the project (Roboto font only) as the [separate package] (https://www.npmjs.com/package/typeface-roboto-multilang). Readme is not adjusted, so use it like require('typeface-roboto-multilang/latin-ext.css');