Book Image

Learning less.js

Book Image

Learning less.js

Overview of this book

Table of Contents (22 chapters)
Learning Less.js
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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, 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>
  2. Save this as fontface-ml.html. In a new file, add the...