inter icon indicating copy to clipboard operation
inter copied to clipboard

Ability to "compile" font files with certain glyphs/features configurations

Open beojan opened this issue 6 years ago • 13 comments
trafficstars

Would it be possible to add some way to change the default set of enabled features, for use cases where it isn't possible to select these in the application (e.g. when setting Inter UI as the default desktop font)?

beojan avatar Dec 31 '18 11:12 beojan

I'm not sure how much work it would be to allow this, but it would require on-the-fly font file compilation, which is complicated. Might be a lot of work, but I'm not sure. Would be great if someone could research this and viable approaches & solutions.

rsms avatar Jan 02 '19 02:01 rsms

Iosevka already has this, but the way that font is built is very different to Inter.

beojan avatar Jan 02 '19 11:01 beojan

I think one quick win here could be sub-setting by utf8 character ranges similar to what google fonts does since this is also matched in CSS, likely reducing the amount of bytes downloaded by the end user.

jbergstroem avatar Jan 07 '19 15:01 jbergstroem

Subsetting is easy to do yourself.

Here's an example: (requires docker to be installed)

cat <<EOF | misc/vm --no-tty

make build/fonts/const/Inter-UI-Regular.ttf

pyftsubset build/fonts/const/Inter-UI-Regular.ttf \
  --unicodes=0000-0080 \
  --output-file=build/fonts/const/Inter-UI-Regular.basic_latin.ttf

woff2_compress build/fonts/const/Inter-UI-Regular.basic_latin.ttf

EOF

See misc/vm pyftsubset --help for detailed help.

rsms avatar Jan 07 '19 17:01 rsms

@rsms said: Subsetting is easy to do yourself.

Nice - didn't know about pyftsubset. Everything is easy if you know how 😄

Edit: out of curiosity, have you considered subsetting Inter as part of release?

jbergstroem avatar Jan 07 '19 20:01 jbergstroem

There’s also pyftfeatfreeze.

svenper avatar Jan 30 '19 07:01 svenper

Hi! I ended up using https://github.com/filamentgroup/glyphhanger to subset, using the --US_ASCII, --LATIN, and a few other specific whitelist ranges, and was able to get the variable version down to ~100kb for upright and italic. Thanks!

VinSpee avatar Aug 23 '19 18:08 VinSpee

There’s also pyftfeatfreeze.

Oh, OpenType Feature Freezer is really neat. I often get the question of how to swap alternates.

rsms avatar Aug 18 '20 00:08 rsms

@rsms Just a thought, but you could automate creation of language-specific subsets using Github Actions.

I wrote a Github Action to do this. You'd just need to add a script that generates the subsets when it is run called build_subsets.py.

  1. Create a file .github/workflows/subset.yml .
  2. Add the following:
name: Build subsets
on:
  push:
    branches: [master]
jobs:
  build_subsets:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          persist-credentials: false
          fetch-depth: 0
      - uses: actions/setup-python@v2
        with:
          python-version: '3.x'
          architecture: 'x64'
      # - run: python build_subsets.py # < Add subset script here
      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git commit -m "Add changes" -a
      - name: Push changes
        uses: ad-m/github-push-action@master
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}

  1. Add your build_subsets.py script to the repo, which generates the subsets.

I tested this to ensure it runs as expected and built a demo.

Happy to submit this as a PR, then you could push a commit containing the build_subsets.py script, if you'd like.

jasongitmail avatar Aug 19 '20 21:08 jasongitmail

Neat idea @jasongitmail :-)

The docs folder in the Inter repo is "special" in that it is deployed by GitHub Pages to the official website and thus the font files in there must be synchronized with the current latest release on github (so that the website correctly reflect the fonts you may download and/or use via the CDN.)

There may not be an upside to using github actions for this. The async nature of GH action is an issue as well (the time it would take GH actions to complete its work is the duration of time when font files will be out of sync for users.)

An even better PR would be a subset script that can be run by the deploy script (or manually from a checkout) to generate subset font files!

rsms avatar Aug 20 '20 01:08 rsms

If it's just Github pages, I think we could make it work.

Individual steps within a job run synchronously, so we can put a Github Pages deploy step (see snippet below) as the last step after any other steps it depends on--like subset generation. Then change the repo's Github Pages branch to a non-master branch (e.g. gh-pages) so that the website content & fonts only get deployed after everything works successfully. If any step fails (like the subset generation), then Github Actions bails and does not deploy.

The subset generation script would need to have a return value to indicate success (0) or failure (non 0).

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./docs
          publish_branch: gh-pages

An even better PR would be a subset script that can be run by the deploy script (or manually from a checkout) to generate subset font files!

I honestly know nothing about subsetting fonts. Just hoping to get an Inter Var English subset to save 100kb ;) But happy to help automate it!

jasongitmail avatar Aug 20 '20 02:08 jasongitmail

Update on subsetting: 4eee1377a7c68be4bb6dd6246c170508564de74e adds a subset program which when run generates chunks of subset font files and accompanying CSS.

57e80b4ab06b6b80a2bf1b35fd7aa8efdbafa0f0 deploys this to the website and CDN. This mean that if you are loading inter from https://rsms.me/inter/inter.css you will automatically use subset/split font files. If you serve font files yourself, you'll want to download the subset font files from github:inter/docs/font-files

In most cases you should see improved load times over slow network connections: Screen Shot 2020-08-21 at 16 12 49

rsms avatar Aug 21 '20 23:08 rsms

Incredible! Saved ~170kb. Thanks for creating these @rsms!

jasongitmail avatar Aug 22 '20 17:08 jasongitmail