The
@font-face
CSS rule allows authors to specify fonts that are not installed on the user's system to display text on their web pages.
For this recipe, you will need to generate the EOT, WOFF, and TTF formats of a font. You can use, for instance, the Webfont generator at http://www.fontsquirrel.com/tools/webfont-generator to get the different formats of a TTF font file. You should save the generated font files with the same name and different extension in your working directory. Make sure you do not choose any copyrighted fonts unless you are willing to pay for it.
You can inspect the fonts in your browser, so use the client-side less.js
compiler, as described in the Downloading, installing, and integrating less.js recipe in Chapter 1, Getting to Grips with the Basics of Less, to compile the Less code of this recipe in your browser. The Less code will use mixins from the Clearless library.