Установите таблицу стилей, которая контролирует шрифт, с идентификатором, который позволяет вам удалить его и перестроить по желанию.Например:
function setFontTo(fontName) {
const styleId = 'font-style-sheet';
// Get a reference to the current in-use stylesheet, if there is one.
var fontStyleSheet = document.getElementById(styleId);
// Then define a new stylesheet with an updated @font-face rule:
var newFontStyleSheet = document.createElement("style");
newFontStyleSheet.id = styleId;
newFontStyleSheet.textContent = `
@font-face {
font-family: 'main-dynamic-font';
src: url(assets/fonts/${fontName}.woff) format('woff');
}
`;
// Then we swap: add the new rule first, then remove the old one.
// That way you don't get a flash of unstyled text.
document.head.appendChild(newFontStyleSheet);
if (fontStyleSheet) {
fontStyleSheet.parent.removeChild(fontStyleSheet);
}
}
И затем убедитесь, что в вашем файле / пакете CSS определите класс, который использует этот шрифт, например что-то вроде:
.main-content {
font-family: 'main-dynamic-font', serif;
}
И затем вВаша разметка вы используете этот класс для любого элемента, который требует стилизации текста с использованием выбранного шрифта:
<div class="main-content blah blah ...">
...
</div>
Наконец, вы убедитесь, что ваш селектор шрифтов позволяет пользователям выбирать имена шрифтов, которые в качестве значения отображаются нафактические имена файлов шрифтов (и вы всегда должны использовать woff):
<select id="font-picker">
<option value="roboto-regular">Roboto (regular)</option>
...
</select>
с обработчиком js для этого селектора.
fontSelector = document.getElementById("font-picker");
fontSelector.addEventListener("change", evt => {
// read the selected value, and then call the font swap function here.
});