Fosstodon

sb arms & legsThinking about the wasteful nature of <a href="https://metroholografix.ca/tags/LLMs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#LLMs</a> 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 <a href="https://metroholografix.ca/tags/laravel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#laravel</a> with <a href="https://metroholografix.ca/tags/react" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#react</a>, <a href="https://metroholografix.ca/tags/jquery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#jquery</a>, <a href="https://metroholografix.ca/tags/tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tailwind</a>, <a href="https://metroholografix.ca/tags/webFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webFonts</a>, <a href="https://metroholografix.ca/tags/postgres" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#postgres</a> to host some simple <a href="https://metroholografix.ca/tags/markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#markdown</a>?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 <a href="https://metroholografix.ca/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> for their personal protection. I want to respect <a href="https://metroholografix.ca/tags/ScreenReaders" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ScreenReaders</a> and users of assistive technology, without unnecessary complexity. Everything we need is built into the HTML and CSS specs.

Joe CrawfordUsing 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. <a href="https://xoxo.zone/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://xoxo.zone/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://xoxo.zone/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://stackoverflow.com/questions/9005580/how-to-check-if-the-font-has-a-symbol/79435970#79435970" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://stackoverflow.com/questions/9005580/how-to-check-if-the-font-has-a-symbol/79435970#79435970</a>

LavX NewsSparks: Revolutionizing Data Visualization with a Unique TypefaceSparks introduces a groundbreaking typeface that allows developers to create sparklines directly in text, leveraging OpenType features for dynamic data representation. This innovative tool not only en...<a href="https://news.lavx.hu/article/sparks-revolutionizing-data-visualization-with-a-unique-typeface" rel="nofollow noopener noreferrer" target="_blank">https://news.lavx.hu/article/sparks-revolutionizing-data-visualization-with-a-unique-typeface</a><a href="https://mastodon.cloud/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#news</a> <a href="https://mastodon.cloud/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tech</a> <a href="https://mastodon.cloud/tags/DataVisualization" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DataVisualization</a> <a href="https://mastodon.cloud/tags/OpenType" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenType</a> <a href="https://mastodon.cloud/tags/WebFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebFonts</a>

HilkoIch 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): <a href="https://youtu.be/6AxuFn0W3Ok" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://youtu.be/6AxuFn0W3Ok</a><a href="https://social.tchncs.de/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://social.tchncs.de/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://social.tchncs.de/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://social.tchncs.de/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://social.tchncs.de/tags/webtypography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webtypography</a> <a href="https://social.tchncs.de/tags/tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tutorial</a> <a href="https://social.tchncs.de/tags/subsetting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#subsetting</a>

pablolarah🔴 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.<a href="https://mastodon.social/tags/webapp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webapp</a> <a href="https://mastodon.social/tags/webtools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webtools</a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://landin.gs/tools/type-scale-generator/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://landin.gs/tools/type-scale-generator/</a>

pablolarah📗 Two Typographic Tricks by Donnie D'Amato <a href="https://social.design.systems/@donnie" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@donnie</a> <a href="https://mastodon.social/tags/typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typography</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://blog.damato.design/posts/two-typographic-tricks/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.damato.design/posts/two-typographic-tricks/</a>

pablolarah🍒 About .notdef: the symbol (not emoji!) that is often an “X” inside a tall rectangle by Thomas Phinney, Font Detective @tphinney.typo.social <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/WebFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebFonts</a> <a href="https://mastodon.social/tags/ThomasPhinney" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ThomasPhinney</a> <a href="https://mastodon.social/tags/notdef" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#notdef</a> <a href="https://www.thomasphinney.com/2024/12/notdef-emoji-symbol-x-rectangle/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.thomasphinney.com/2024/12/notdef-emoji-symbol-x-rectangle/</a>

Typographica<a href="https://almanac.httparchive.org/en/2024/fonts" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://almanac.httparchive.org/en/2024/fonts</a> As always, a fascinating report by <a href="https://typo.social/@bram" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@bram</a> 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%)– <a href="https://typo.social/@marksimonson" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@marksimonson</a>’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.<a href="https://typo.social/tags/Webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Webfonts</a> <a href="https://typo.social/tags/Fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fonts</a> <a href="https://typo.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://typo.social/tags/Webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Webdev</a> …

Emilie Nguyen Van YenQui 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 🤓 <a href="https://mastodon.design/tags/typographie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typographie</a> <a href="https://mastodon.design/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a>

Mark Wyner Won’t Comply :vm:Stuck using Google Fonts, but you hate Google (you should)? Bunny Fonts is a drop-in replacement that’s open-source and privacy-first.<a href="https://fonts.bunny.net/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://fonts.bunny.net/</a><a href="https://mas.to/tags/Fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fonts</a> <a href="https://mas.to/tags/GoogleFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GoogleFonts</a> <a href="https://mas.to/tags/WebFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebFonts</a> <a href="https://mas.to/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UI</a> <a href="https://mas.to/tags/Dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Dev</a> <a href="https://mas.to/tags/CDN" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CDN</a> <a href="https://mas.to/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FOSS</a> <a href="https://mas.to/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a>

