https://hugo.curtiscode.dev/tags/dry/Recent content in dry on Curtis TimsonHugo -- gohugo.ioen-GBWed, 04 Feb 2015 22:00:00 +0000https://hugo.curtiscode.dev/post/css/managing-font-face-definitions-with-less/Wed, 04 Feb 2015 22:00:00 +0000https://hugo.curtiscode.dev/post/css/managing-font-face-definitions-with-less/A typical @font-face definition looks something like this: @font-face { font-family: 'CustomWebFont'; src: url('customwebfont.eot'); src: url('customwebfont.eot?#iefix') format('embedded-opentype'), url('customwebfont.woff2') format('woff2'), url('customwebfont.woff') format('woff'), url('customwebfont.ttf') format('truetype'), url('customwebfont.svg#svgFontName') format('svg'); font-weight:normal; font-style:normal; } Here we are defining the font’s name, weight, style, and providing various file types for cross-browser compatibility. If a web application is using different web fonts, or even a different weight/style (bold/italic) for the same web font, then this code has to be practically repeated several times.