Skip to main content
CSS is fun and cool and I like it.
Article

Typography for Developers

This is intended as a practical guide for developers to learn web typography. We’ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We’ll go over the principles of typography and the CSS properties that control them, as well as handy tips to get good results, quickly.
Article

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

Article

Three Techniques for Performant Custom Font Usage

There’s a lot of good news in the world of web fonts!

  1. The forthcoming version of Microsoft Edge will finally implement unicode-range, the last modern browser to do so.
  2. Preload and font-display are landing in Safari and Firefox.
  3. 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

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.

Link

How To Rename a Font in CSS

Link

Combining Fonts

Article

`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

Article

What’s the deal with declaring font properties on @font-face?

I hope you read that title out loud in your best Seinfeld impression.

A recent question in our forums made me aware that there are more properties that can be added to @font-face than the usual font-family and src suspects. What are the point of those? Why would you want to declare other font declarations there?… Read article

icon-link icon-logo-star icon-search icon-star