If you want to add a style element to the head using JavaScript, you can follow the code snippet below.
DEMO
let head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style'),
fonts = {
"Animais-1.ttf": "http://ggt-des.br/styles/fontes/Animais-1.ttf",
"Animais-2.ttf": "http://ggt-des.br/styles/fontes/Animais-2.ttf",
"Animais.ttf": "http://ggt-des.br/styles/fontes/Animais.ttf",
"CPRM_Fontes.ttf": "http://ggt-des.br/styles/fontes/CPRM_Fontes.ttf",
"ESRI-Electric.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Electric.ttf",
"ESRI-AMFM-Gas.ttf": "http://ggt-des.br/styles/fontes/ESRI-AMFM-Gas.ttf"
};
head.appendChild(style);
style.type = 'text/css';
let css = Object.entries(fonts).map(v => `@font-face {
font-family: "${v[0].split('.')[0]}";
src: url(${v[1]});
font-weight: normal;
font-style: normal;
}`).join('');
if (style.styleSheet) {
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
.one {
font-family: "Animais-1";
}
.two {
font-family: "Animais-2";
}
.three {
font-family: "Animais";
}
.four {
font-family: "CPRM_Fontes";
}
.five {
font-family: "ESRI-Electric";
}
.six {
font-family: "ESRI-AMFM-Gas";
}
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
Alternatively, you can utilize a mixin in SASS by creating a .scss file instead of .css.
In the .scss file, define an @mixin, which functions similarly to a function.
Then, use the mixin with @include while passing parameters, similar to calling a function.
MIXIN example
@mixin font-face($name, $path, $weight: null, $style: null){
@font-face {
font-family: quote($name);
font-style: $style;
font-weight: $weight;
src: $path;
}
}
@include font-face("Animais-2", "http://ggt-des.br/styles/fontes/Animais-1.ttf", 'normal', 'normal');
@include font-face("Animais-2", "http://ggt-des.br/styles/fontes/Animais-2.ttf", 'normal', 'normal');
@include font-face("Animais", "http://ggt-des.br/styles/fontes/Animais.ttf", 'normal', normal);
@include font-face("CPRM_Fontes", "http://ggt-des.br/styles/fontes/CPRM_Fontes.ttf", 'normal', 'normal');
@include font-face("ESRI-Electric", "http://ggt-des.br/styles/fontes/ESRI-Electric.ttf", 'normal', 'normal');
@include font-face("ESRI-AMFM-Gas", "http://ggt-des.br/styles/fontes/ESRI-AMFM-Gas.ttf", 'normal', 'normal');