Select Page

Category: web fonts

Don’t just copy the @font-face out of Google Fonts URLs

I don’t think this is an epidemic or anything, but I’ve seen it done a few times and even advocated for. This is what I mean… You go to Google Fonts and pick a font like Open Sans, and it gives you either a or an @import with a URL there in which to ready this font for usage on your site. You can take a peek in there and see what it returns… It’s just some @font-face declarations, of course! Now your performance-minded brain kicks off. Wait. So, I make one HTTP request for this stylesheet, and then...

Read More

Wakamai Fondue

Roel Nieskens released a tool that lets you upload a font file and see what’s inside, from how many characters it contains to the number of languages it supports. Here’s what you see once you upload a font, in this case Covik Sans Mono Black: Why is this data useful? Well, I used this tool just the other day when I found a font file in a random Dropbox folder. What OpenType features does this font have? Are there any extra glyphs besides the Roman alphabet inside? Wakamai Fondue answered those questions for me in a jiffy. Direct Link...

Read More

Shipping system fonts to GitHub.com

System font stacks got hot about a year ago, no doubt influenced by Mark Otto’s work putting them live on GitHub. The why, to me, feels like (1) yay performance and (2) the site looks like the rest of the operating system. But to Mark: Helvetica was created in 1957 when the personal computer was a pipe dream. Arial was created in 1982 and is available on 95% of computers across the web. Millions, if not billions, of web pages currently use this severely dated font stack to serve much younger content to much younger browsers and devices. As display quality improves, so too must our use of those displays. System fonts like Apple’s San Francisco and Microsoft’s Segoe aim to do just that, taking advantage of retina screens, dynamic kerning, additional font-weights, and improved readability. If operating systems can take advantage of these changes, so too can our CSS. I also like the team’s idea of adding emoji fonts at the end of the font declaration so that you have the best support possible for those too: p { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } Direct Link to Article — Permalink Shipping system fonts to GitHub.com is a post from CSS-Tricks...

Read More

Crafting Webfont Fallbacks

There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we’ll call it FOCST (Flash of Carefully Styled Text). Direct Link to Article — Permalink Crafting Webfont Fallbacks is a post from CSS-Tricks...

Read More
000webhost logo