はてなブックマーク

May 15, 2019 renamed URL parameter to display. Thank you Mathias! May 22, 2019 added note about display=swap in the default code embed. At Google I/O this week, Anna Migas shared a photo of an Addy Osmani and Katie Hempenius session that dropped a font loading bombshell on the world. You will not have to self-host Google Fonts any more to get font-display: swap; 🙌 #io19 pic.twitter.com/SldOuoNInF

When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure

I made a style guide for my personal web site and you should too. As my own little corner of the web uncermoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful. After ten years, it’s time to stop tearing open seed packets and

Are you tired of developers abusing the smooth traditionalism of Helvetica? Do you wish your web page was a little bit more fun? Do you also want to avoid discussing things with your peers? Well, do I have some code for you. Add this little block into your project and it will globally alias (rename) Helvetica to Comic Sans MS (and Chalkboard SE, browser support). (Yes, I know I recently wrote a bl

This guide is not intended for use with font icons, which have different loading priorities and use cases. Also, SVG is probably a better long term choice. Updated July 27, 2017 with new information on font-display. Updated August 14, 2017 with a link to a glossary page. Jump to: Unceremonious @font-face font-display preload Don’t use web fonts Inline Data URI Asynchronous Data URI FOUT with a Cla

After I posted my Critical Web Fonts article on Twitter, I had an interesting conversation with a developer named Wim Leers about embedding Web Fonts as Data URIs. @zachleat @MarcDrummond Why not just embed as a data URI in the critical CSS? Cached, no FOUT. Example: https://t.co/tqQ03G3dhf. — Wim Leers (@wimleers) January 6, 2016 His suggestion was to embed the font directly in a style block on t

The history of web font loading has included many different iterations: Doing nothing: including a @font-face CSS block and using it in your CSS without qualification. I consider this to be an anti-pattern. It introduces a Flash of Invisible Text (FOIT) in some browsers and worse, creates a single point of failure in browsers that do not have a font loading timeout (WebKit). Data URIs for the Flas

I like shortcuts: Fork BigText on Github or Check out the BigText Demo Wizard It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted

There is one limitation that all of the major JavaScript browser history management plugins have to hack around: How to tell when there is a change to the location.hash? Sure, you can tell when you’re modifying the hash yourself, but what if the user hits the back/forward button? YUI’s History component and Really Simple History both use setInterval with an internal variable to compare and find ch

Head over to the Google Homepage. Log In using your Google Account. Make sure you’re at your Personalized Homepage. Take a look at the source CSS file ig.css included on the page. There are a few peculiar lines of code that I recognized from another source, the Yahoo User Interface Grids CSS file. Yahoo has provided a set of standard CSS definitions under the BSD license that allow a developer to