diff --git a/src/font/Gilbert-Color Bold Preview5.otf b/src/font/Gilbert-Color Bold Preview5.otf new file mode 100644 index 0000000..f21f9a1 Binary files /dev/null and b/src/font/Gilbert-Color Bold Preview5.otf differ diff --git a/src/font/Gilbert-Color Bold Preview5.woff2 b/src/font/Gilbert-Color Bold Preview5.woff2 new file mode 100644 index 0000000..49453b8 Binary files /dev/null and b/src/font/Gilbert-Color Bold Preview5.woff2 differ diff --git a/src/font/Gilbert-Color.ttf b/src/font/Gilbert-Color.ttf new file mode 100644 index 0000000..0585a15 Binary files /dev/null and b/src/font/Gilbert-Color.ttf differ diff --git a/src/font/Gilbert-Color.woff2 b/src/font/Gilbert-Color.woff2 new file mode 100644 index 0000000..85e9114 Binary files /dev/null and b/src/font/Gilbert-Color.woff2 differ diff --git a/src/font/Gilbert-Color_COLRv0.ttf b/src/font/Gilbert-Color_COLRv0.ttf new file mode 100644 index 0000000..03557b9 Binary files /dev/null and b/src/font/Gilbert-Color_COLRv0.ttf differ diff --git a/src/font/Gilbert-Color_COLRv0.woff2 b/src/font/Gilbert-Color_COLRv0.woff2 new file mode 100644 index 0000000..86d24f2 Binary files /dev/null and b/src/font/Gilbert-Color_COLRv0.woff2 differ diff --git a/src/font/Gilbert-Color_COLRv1.ttf b/src/font/Gilbert-Color_COLRv1.ttf new file mode 100644 index 0000000..c351bbf Binary files /dev/null and b/src/font/Gilbert-Color_COLRv1.ttf differ diff --git a/src/font/Gilbert-Color_COLRv1.woff2 b/src/font/Gilbert-Color_COLRv1.woff2 new file mode 100644 index 0000000..b15d37e Binary files /dev/null and b/src/font/Gilbert-Color_COLRv1.woff2 differ diff --git a/src/font/Gilbert-Color_SVG+COLRv0.ttf b/src/font/Gilbert-Color_SVG+COLRv0.ttf new file mode 100644 index 0000000..f76c318 Binary files /dev/null and b/src/font/Gilbert-Color_SVG+COLRv0.ttf differ diff --git a/src/font/Gilbert-Color_SVG+COLRv0.woff2 b/src/font/Gilbert-Color_SVG+COLRv0.woff2 new file mode 100644 index 0000000..8516240 Binary files /dev/null and b/src/font/Gilbert-Color_SVG+COLRv0.woff2 differ diff --git a/src/font/Gilbert-Color_SVG+COLRv1.ttf b/src/font/Gilbert-Color_SVG+COLRv1.ttf new file mode 100644 index 0000000..750c1a7 Binary files /dev/null and b/src/font/Gilbert-Color_SVG+COLRv1.ttf differ diff --git a/src/font/Gilbert-Color_SVG+COLRv1.woff2 b/src/font/Gilbert-Color_SVG+COLRv1.woff2 new file mode 100644 index 0000000..f912b45 Binary files /dev/null and b/src/font/Gilbert-Color_SVG+COLRv1.woff2 differ diff --git a/src/font/README.md b/src/font/README.md new file mode 100644 index 0000000..b34ca21 --- /dev/null +++ b/src/font/README.md @@ -0,0 +1,50 @@ +# Gilbert Webfont + +This work is licensed under +a [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/) License + +This is the `Gilbert` font from https://www.typewithpride.com/ converted to a COLRv0 webfont that should work in all +major browsers. + +see here for more details: https://github.com/googlefonts/nanoemoji/issues/435 + +## Files + +Always use the .woff2 variants of files as they are compressed and much smaller + +| Filename | Size | Size (woff2) | Format | Works in | Description | +|-----------------------------------|-------|--------------|---------------|------------------------------------------------|--------------------------------------------------------------------------------| +| `Gilbert-Color Bold Preview5.otf` | 626kb | 96kb | OT-SVG | Firefox only | The original Font from [www.typewithpride.com](https://www.typewithpride.com/) | +| `Gilbert-Color.ttf` | 542kb | 76kb | OT-SVG | Firefox only | The same as above, but converted to TTF (needed for next steps) | +| `Gilbert-Color_SVG+COLRv1.ttf` | 597kb | 99kb | OT-SVG+COLRv1 | [Chrome](https://caniuse.com/colr-v1) | | +| `Gilbert-Color_COLRv1.ttf` | 119kb | 39kb | COLRv1 | [Chrome](https://caniuse.com/colr-v1) | | +| `Gilbert-Color_SVG+COLRv0.ttf` | 587kb | 94kb | OT-SVG+COLRv0 | [all major browsers](https://caniuse.com/colr) | | +| `Gilbert-Color_COLRv0.ttf` | 109kb | 33kb | COLRv0 | [all major browsers](https://caniuse.com/colr) | | + +### Conversions + +#### OTF -> TTF + +[otf2ttf.py](https://github.com/fonttools/fonttools/blob/main/Snippets/otf2ttf.py) + +```bash +python otf2ttf.py `Gilbert-Color Bold Preview5.otf` -o `Gilbert-Color.ttf` +``` + +#### OT-SVG -> COLRv1 + +using [nanoemoji](https://github.com/googlefonts/nanoemoji) + +```bash + +maximum_color Gilbert-Color.ttf --output_file Gilbert-Color_SVG+COLRv1.ttf +ttx -x SVG Gilbert-Color_SVG+COLRv1.ttf +ttx Gilbert-Color_SVG+COLRv1.ttx +mv Gilbert-Color_SVG+COLRv1#1.ttf Gilbert-Color_COLRv1.ttf + +``` + +#### OT-SVG -> COLRv0 + +same as COLRv1, but with [otsvg-to-colrv0](https://github.com/googlefonts/nanoemoji/compare/otsvg-to-colrv0?expand=1) +branch diff --git a/src/font/webfont.css b/src/font/webfont.css new file mode 100644 index 0000000..ba89b4f --- /dev/null +++ b/src/font/webfont.css @@ -0,0 +1,5 @@ +@font-face { + font-family: Gilbert-Color; + font-weight: bold; + src: url("./Gilbert-Color_COLRv0.woff2"); +} diff --git a/src/main.ts b/src/main.ts index fef962a..0baf37d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,3 +1,4 @@ +import "./font/webfont.css" import "./style.scss" import "./map" diff --git a/src/style.scss b/src/style.scss index e7538b3..1b05b43 100644 --- a/src/style.scss +++ b/src/style.scss @@ -30,6 +30,8 @@ html, body { .name { font-weight: bold; text-align: center; + font-family: Gilbert-Color, sans-serif; + font-size: 170%; } .star {