Nathan's Brain
  • Introduction
  • Incubator
  • American Sign Language
  • Art
  • Behavior Change
    • Akrasia
      • Beeminder
      • Procrastination
  • Career
  • Civil Discourse
  • Communication
  • Computer Science
    • Artificial Intelligence
  • Creativity
    • Writing
  • Design
    • Color
    • Design Process
    • Stock
    • Web Design
  • Economics
  • Engineering
  • Entrepreneurship
    • Customer Development
    • Marketing
      • Newsletter Publishing
    • Pricing
  • Environment
    • Energy
    • Transportation
  • Failure & Vulnerability
  • Freelancing
    • Estimating
  • Futurism
  • Governance & Politics
    • Representation & Voting
  • Health
  • Humane Tech
    • Phone Usage
  • Infotainment
  • Linguistics
  • Minimalism
  • Personal Finance
    • FIRE Movement
    • Investing
  • Productivity
    • Attention Management
    • Audio for Focus
    • Automation
    • Task Management
    • Time Management
  • Programming Languages
    • JavaScript
      • Snippets
    • PHP
    • Python
      • Development Environments
      • Package Management & Distribution
  • Psychology
  • Quantified Self
    • Experience Sampling Method
  • Rationality
    • Bayes' Theorem
    • Cognitive Biases
  • Religion
    • Adventism
  • Remote Work
  • Research
    • Note Taking
  • Science
  • Self-Study
    • Accessibility & Usability
    • Algorithms
    • Artificial Intelligence
    • Cryptography
    • Data Science
    • Design Patterns
    • Freelancing
    • Functional Programming
    • Game Development
    • Graphic Design
    • Grid Layout
    • Microservices
    • PWAs
    • SaaS
    • Software Craft
    • Software Management
    • Statistics
    • SVG
    • UI Design
    • Web Animation
  • Software Development
    • API Design
    • Collaboration
    • Command Line
    • git
    • Integrated Development Environments
    • Knoxville Scene
    • Paradigms
    • Refactoring
    • Self-Care
    • Testing
  • Technology History
    • People
    • Timeline
  • Web Development
    • Accessibility & Usability
    • APIs
    • Browsers
    • Content Management Systems
    • CSS
    • Email
    • Frameworks
      • React
    • Libraries
    • No Code & Low Code
    • Performance
    • Serverless
    • Static Sites
    • Testing
    • Twig
    • Type
Powered by GitBook
On this page
  1. Web Development

Type

PreviousTwig

Last updated 6 years ago

#article - "Deciding the behavior for a web font as it is loading can be an important performance tuning technique. The new font-display descriptor for @font-face lets developers decide how their web fonts will render (or fallback), depending on how long it takes for them to load."

- "Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format."

- "We believe the best way to bring personality and performance to websites and products is through great design and technology. Our goal is to make that process simple, by offering an intuitive and robust directory of open source designer web fonts. By using our extensive catalog, you can share and integrate typography into any design project seamlessly—no matter where you are in the world."

#article - "The descriptor in blocks is really great. It goes a long way, all by itself, for improving the perceived performance of web font loading. Loading web fonts is tricky stuff and having a tool like this that works as well as it does is a big deal for the web. It's such a big deal that Google's own will ding you for not using it. A cruel irony, as their own Google Fonts (easily the most-used repository of custom fonts on the web) don't offer any way to use font-display."

#video - "After a lot of experimentation I've come across my preferred way of loading web fonts. I have balanced ease of use, i.e. how to implement, with performance."

#article - “The question was “How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?” By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems. Using the methodology I describe below, we found that the answer is 3.08% of our users. That’s a pretty big number, higher than most counts of the market share of browsers like Internet Explorer, Edge, or Opera Mini.”

Controlling Font Performance with font-display
FontSquirrel
Google Fonts
Google Fonts and font-display
font-display
@font-face
Pagespeed Insights / Lighthouse
How to Load Web Fonts in 2019 🎆
Pixels vs. Ems: Users DO Change Font Size