Well, perhaps not; what if we're using multiple variations of a particular font? This isn't a problem when using Less—we can reference our font in the normal way and use the Less namespacing facility to pick and choose which font styles to use for each HTML element. Let's take a look at what this means in practice.

Let's start by downloading a copy of the code that accompanies this book; from the code download, extract the weights.html file that contains our basic text and HTML markup. Save a copy of the file within the project folder.

Next, go ahead and add the following to a new document, saving it as weights.less:

@Alegreya-Sans: "Alegreya Sans",sans-serif;

#SansFont() {
  &.light { font-family: @Alegreya-Sans; font-weight: 300; }
  &.bold { font-family: @Alegreya-Sans; font-weight: 500; }
  &.extrabold { font-family: @Alegreya-Sans; font-weight: 800; }
}

.para1 { #SansFont > .light; }
.para2 { #SansFont > .bold; }
h1 { #SansFont > .extrabold...