glyphhanger
fontfaceobserver
glyphhanger | fontfaceobserver | |
---|---|---|
3 | 6 | |
634 | 4,236 | |
- | - | |
0.0 | 1.6 | |
about 1 year ago | 6 months ago | |
JavaScript | JavaScript | |
MIT License | BSD 2-clause "Simplified" License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
glyphhanger
-
The new Google Fonts: find what you’re looking for
For subsetting Glyphhanger works really well: https://github.com/zachleat/glyphhanger
-
Optimizing fonts for the web
Let's subset Jost-400-Book.ttf (88.7 kb) from Jost * using glyphhanger.
-
🧢 Stefan's Web Weekly #10
zachleat/glyphhanger – Your web font utility belt.
fontfaceobserver
-
Strange Pixel Artifacts?
As for the flash of fallback fonts that occurs before the used google fonts are fully loaded (also known as FOUT or flash of unstyled text / type), one simple solution is to hide the root layout's content on init by wrapping everything in an element and hiding it or by displaying a "loading..." overlay. Then, all you have to do is detect when the webfonts are loaded, using something like FontFaceObserver, to reveal your app by updating the variable your wrapper's css class or the overlay element's display is bound to.
-
How to use self-hosted fonts face using NextJS?
✗ https://github.com/bramstein/fontfaceobserver 456 KB
-
Font loading strategies: FOIT and FOUT
Another method, though involves more code but can work across all browsers involve the use of an external library called FontFaceObserver. To make this work, you have to;
-
Font Loading with FontFace Observer - Getting Started
Github
-
Variable Fonts in Your Web Projects - Getting Started
I wrote about loading a variable font that uses FontFaceObserver. This can be used to optimize your font loading.
-
Can you specify a fallback font with a different font-style?
I am not familiar with ePUB but you could use something like FontFaceObserver to do this pretty easily:
What are some alternatives?
opentype.js - Read and write OpenType fonts using JavaScript.
unplugin-fonts - Universal Webfont loader - Unfonts - based on https://web.dev/optimize-webfont-loading/
11ty-web-component-generator - Use the power of 11ty to generate web components (custom elements).
fontsource - Self-host Open Source fonts in neatly bundled NPM packages.
operator-mono-lig - Add ligatures to Operator Mono similar to Fira Code
glyphhanger - Your web font utility belt. It can subset web fonts. It can find unicode-ranges for you automatically. It makes julienne fries.
Old-Hangul-Input-Method - Javascript-based IME for typing archaic Korean Hangul letters (e.g. ㅸ, ㅿ, ㅵ) easily
Hack - A typeface designed for source code
woff2
MaterialDesign - ✒7000+ Material Design Icons from the Community
next-fonts - Import fonts in Next.js (supports woff, woff2, eot, ttf, otf & svg)