How to include webfont for different languages

Question

I need to change the font for my website. I have the webfont files (.eot, woff,ttf,woff2,svg files) which I need to include in the website. But I have three sets of font files for the same font. One set each for English, Spanish and Portuguese language. I did it for English language using @font-face. But how do I do it for other two languages? Please advise. Thanks

Answer 1

There is no shortcut to this that I come to know. You need to add the font-face rules for each one of those sets of files. Something which could reduce your effort would be to use SASS variables as below. ('webfont' refers to the font you decide to use).

$font-prefix: 'webfont';

$font-reg: "#{$font-prefix}_reg-webfont";
$font-bold: "#{$font-prefix}_bld-webfont";
$font-black: "#{$font-prefix}_blk-webfont";
$font-light: "#{$font-prefix}_light-webfont";
$font-medium: "#{$font-prefix}_med-webfont";
$font-thin: "#{$font-prefix}_thin-webfont";

$font-reg-it: "#{$font-prefix}_reg_it-webfont";
$font-bold-it: "#{$font-prefix}_bld_it-webfont";
$font-black-it: "#{$font-prefix}_blk_it-webfont";
$font-light-it: "#{$font-prefix}_light_it-webfont";
$font-medium-it: "#{$font-prefix}_med_it-webfont";
$font-thin-it: "#{$font-prefix}_thin_it-webfont";


//Normal style fonts

@font-face {
  font-family: "Brandon";
  src: url("#{$font-reg}.eot");
  src:
    url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    url("#{$font-reg}.woff2") format("woff2"),
    url("#{$font-reg}.woff") format("woff"),
    url("#{$font-reg}.ttf") format("truetype"),
    url("#{$font-reg}.svg#svgFontName") format("svg");
  font-weight: 400;
  font-style: normal;
}

.....continue similarly for various font-weights and styles

=================For spanish===============

$font-prefix: 'webfont';

$font-reg: "#{$font-prefix}_reg_es-webfont";
$font-bold: "#{$font-prefix}_bld_es-webfont";
$font-black: "#{$font-prefix}_blk_es-webfont";
$font-light: "#{$font-prefix}_light_es-webfont";
$font-medium: "#{$font-prefix}_med_es-webfont";
$font-thin: "#{$font-prefix}_thin_es-webfont";

$font-reg-it: "#{$font-prefix}_reg_it_es-webfont";
$font-bold-it: "#{$font-prefix}_bld_it_es-webfont";
$font-black-it: "#{$font-prefix}_blk_it_es-webfont";
$font-light-it: "#{$font-prefix}_light_it_es-webfont";
$font-medium-it: "#{$font-prefix}_med_it_es-webfont";
$font-thin-it: "#{$font-prefix}_thin_it_es-webfont";


//Normal style fonts

@font-face {
  font-family: "Brandon_es";
  src: url("#{$font-reg}.eot");
  src:
    url("#{$font-reg}.eot?#iefix") format("embedded-opentype"),
    url("#{$font-reg}.woff2") format("woff2"),
    url("#{$font-reg}.woff") format("woff"),
    url("#{$font-reg}.ttf") format("truetype"),
    url("#{$font-reg}.svg#svgFontName") format("svg");
  font-weight: 400;
  font-style: normal;
}

.....continue similarly for various font-weights and styles

Any other easy way, please feel free to post.Thanks