Using @font-face with Less

A downside of using fonts in web pages is that they must exist on your end user's PC or laptop. Naturally, with the mix of PC, laptop, and mobile devices now available in the market, it would be almost impossible to guarantee that the font will exist!

I say impossible; there are fonts that we can use on a PC or laptop, such as Arial, Times New Roman, or Verdana; they are not bad fonts, but they are overused and not particularly special. We could, of course, use an external service, such as Google Fonts—as we did in the Creating simple font mixins section earlier in this chapter.

However, we can do better than this by using @font-face to embed any font in our pages. I say any, but the license for the font must allow embedding ...

Get Learning Less.js now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.