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:
Open up a copy of
fontface.html
and alter the link to the Less file, as follows:<title>Demo: Using @font-face</title> <link rel="stylesheet/less" href="css/fontface-ml.less"> <script src="js/less.min.js"></script> </head>
Save this as
fontface-ml.html
. In a new file, add the...