Learning Less.js

Using a prebuilt library to handle fonts

In the previous example, we used @font-face to embed a custom font into our pages; this removes any constraint on the fonts that we can use, as we can download and use suitably licensed fonts. This is great, but we can do better—one of the precepts of Less is the DRY principle, which we introduced earlier in the book; this is a perfect opportunity to practice what we preach!

Instead of having to create new mixins to handle @font-face, we can use a prebuilt library to handle the @font-face mixin for us. This means we can remove a good chunk of our code, as we will use the mixin from the prebuilt library—let's take a look at this in action:

1. Open up a copy of fontface.html and alter the link to the Less file, ...