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...… Read article
It All Started With Emoji: Color Typography on the Web
“Typography on the web is in single color: characters are either black or red, never black and red …Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters — or “glyphs” in font terminology. The smiley, levitating businessman and the infamous pile of poo became true siblings to letters, numbers and punctuation marks.”
Using emojis in code is easy. Head over to emojipedia and copy and paste one in.… Read article
Wakamai Fondue
From wakamaifondue.com
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 … Read article
Robin Rendle
Three Techniques for Performant Custom Font Usage
There’s a lot of good news in the world of web fonts!
- The forthcoming version of Microsoft Edge will finally implement
unicode-range, the last modern browser to do so. - Preload and
font-displayare landing in Safari and Firefox. - Variable fonts are shipping everywhere.
Using custom fonts in a performant way is becoming far easier. Let’s take a peek at some things we can do when using custom fonts to make sure we’re being as performant as we can be.… Read article
Understanding Web Fonts and Getting the Most Out of Them
Using custom fonts is getting increasingly easier. We’ll cover the basics of usage here and get into the more in-depth features that are helpful for developers who want to level up and aim to perfect advanced concepts, like loading font files.
Shipping system fonts to GitHub.com
From markdotto.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:
… Read articleHelvetica 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
Chris Coyier
Crafting Webfont Fallbacks
From www.youtube.com
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).… Read article
Chris Coyier
`font-display` for the Masses
Updated on January 12, 2017: Proper support checks are now part of the article body. Added information about the block value. Minor tweaks and copy edits. Enjoy!
If you're a regular reader here at CSS-Tricks, chances are good you know a bit about web fonts. You may even know a few useful tricks to control how fonts load, but have you used the CSS font-display property?
The font-display property in CSS is available in Chrome, and emerging in Firefox … Read article