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 use CSS to rotate text by 90° in IE8 (and modern IEs)
If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use `-ms-transf...
Rails: How to use custom flash types in controllers
Rails supports alert and notice as default flash types. This allows you to use these keys as options in e.g. redirect_to and as a helper in views e.g. <%= notice %> (instead of flash[:notice]).
class SomeController < ApplicationReco...
CSS: How to find out the rendered font in chrome
The rendered font often depends on the local font your system provides, therefore you often find a rule like below in the computed style for an element:
font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera ...
How to use your favorite font in Slack
In Slack, the settings dialog only offers a fixed selection of fonts. You can use any font you like using the /slackfont command.
Fonts need to be installed on your machine. Webfonts beyond those provided by Slack won't magically work unless yo...
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...
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 ...
How to fix broken font collisions in wkhtmltopdf
If you are using PDFKit / wkhtmltopdf, you might as well want to use custom fonts in your stylesheets. Usually this should not be a problem, but at times they include mislea...
Convert a TrueType (.ttf) font to web font formats
- Note that you are not allowed to embed any font in a website. You need to check the license first. Fonts from Font Squirrel are all okay to embed and use for commercial purposes, but as with many free fonts, qualit...
The top responsive web design problems ... and how to avoid them
I recently created a survey asking fellow designers about the problems they faced when creating fully responsive sites. This article will list the most common problems they reported and offer possible solutions, along with suggestions to conside...