Articles Tagged
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……
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.
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 …

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-display
are landing in Safari and Firefox. - Variable
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
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 …
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-display
The font-display
property defines how font files are loaded and displayed by the browser. It is applied to the @font-face
rule which defines custom fonts in a stylesheet.
@font-face {
font-family: 'MyWebFont'; /* Define the custom font name */
src:
… #152: Font Loading with Zach Leatherman
Time for another pairing screencast! This time I have Zach Leatherman on, from Filament Group. Zach has done a lot of research, writing, and speaking about web font loading the past few years. He’s got a comprehensive guide on …
`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 …
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.