Font Face Mixin for Less

Question

Using Less I am defining font-families as follows:

@georgia: georgia, times, \'times new roman\', \'nimbus roman no9 l\', serif; 

Then I ha

Answer 1

I know this question is a little old, but I ran with Mészáros Lajos' answer. It needed to account for a few things that it doesn't currently:

1. Your font family and font filename do not need to match; in fact, for "bold" and "italics" you may want to use Style Linking. See: http://www.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/. This prevents "faux bold" and "faux italic" that happens when a browser doesn't understand the relationship between your fonts (e.g, it doesn't know that MyFont-Bold is the correct font to use when you have a strong tag inside text that is using MyFont).
2. The font family name and the SVG id do not need to match; e.g., the file montserrat-regular.svg may have an SVG ID of montserratregular. Yes, you could fix this by renaming your files, and maybe you should, but if you're getting the files remotely (CDN), you may not have that luxury.
3. Personal preference, I switched the order of variant and weight. In CSS font shorthand, variant comes first, so to keep things similar, I put it first here.
4. Again, personal preference, I removed the defaults, because I didn't want to call this method without being explicit. When you have to specify everything, you're less likely to forget that you did in fact need to change the SVG ID for that font.
5. Since Chrome-windows doesn't currently anti-alias WOFFs, I switched the order to move SVG right after the EOT (old IE needs EOT first or will break). Credit

---

.fontface(@family, @filename-base, @style, @weight, @svgID){
    font-family: @family;
    src:url('@{filename-base}.eot');
    src:url('@{filename-base}.svg#@{svgID}') format('svg'),
        url('@{filename-base}.eot?#iefix') format('embedded-opentype'),
        url('@{filename-base}.woff') format('woff'),
        url('@{filename-base}.ttf') format('truetype');
    font-weight: @weight;
    font-style: @style;
}

---