Tech does not just watch: Take action against Russia’s war on Ukraine 🇺🇦, and take action against Israel’s occupation, destruction, and ethnic cleansing of Palestine (history) 🇵🇸 Hide

Frontend Dogma

“fonts” News Archive

Definition, related topics, and tag feed

Definition · Supertopics: typography · Subtopics: flash-of-x, icon-fonts, kerning, variable-fonts, woff (non-exhaustive) · “fonts” RSS feed (per email)

Entry (Sources) and Other Related TopicsDate#
Monotype Font Licencing Shake-Down (ame)190
licensing
Dear Designers: Stop Using System Fonts Like It’s 2005 (web)189
design, variable-fonts
Targeting Specific Characters With CSS Rules (ede)188
css, unicode
Design Can’t Rely on Logic: Troy Leinster on Type Design and Human Perception (int)187
podcasts, interviews, design, typography
Should You Preload Fonts for Performance? (erw)186
performance, preloading
You’re Loading Fonts Wrong (and It’s Crippling Your Performance) (jon)185
performance, css, image-replacement, flash-of-x, history
The Good, the Bad, and the Unreadable (mal)184
readability, legibility, accessibility, wcag
It’s More Than Picking a Pretty Font (uxd)183
accessibility, legibility, readability, typography, wcag
Why Fonts Look Better on macOS Than on Windows (uxd)182
typography, readability, unix-like, apple, windows, microsoft, comparisons
Thin Fonts Are a Usability Nightmare—and Finally, Designers Are Waking Up (web)181
typography, usability, accessibility, design
Revisiting Fluid Type (ric+/odd)180
videos, interviews, typography, responsive-design
The Hardest Working Font in Manhattan (mwi)179
typography, history
How to Improve Webpage Speed: Tips and Best Practices178
how-tos, performance, optimization, tips-and-tricks, best-practices, redirecting, images, testing, tooling, webpagetest
Beware the Faux Bold (and How to Fix It) (ric)177
typography, css
Preload Fonts on Your Website for Better Core Web Vitals (deb)176
performance, preloading, hints, web-vitals
Fast and Smooth Third-Party Web Fonts (sco)175
embed-code, performance, css, javascript
Fabulous Font-Face Fallbacks (sto)174
performance, css, typography
Preloading Fonts for Web Performance With “link rel=preload” (acc/mat)173
performance, preloading, html, hints
Fonts (bra/htt)172
web-almanac, studies, research, metrics
What Makes a Font Accessible? A Designer’s Guide (a11)171
guides, design, typography, accessibility
Features of Your Font You Had No Idea About (ole)170
variable-fonts, css
Quick Guide to Web Typography for Developers (ole)169
guides, typography, examples
The Ultimate Guide to Font Performance Optimization (deb)168
guides, performance, optimization
The Monospace Web167
design
WOFF File Format 2.0 (w3c)166
woff, standards
State of Text Rendering 2024165
rendering
Beyond Monospace: The Search for the Perfect Coding Font (rom+/evi)164
developer-experience
Going Beyond Pixels and (r)ems in CSS—Relative Length Units Based on Font (uti/iod)163
css, units
Animating Font Palette (man)162
css, colors, effects
Installing Google Fonts as npm Packages (ami)161
installing, tooling, dependencies, google
The Most Accessible Font160
accessibility, typography, legibility
How to Use a Color Font (man)159
how-tos, css
The 3 Secrets to Font Pairing158
typography, design
Optimizing Web Fonts157
css, performance, optimization
The New Google Fonts: Find What You’re Looking For (tob)156
google
WOFF Has Left the Building (mat)155
woff, typography, css, support
Thinking on Ways to Solve Adaptive Typography (arg/dev)154
videos, typography, css
Using Emoji on the Web (oll)153
emoji, support, unicode
The New “@ font-face” Syntax (oll)152
css
What’s Your Type? Try These Tests to Pick the Perfect Font for You (was)151
design, typography
Typography for Everyone (tob/btc)150
videos, typography
How to Use Google Fonts and “font-display”149
how-tos, google, css
16 Little UI Design Tips That Make a Big Impact148
design, tips-and-tricks, spacing, consistency, colors, contrast, typography
Modern Font Stacks147
websites, typography
Handling CSS Color Fonts With “font-palette” (sta)146
css, colors
Managing Fonts in WordPress Block Themes (css)145
wordpress, theming
How to Password-Protect a Static HTML Page With No JS (ede)144
how-tos, security, css
Improved Font Fallbacks (dev)143
typography, graceful-degradation
How to Pick a Font (That Doesn’t Suck)142
how-tos, guides, typography
Quick Thoughts on Typeface and Font Accessibility141
accessibility, typography
From Type to Logotype140
typography, design, branding, logos
The Final Google Fonts Knowledge Drop of 2022 (ell)139
google, typography
Advanced Web Font Optimization Techniques138
typography, optimization
Hands-On Guide to Color Fonts and “@ font-palette-values” (zor/css)137
videos, guides, css
This Site’s Type Is Now Variable (ell)136
typography, variable-fonts, css
Fonts (htt)135
web-almanac, studies, research, metrics
First Batch of Color Fonts Arrives on Google Fonts134
google, typography, colors
Which Fonts to Use for Your Charts and Tables133
information-design, tables
Front-End Internationalisation Tips132
internationalization, css, javascript
The Joy of Variable Fonts: Getting Started on the Frontend (rom+/evi)131
variable-fonts, css, introductions
Do Dyslexia Fonts Improve Accessibility?130
accessibility
Measuring the Performance of Typefaces for Users II (sma)129
typography, performance
Measuring the Performance of Typefaces for Users (sma)128
typography, performance
Customizing Color Fonts on the Web (web)127
colors, customization
Best Font for Online Reading: No Single Answer (nng)126
studies, research, typography, readability
Fonts for the Web: Rationale, 1996 (svg/w3c)125
history
Childish Font Sizes (tyl/clo)124
readability, design
Fonts in Use: Variable Fonts123
typography, variable-fonts
Variable Fonts in Real Life: How to Use and Love Them (rom+/evi)122
variable-fonts, typography
Identifying Fonts: The Complete Guide121
guides, typography
Don’t Believe the Type! (deq)120
videos, accessibility, typography, readability
Minimizing Google Fonts by Only Loading It for Certain Characters (ami)119
typography, google, performance, minimalism
Why You Should Use a Developer Font118
typography, productivity
How to Avoid Layout Shifts Caused by Web Fonts (sim)117
how-tos, performance, user-experience
Google Fonts Knowledge (ell)116
google, typography
What Are Accessible Fonts?115
accessibility
What Creating a Simple Font Taught Me About Font Design (uxd)114
typography
Firefox’s “bolder” Default Is a Problem for Variable Fonts (sim/css)113
css, variable-fonts, browsers, mozilla, firefox
Avoiding FOUT With Async CSS112
flash-of-x, css, asynchronicity
Times New Roman Doesn’t Have to Be Boring—Here’s Why (uxd)111
typography
All You Need Is 5 Fonts (uxd)110
design, typography
Optical Size, the Hidden Superpower of Variable Fonts (pix)109
css, variable-fonts, typography
Best Practices for Fonts (tun/dev)108
best-practices, performance
Uniwidth Typefaces for Interface Design (uxd)107
typography
Why You Should Self-Host Google Fonts in 2021106
google, self-hosting
Time to Say Goodbye to Google Fonts: Cache Performance105
google, caching, performance
Leveraging System Fonts on the Web (jim)104
The Monospaced System UI CSS Font Stack103
css, link-lists
Use Advanced Typography With Local Fonts (tom/dev)102
typography, apis
Happy Birthday Web Fonts! (w3c)101
anniversaries, woff, standards
Speed Up Google Fonts (css)100
performance, google
Dark Mode and Variable Fonts (fon/css)99
dark-mode, variable-fonts, css
Improving Perceived Performance With the CSS “font-display” Property (the)98
performance, css
Should You Self-Host Google Fonts? (tun)97
google, self-hosting, performance
How to Convert Variable TTF Font Files to WOFF2 (hen)96
how-tos, variable-fonts, woff, typography, conversion
Interactivity and Animation With Variable Fonts (man/24w)95
variable-fonts, animations, javascript, css
Dynamic Typography With Variable Fonts (btc)94
videos, typography, variable-fonts
Optimizing Google Fonts Performance (sma)93
google, performance, optimization
The Scoville Scale of Web Font Loading Opinions (zac/btc)92
videos, performance
The Serif Tax (chr/css)91
performance
Typography for Developers (css)90
typography, legibility, readability, css, link-lists
CSS Fonts 3 Is a W3C Recommendation (svg/w3c)89
css, standards
Variable Fonts: What They Are, and How to Use Them88
how-tos, variable-fonts, performance
Icon Fonts vs. SVGs—Which One Should You Use in 2018?87
icon-fonts, svg, images
Weird Things Variable Fonts Can Do (chr/css)86
variable-fonts
Three Techniques for Performant Custom Font Usage (oll/css)85
performance, techniques, flash-of-x
Web Fonts Working Group Announces WOFF 2.0 File Format84
w3c, woff, standards
Understanding Web Fonts and Getting the Most Out of Them (thi/css)83
woff, css, typography, variable-fonts
Introduction to Variable Fonts on the Web (dav+/dev)82
introductions, variable-fonts, css
FOIT vs. FOUT, a Side by Side Comparison (zac)81
user-experience, flash-of-x, comparisons
Using Webfonts (ali)80
css
CSS “font-display”: The Future of Font Rendering on the Web79
css, typography
If You Really Dislike FOUT, “font-display: optional” Might Be Your Jam (chr/css)78
flash-of-x, css
Optimizing Web Fonts for Performance: The State of the Art77
performance, optimization
Get Started With Variable Fonts (ric)76
introductions, variable-fonts
Free Fonts With Personality and Style (sma)75
link-lists
Align SVG Icons to Text and Say Goodbye to Font Icons74
svg, images, icons, icon-fonts, css, design, alignment
Experimenting With Color Fonts (fon/css)73
colors, experiments
Webfonts on the Prairie (ali)72
metrics
A New Responsive Font Format for the Web (fon/css)71
variable-fonts, responsive-design
Seriously, Don’t Use Icon Fonts (tyl/clo)70
icon-fonts, html, quality
Loading Web Fonts With the Web Font Loader (fon/css)69
flash-of-x, performance, user-experience
4 Expert Tips for Getting the Most Out of Google Fonts68
google, tips-and-tricks
Using Web Fonts the Best Way (in 2015) (hel)67
performance
Type Is Visible Language (esp/btc)66
videos, typography
The Mitt Romney Web Font Problem (zac)65
flash-of-x, user-experience, css, javascript
Monotype Is Introducing an HTML5-Based Web Font Platform64
html
Variable Fonts for Responsive Design (nic/ali)63
variable-fonts, responsive-design
Programming Fonts62
websites, programming, comparisons
The Good, the Bad, and the Great Examples of Web Typography (sma)61
typography, examples
3 Principles for Perfect Typeface Pairing60
typography, principles
Minimising Font Downloads (jaf)59
css, performance, optimization, support, browsers
The Latest in Web Font Trends (ali)58
trends
Thought Process of a Front End Problem (chr/css)57
processes, debugging, opera, browsers
What Are Icon Fonts?56
icon-fonts
Preventing the Performance Hit From Custom Fonts (chr/css)55
performance, ajax, jquery, lazy-loading
Font Hinting and the Future of Responsive Typography (nic/ali)54
typography, responsive-design
A Critical Approach to Typefaces (sma)53
typography
5 Use Cases for Icon Fonts (css)52
icon-fonts, examples, css
WOFF File Format 1.0 (typ+/w3c)51
woff, standards
Why Won’t Helvetica Go Away? (sma)50
typography, history
HTML for Icon Font Usage (chr/css)49
html, icon-fonts, semantics
A Closer Look at Font Rendering (sma)48
rendering, typography
Custom Fonts in Emails (chr/css)47
email
Creating Custom Font Stacks With “unicode-range” (dre/24w)46
css, unicode
The “@ font-face” Rule and Useful Web Font Tricks (ope/sma)45
css, tips-and-tricks
A Solution to Stop Font Face Fonts Looking Bold on Mac Browsers44
css, browsers, apple, unix-like
The Future of Web Fonts Is Sooner Than It Used to Be43
woff, design
Web Could Be Stylized by New W3C Font Platform42
web, woff, w3c
Quick Guide to Implement Webfonts via “@ font-face” (pau/dev)41
guides, css
Frontend SPOF40
performance, html, javascript, css
Google Fonts Is Born—Can I Get a Hallelujah!? (mis)39
google, typography
2010: Web Fonts Are Here and Ready to Use (bra/aja)38
google, foss
On Web Typography (jas/ali)37
typography, legibility, readability
Web Open Font Format for Firefox 3.6 (moz)36
woff, firefox, mozilla, browsers
“@ font-face” Is Cool… but Does It Scale? (oct/aja)35
css, performance
More “@ font-face” Fun (zol)34
css
“@ font-face” in Depth (zol)33
css
IKEA and the Font Fiasco32
typography, case-studies
Friends Don’t Let Friends Use Comic Sans31
design
Font Embedding Now (dav)30
css
Web Fonts: Do Something Positive! (sen)29
Fuck the Foundries (div)28
typography
8 Definitive Web Font Stacks27
typography
Efficiently Serving Custom Web Fonts (wes)26
conditional-comments, apache, internet-explorer, microsoft, browsers
Font MIME Types (ann)25
mime-types
The Coming Battle Over Web Fonts24
Web Typography: Tell Me What You Want (jas)23
w3c, typography, css
Which Are More Legible: Serif or Sans Serif Typefaces? (ale)22
legibility, typography, studies, research
The Principles of Beautiful Typography (jas)21
principles, typography, readability, legibility
Font Rendering Differences: Firefox vs. IE vs. Safari (chr/css)20
css, rendering, firefox, mozilla, internet-explorer, microsoft, safari, apple, browsers, comparisons
80 Beautiful Typefaces for Professional Design (sma)19
design
JavaScript/CSS Font Detector (dal/aja)18
javascript, css, tooling
Study of Free/Shareware Web Fonts17
studies, research
sJIR: scalable Jens Image Replacement16
image-replacement, techniques, javascript
Origins of Verdana/Tahoma (dav)15
typography
A Comparison of Popular Online Fonts: Which Size and Type Is Best?14
legibility, comparisons, studies, research
About the Hiragino Fonts With CSS (hsi)13
unix-like, css
Icon Font, SVG, PDF, and PNG Generator12
tools, exploration, images, code-generation, icon-fonts, svg, pdf, png
Font Capability Checker (pix)11
tools, exploration, typography
Font Comparer10
tools, exploration, typography, comparisons
Font Determiner9
tools, exploration, typography
Font Family Support Checker (zac)8
tools, exploration, typography, support
Font Pairing Generator7
tools, exploration, typography, comparisons
Font Style Matcher6
tools, exploration, typography, css
Font Tester5
tools, exploration, typography
Web Font Generator4
tools, exploration, typography
Google Web Fonts Helper3
tools, exploration, code-generation, google, typography
Fallback Font Generator (scr)2
tools, exploration, typography, code-generation
Text-to-Unicode Range Generator (sto)1
tools, exploration, typography, code-generation, css