Nice Web Type – How to use CSS @font-face
Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support.
Related cards:
How to fix: Firefox uses incorrect fonts on all webpages, regardless of their CSS
If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:
- Open up the Preferences.
- Switch to "Content".
- In the ...
Using local fonts with Webpack / Webpacker
When we want to use our own (or bought) fonts in an application with Webpack(er), we have two options. We can
- put the fonts directly into your Webpack's assets folder or
- write an npm package with an own sass file that can be imported from the...
Font Squirrel | Download Hundreds of Free @font-face Fonts
Download hundreds of prepackaged @font-face kits
CSS Fontstack: An overview of web/web safe font support
Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems...
Minify Font Awesome fonts with webpack
Font Awesome 5 is a comprehensive solution for vector icons on your website.
Originally, Font Awesome came as an icon font (plus stylesheets), but recently it can also be used as a pure JavaScript solution (which will...
Improve web font rendering in Windows by autohinting fonts
Web fonts are awesome. After being restricted to Arial for two decades there is finally a cross-browser way to embed fonts into web pages.
Unfortunately while web fonts look awesome on Linux and MacOS, they [look h...
Variable fonts for web developers
This card is mainly an explanation how variable fonts work in CSS, not necessarily a recommendation to actually use them.
What is a variable font?
Designing and rendering fonts are two highly complex topics. For an arbitrary text to appear pro...
RubyMine / IntelliJ: How to increase UI and fonts for presentations
When giving a presentation where you do some coding, the font size you usually use is probably a bit too small and makes code hard to read for users on smaller screens or low-bandwidth connections when the image quality is lower.
Here are two sol...
Cheats to optimize your web font rendering
Type looking a little flabby? Overweight? Want to give it a kick in the pants? Take a look at some of these tricks to really give your web type a workout.