Don’t rely on Google Fonts for hosting type: https://pimpmytype.com/google-fonts-hosting/

#dependencies #webdesign #fonts #typography #frontend #ui #webFonts #GoogleFonts #Google

Any variable web font experts have time to help me out? I’m trying to animate the weight axis of individual letters in a mono width variable font, but the kerning gets janky when the weight changes. I can turn off kerning, but I'd rather not.

I made a CodePen. This isn’t the font I’m using (respecting the license), but I’m having the same issue. I may be trying to do something impossible because they’re in `span`s.

https://codepen.io/srwild/pen/LEPwVPZ

#VariableFonts #WebFonts

For the enthusiastic, who want to go beyond a canned demo: it is all on GitHub

https://github.com/garretrieger/ift-demo

There is a client (in rust, transpiled to wasm) with brotli, harfbuz and woff2 support; the sample texts are in a json file so you can edit them or add your own.

Initial font subset, and the various patches, use a mixed (glyph and table keyed) encoding as described here

https://github.com/w3c/ift-encoder/blob/main/docs/experimental/closure_glyph_segmentation.md

and the implementation is also on GitHub

https://github.com/w3c/ift-encoder/tree/main

#webfonts

The @w3c WebFonts working group now has a fully functional Demo of Incremental Font Transfer which compares IFT to normal font loading with Unicode-range static subsetting. Just click on "next text sample" to see the font being upgraded in real time to support more writing systems and more font variation axes. There is a running total of bytes transferred, you can see that IFT loads much less data.

Both CFF2 and glyf fonts are used in the demo.

https://garretrieger.github.io/ift-demo/

#webfonts

"otf.show" - "otf.show" is an interactive showcase of OpenType features. We hope it helps designers and developers to explore and achieve better typography on the web.
https://otf.thien.do/lnum
#WebFonts • New #link just added to #Otter.

🚀 Oh, joy! Yet another groundbreaking revelation: web fonts now need #protection from the *big bad memory wolves*! 🐺💻 Meanwhile, the rest of us are left pondering: did someone just reinvent the wheel, or did the Chrome team just discover fire? 🔥🌐
https://developer.chrome.com/blog/memory-safety-fonts #webfonts #memorymanagement #Chromeinnovation #reinventingthewheel #technews #HackerNews #ngated

Memory Safety for Web Fonts

https://developer.chrome.com/blog/memory-safety-fonts

#HackerNews #MemorySafety #WebFonts #ChromeSecurity #DeveloperTools #TechNews

Thinking about the wasteful nature of #LLMs got me thinking about waste in my own development. While it can be convenient to use the large, enterprise-grade frameworks to deliver a minimalist website in 2025 - it's absurd.

Do I really need #laravel with #react, #jquery, #tailwind, #webFonts, #postgres to host some simple #markdown?

Do I need to re-render a bunch of static content at every hit? Does every simple article require 64 connections to the server to display?

I think not.

I want my material to be available to anyone who wants it - regardless of the device they are using or the robustness of their connection.

I want to respect users who disable #javascript for their personal protection.

I want to respect #ScreenReaders and users of assistive technology, without unnecessary complexity.

Everything we need is built into the HTML and CSS specs.

Using some of my mana inside ye olde StackOverflow to get an answer to whether a web font can be interrogated as to whether it has a particular character. Already 2 interesting answers added to an older question. #webdev #typography #webfonts https://stackoverflow.com/questions/9005580/how-to-check-if-the-font-has-a-symbol/79435970#79435970

Any variable web font experts have time to help me out? I’m trying to animate the weight axis of individual letters in a mono width variable font, but the kerning gets janky when the weight changes. The only solution I’ve found is turning off kerning, which is not an option. I replicated the issue on CodePen. This isn’t the font I’m using (I’m respecting the license), but I’m having the same issue.

https://codepen.io/srwild/pen/LEPwVPZ

#WebFonts #VariableFonts #WebTypography

Ich hab mal ein Überblicksvideo zu Web-Fonts gemacht, was es da gibt (z.B. Variable Fonts) und wie man die performant und zugeschnitten verwenden kann (Subsetting, Preload-Hints und Format-Konvertierung):
https://youtu.be/6AxuFn0W3Ok

#webdev #frontend #webfonts #typography #webtypography #tutorial #subsetting

Hello Type Network

I was wondering if a gdpr compliant solution for hosted webfonts is in the works. The self hosted license is too expensive for small organizations and I feel good typography should be available to small orgs as well.

#typography #privacy #webfonts

🔴 Type Scale Generator
by Landin.gs
The Type Scale Generator allows you to experiment with different font sizes and ratios to create a balanced type scale.
Export to CSS, SCSS, Tailwind & WordPress.

#webapp #webtools #Typography #webfonts #webdev

https://landin.gs/tools/type-scale-generator/

CSS Typography and Web Fonts by Abdelfattah Ragab

Available on https://shop.tredition.com and https://www.amazon.com

#css #css3 #typography #webfonts #fonts #fontfamily #fontsize #fontweight #fontstyle #lineheight #italic #oblique #fontface #textindent #textalign #wordbreak #texttransform #uppercase #lowercase

📗 Two Typographic Tricks
by Donnie D'Amato
@donnie
#typography #webfonts #webdev

https://blog.damato.design/posts/two-typographic-tricks/

🍒 About .notdef:
the symbol (not emoji!) that is often an “X” inside a tall rectangle
by Thomas Phinney, Font Detective
@tphinney.typo.social
#Typography #WebFonts #ThomasPhinney #notdef

https://www.thomasphinney.com/2024/12/notdef-emoji-symbol-x-rectangle/

https://almanac.httparchive.org/en/2024/fonts

As always, a fascinating report by @bram and Charles! The most interesting bits for me:

– Significant increase in exclusive self-hosting (desktop: from 22% in 2022 to 28%; mobile: from 28% in 2022 to 34%)

– @marksimonson’s Proxima Nova is used on 1% of websites. As the only commercial, non-icon font in the top 20, this level of popularity is extremely impressive.

#Webfonts #Fonts #Typography #Webdev
…

Qui est avec moi pour que les fonderies mettent systématiquement l'info "Poids du fichier" dans les caractéristiques de leurs fonts ?

C'est quand même un critère important 🤓

#typographie #webfonts

Stuck using Google Fonts, but you hate Google (you should)? Bunny Fonts is a drop-in replacement that’s open-source and privacy-first.

https://fonts.bunny.net/

#Fonts #GoogleFonts #WebFonts #UI #Dev #CDN #FOSS #OpenSource

🔵 Typeset

by David Merfield @DavidMerfield

An HTML pre-proces­sor for web ty­pog­ra­phy. Typeset pro­vides ty­po­graphic fea­tures used tra­di­tion­ally in fine print­ing which re­main un­avail­able to browser lay­out en­gines.

#WebTypography #webfonts #webdev

https://typeset.lllllllllllllllll.com/