Динамически загружать шрифт из файла в зависимости от ввода пользователя

Question

Я создал небольшой симулятор стилизации для приложения нашей компании, чтобы дизайнеры могли быстро проверить параметры цвета / стили границ и т. Д. c для нашего приложения. Я использовал в основном переменные CSS, которые меняются при адаптации цветов с помощью средства выбора цвета / адаптации значений в конфигурации JSON.

Дизайнеры также должны иметь возможность тестировать разные стили шрифтов в JSON, но я не могу заставить его работать с локальными файлами шрифтов.

Как я могу добиться загрузки локальных шрифтов из локальной папки? Я хочу добиться этого вживую, чтобы можно было увидеть разницу при вводе другого шрифта.

Простая загрузка в примере "Courier" работает как системный шрифт, но когда я хочу загрузить его из папки, это не так. не работает.

Вот как я загружаю шрифты в переменную CSS (значение get просто обеспечивает безопасный способ доступа к JSON)

JS

$(":root")[0].style.setProperty("--regularFont", "/fonts/" + getValue(parsedConfig,['configs', 0, 'styleSheet', 'fonts', 'regularFont'],"") + ".tff");
      $(":root")[0].style.setProperty("--boldFont", "/fonts/" + getValue(parsedConfig,['configs', 0, 'styleSheet', 'fonts', 'boldFont'],"") + ".tff");

JSON:

"fonts": {
      "regularFont": "Arial",
      "boldFont": "AvenirNext-Bold"

CSS

@font-face {
  font-family: sans-serif; 
  font-family: regularFont;
  src: local(var(--regularFont)),
       url(var(--regularFont));
}

@font-face {
  font-family: sans-serif; 
  font-family: boldFont;
  src: local(var(--boldFont)),
       url(var(--boldFont));
       font-weight: bold;
}

/* example Styling */
.card {
    font-family: regularFont;
}

Answer 1

Вы можете создать объект FontFace с данными из объекта File и добавить его к FontFaceSet:

документа

const fontInput = document.getElementById("font-input"),
test = document.getElementById("test");

let font;

fontInput.addEventListener("input", async () => {
  if (font)
    document.fonts.remove(font);

  const data = await fontInput.files[0].arrayBuffer();
  font = new FontFace('test-font', data);
  await font.load();
  document.fonts.add(font);
  test.style.fontFamily = `test-font`;
});

<input type="file" id="font-input">
<p id="test">Upload a font to change me!</p>