Breaking News: Grepper is joining You.com. Read the official announcement!

less font-face css

RM answered on February 26, 2023 Popularity 3/10 Helpfulness 2/10

answer less font-face css

less font-face css

Comment

/* https://medium.com/@curttimson/managing-font-face-definitions-with-less-14a7ae936e49 
 * activate multiple font in less
 */
/* Add the following to your LESS file: */

.font-face(@font-family, @filepath, @font-weight, @font-style){
    @font-face {
        font-family: @font-family;
        src: url('@{filepath}.eot');
        src: url('@{filepath}.eot?#iefix') format('embedded-opentype'),
            url('@{filepath}.woff2') format('woff2'),
            url('@{filepath}.woff') format('woff'),
            url('@{filepath}.ttf')  format('truetype'),
            url('@{filepath}.svg#svgFontName') format('svg');
        font-weight:@font-weight;
        font-style:@font-style;
    }
}

/* Then, for the example above, this can be used as follows: */
.font-face('CustomWebFont', 'customwebfont', normal, normal);

/* If we want to use 4 different type-faces for this web font then it is simply just 4 lines to write: */
.font-face('CustomWebFont', 'customwebfont', normal, normal);
 .font-face('CustomWebFont', 'customwebfont_bold', bold, normal);
 .font-face('CustomWebFont', 'customwebfont_italic', normal, italic);
 .font-face('CustomWebFont', 'customwebfont_bolditalic', bold, italic);
 
 /* This would then output the following in our rendered CSS: */
 
 @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;
}
@font-face {
  font-family: 'CustomWebFont';
  src: url('customwebfont_bold.eot');
  src: url('customwebfont_bold.eot?#iefix') format('embedded-opentype'), url('customwebfont_bold.woff2') format('woff2'), url('customwebfont_bold.woff') format('woff'), url('customwebfont_bold.ttf') format('truetype'), url('customwebfont_bold.svg#svgFontName') format('svg');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'CustomWebFont';
  src: url('customwebfont_italic.eot');
  src: url('customwebfont_italic.eot?#iefix') format('embedded-opentype'), url('customwebfont_italic.woff2') format('woff2'), url('customwebfont_italic.woff') format('woff'), url('customwebfont_italic.ttf') format('truetype'), url('customwebfont_italic.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'CustomWebFont';
  src: url('customwebfont_bolditalic.eot');
  src: url('customwebfont_bolditalic.eot?#iefix') format('embedded-opentype'), url('customwebfont_bolditalic.woff2') format('woff2'), url('customwebfont_bolditalic.woff') format('woff'), url('customwebfont_bolditalic.ttf') format('truetype'), url('customwebfont_bolditalic.svg#svgFontName') format('svg');
  font-weight: bold;
  font-style: italic;
}

Popularity 3/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css font-face less

Link to this answer
Share Copy Link

Contributed on Feb 26 2023

0 Answers Avg Quality 2/10

less font-face css

Contents

More Related Answers

less font-face css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.