pablolarah🔵 Typesetby David Merfield @DavidMerfield An HTML pre-processor for web typography. Typeset provides typographic features used traditionally in ﬁne printing which remain unavailable to browser layout engines.<a href="https://mastodon.social/tags/WebTypography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebTypography</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://typeset.lllllllllllllllll.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://typeset.lllllllllllllllll.com/</a>

pablolarah🟠 Clamp it! VS Code extensionby Geoff Graffam <a href="https://front-end.social/@geoff" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@geoff</a> at <a href="https://mastodon.social/@csstricks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@csstricks</a> Feat.: Silvestar Bistrović (adedicated.dev)@cita.bsky.social <a href="https://mastodon.social/@cita" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@cita</a> <a href="https://mastodon.social/tags/VSCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VSCode</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/clamp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clamp</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://css-tricks.com/clamp-it-vs-code-extension/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://css-tricks.com/clamp-it-vs-code-extension/</a>

Aleš RoubíčekAs I mentioned in previous toots, I updated my website to a new, lighter theme. Then I added the ability to switch themes and font stacks, so users can choose what is their preferred way to experience my site. Today I wrote a blog post about the process and techniques I used. <a href="https://indieweb.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webcomponents</a> <a href="https://indieweb.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://indieweb.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://indieweb.social/tags/indieweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#indieweb</a> <a href="https://indieweb.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://indieweb.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://indieweb.social/tags/designengineering" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#designengineering</a> <a href="https://www.rarous.net/weblog/2024/10/21/temata-zmena-uzivatelskych-preferenci-vzhledu" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.rarous.net/weblog/2024/10/21/temata-zmena-uzivatelskych-preferenci-vzhledu</a>

Simon Brooke<a href="https://mastodon.social/@sarahjamielewis" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@sarahjamielewis</a> This raises the whole issue of <a href="https://mastodon.scot/tags/WebFonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebFonts</a> and <a href="https://mastodon.scot/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> repositories.Google (et al) don't host these things out of charity. When you, a user, request a document from me, a publisher, you expect an exchange of data between your machine and mine. But if I've embedded into that document requests for web fonts or JS libraries from some information-scraper's repository, the scraper is getting information the user doesn't expect and hasn't consented.So don't do this. >>>

pablolarah🥭 Features of your font you had no idea aboutby Oleg Wock <a href="https://toot.works/@OlegWock" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@OlegWock</a> @OlegWock Including: <a href="https://mastodon.social/tags/VariableAxes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#VariableAxes</a> <a href="https://mastodon.social/tags/Alternates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Alternates</a> <a href="https://mastodon.social/tags/Stylisticalternates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Stylisticalternates</a> <a href="https://mastodon.social/tags/Swashes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Swashes</a> <a href="https://mastodon.social/tags/Numerals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Numerals</a> <a href="https://mastodon.social/tags/Smallcaps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Smallcaps</a> <a href="https://mastodon.social/tags/Contextualalternates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Contextualalternates</a><a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://sinja.io/blog/get-maximum-out-of-your-font" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://sinja.io/blog/get-maximum-out-of-your-font</a>

pablolarah🔵🟠🟡 Quick guide to web typography for developersby OlegWock <a href="https://toot.works/@OlegWock" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@OlegWock</a> X: @OlegWock <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/WebTypography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebTypography</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://sinja.io/blog/web-typography-quick-guide" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://sinja.io/blog/web-typography-quick-guide</a>

Thomas Michael SemmlerAsking for a webdev friend who's not on mastodon - do you know of open-source font libraries that are _not google_?<a href="https://indieweb.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://indieweb.social/tags/lazyweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lazyweb</a> <a href="https://indieweb.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://indieweb.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://indieweb.social/tags/development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#development</a> <a href="https://indieweb.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fonts</a> <a href="https://indieweb.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a>

Matthias Ott🧐🔥 “Science Gothic is based on Bank Gothic: the typeface of superheroes, action, legal drama, and science fiction.Newly reinvented as a variable font, it is far more versatile than ever before.”<a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/variable" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#variable</a> <a href="https://mastodon.social/tags/fonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#fonts</a> <a href="https://mastodon.social/tags/typefaces" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typefaces</a> <a href="https://mastodon.social/tags/openfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#openfonts</a> <a href="http://sciencegothic.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">http://sciencegothic.com/</a>

pablolarah🍍 Font with Built-In Syntax Highlighting by Heikki Lotvonen at Glyph Drawing Club <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Typography</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/</a>

pablolarah🟥 Riffing on the latest CSS fit text approach by Piccalilli @piccalilli_ - <a href="https://mastodon.social/@belldotbz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@belldotbz</a> <a href="https://front-end.social/@piccalilli" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@piccalilli</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/cssfit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssfit</a> <a href="https://mastodon.social/tags/webfonts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webfonts</a> <a href="https://piccalil.li/blog/riffing-on-the-latest-css-fit-text-approach/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://piccalil.li/blog/riffing-on-the-latest-css-fit-text-approach/</a>

Recent searches

Search options

Administered by:

Server stats:

#webfonts