--- title: "Web fonts get colorful with COLRv1" publication: "Frontend Focus" issue: 560 published_at: "2022-09-21" canonical_url: "https://frontendfoc.us/issues/560" --- Plus a look into WebTransport, a modern alternative to WebSockets, and the frontend JavaScript APIs you may not know. | #​560 — September 21, 2022 | [Read on the web](https://frontendfoc.us/issues/560) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1663761660/mldbd7ync4xfzyxbqj0t.png)](https://material.io/blog/color-fonts-are-here) [First Batch of Color Fonts Arrives on Google Fonts](https://material.io/blog/color-fonts-are-here) — You can customize color palettes, add gradients, and more with the rather fancy [COLRv1 font](https://developer.chrome.com/blog/colrv1-fonts/) binary vector format. Google Fonts now has [nine new typefaces](https://fonts.google.com/?coloronly=true) that you can use, or just play around with to get an idea of what this expressive technology can enable. Sarah Daily [![\](https://copm.s3.amazonaws.com/380dfa83.png)](https://frontendmasters.com/courses/intermediate-html-css/?utm_source=frontendfocus&utm_medium=email&utm_content=htmlcss) [Discover New HTML Elements & CSS Selectors](https://frontendmasters.com/courses/intermediate-html-css/?utm_source=frontendfocus&utm_medium=email&utm_content=htmlcss) — Join Jen Kramer for this detailed video course on intermediate HTML and CSS techniques, covering semantic HTML, inheritance, specificity, the cascade, and more. You'll also get a hands-on look at using new selectors such as :has(), :is(), and :where(). Frontend Masters sponsor [Total Blocking Time: A Short and Sweet Guide for Happier Users](https://calibreapp.com/blog/total-blocking-time) — Any delay longer than 50 milliseconds and visitors can sense that a page is 'unresponsive.' Tracking and reducing such delays is vital to avoiding a poor experience. “_Blinking takes approximately 100–400 milliseconds. That’s fast, but it’s two to eight times longer than most people will accept when interacting with a rendering web page_.” Ben Schwarz ▶['I Never Thought This Would Be Possible with CSS'](https://www.youtube.com/watch?v=OGJvhpoE8b4) — A ~15 minute video with plenty of practical examples of how you can make use of the `:has()` pseudo-class, presented in Kevin’s usual accessible style. Kevin Powell [JavaScript APIs You Don’t Know About](https://www.smashingmagazine.com/2022/09/javascript-api-guide/) — Ok, it’s a bold headline — plenty of you _will_ have at least heard of these, but it’s nonetheless a decent roundup to catch up on where the web platform is. Covers APIs like Page Visibility, Web Sharing, and the Broadcast Channel API. Smashing Magazine **⚡️ IN BRIEF** - [Here's what's new in DevTools in Chrome 106](https://developer.chrome.com/blog/new-in-devtools-106/), including a Largest Contentful Paint timing breakdown in Performance Insights. - Firefox 105 shipped yesterday, [here are the (very few) developer changes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/105) you need to know about. - Stephanie Eckles excellent [primer on CSS Container queries has been updated](https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/) to reflect the syntax now in Chromium 105 and Safari 16. - **CORRECTION**: Last week we shared details of the latest Safari release, incorrectly stating that this version added support for the `:target` pseudo-class. In fact Safari has supported this for quite some time — it's support for `:target` in `:has()` which is new. _Thanks to Lea Verou for spotting this!_ 📙 **Tutorials, Articles & Opinion** [Why the `type="number"` Input is the Worst Input](https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/) — Think that web form has got your number? If you used input type=”number”, you may be surprised to find that it doesn’t. Jared Toporek [Smooth and Simple Page Transitions with the Shared Element Transition API](https://developer.chrome.com/blog/shared-element-transitions-for-spas/) — This API allows page transitions within single-page apps, and is available as an origin trial now. Jake Archibald [_'React I Love You, but You’re Bringing Me Down'_](https://marmelab.com/blog/2022/09/20/react-i-love-you.html) — An opinionated React thought piece. This time, though, the author gets creative checkpointing the progress (or lack thereof) of React over the years in ‘mix tape’ style with plenty of code and memes sprinkled in for good measure. François Zaninotto [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) — The best issue tracking software is one that software developers are actually happy to use. Shortcut (formerly Clubhouse.io) sponsor [Experimenting with WebTransport](https://web.dev/webtransport/) — A new(ish) API offering low-latency, bidirectional, client-server messaging. It's a bit more flexible than WebSockets and runs over HTTP/3. Browser support is very patchy so far, alas. Jeff Posnick ▶[Talking Cascade Layers](https://pod.link/thecsspodcast/episode/f4b27dad87cd9ac9b6fc9d6e6ffd7afd) — Una Kravets and Adam Argyle (Dev Advocates at Google) are back with another season of _The CSS Podcast._ This episode talks about how cascade layers can help authors control/orchestrate CSS layering. (_18 minutes_) The CSS Podcast podcast [Which Fonts to Use for Your Charts and Tables](https://blog.datawrapper.de/fonts-for-data-visualization/) — Sans-serif or serif typefaces? Lining or oldstyle figures? Narrow or wide? With lots of examples, we can see which fonts work best for data visualizations. Lisa Charlotte Muth 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/fl_lossy,q_50/v1663765536/wuknxm1fqipmiip87h3s.gif)](https://www.theatrejs.com/blog/theatre-05-is-out) [Theatre.js 0.5: Hackable Motion Design for the Web](https://www.theatrejs.com/blog/theatre-05-is-out) — Can be used both programmatically and visually to animate 3D objects created with things like Three.js, React Three Fiber, HTML/SVG, or even to ‘animate’ variable values. v0.5 introduces 3D scene editing and complex keyframing. [Docs](https://docs.theatrejs.com/) and [GitHub repo.](https://github.com/theatre-js/theatre) Theatre.js Project [mediaquery.style: A Quick Reference for Useful Media Query Syntax Snippets](https://mediaquery.style/) — Includes seven common media query snippets, with explanations, for those who occasionally forget the exact syntax (all of us, no? 😆) Adrian Payne [Seamlessly Add Chat and Activity Feeds to Your Applications](https://getstream.io/chat/?utm_source=FrontendFocus&utm_medium=Promoted_Newsletter&utm_content=Developer&utm_campaign=FrontendFocus_September2022_Chat_klmh22) Stream sponsor [Core Web Vitals Check: Bulk Test Core Web Vitals Scores for Up to 500 Pages](https://www.experte.com/web-vitals) — This tool gives you three different ways to test: a single URL, a list of URLs for bulk checking, or you can enter a keyword to test the scores of the top 50 sites that appear on Google for that keyword. experte [Vanilla: A Simple, Extensible CSS Framework](https://vanillaframework.io/) — Includes a responsive grid, some useful patterns and utility classes, and its composability allows you to only include what you need. From the team behind Ubuntu. Canonical 🧑‍💻 JOBS [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/560/*|UID|*?ipx=t)