There is same way to import multiple custom font using javascript?

Question

I'm trying to show some custom fonts that I use as icon ... but its a big list and I don't want to import one by one because its gonna take a long time and will be hard to maintaining. I'm getting the font list from a API there is same way to import the fonts list using javascript?

The only way I could do so far was using @font-face with pure css, but with that I will need to import one by one.

@font-face {
    font-family: 'Animal-1';
    src:  url('http://ggt-des.ibge.gov.br/styles/fontes/Animal-1.ttf');
    font-weight: normal;
    font-style: normal;
};

Font List:

{"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"}

Answer 1

One way you can append style element to the head using javascript. Like below code snippet.

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>

---

Other way you could use mixin using SASS but for this you need to create .scss file instead of .css.

1. In .scss file you need to create @mixin, it's like a function.

2. And after you need to use that mixin using @include with passing parameters, it's like 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');