The key to working with fonts is to start simple and then build it up—there is no better place to start than to create a simple mixin in order to manage attributes such as font names. Let's create a simple example where we can see this in action; here's what our mixin will produce:
Okay, let's start creating our mixin; we'll begin by preparing the markup for our demo:
Open a copy of the
project.htmlfile we created in Chapter 3, Getting Started with Less, and then modify it as shown:<title>Demo: Creating simple font mixins</title> <link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'> <link rel="stylesheet/less" href="css/basicfonts.less"> <script src="js/less.min.js"></script>
Next, add the following markup to the
<body>section:<h1>H1 - The cat sat on the mat</h1> <h2>H2 - The cat sat on the mat</h2> <h3>H3 - The cat sat on...