mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-23 20:41:23 +01:00
fonts rework - fetch google font
This commit is contained in:
parent
d6989c6ab1
commit
66db527255
4 changed files with 80 additions and 114 deletions
|
|
@ -549,19 +549,39 @@ styleFontAdd.addEventListener("click", function () {
|
|||
}
|
||||
});
|
||||
|
||||
styleInputFont.addEventListener("change", function () {
|
||||
if (!this.value) {
|
||||
tip("Please provide a valid Google font name or link to a @font-face declaration");
|
||||
return;
|
||||
}
|
||||
fetchFonts(this.value).then(fetched => {
|
||||
if (!fetched) return;
|
||||
styleFontAdd.click();
|
||||
styleInputFont.value = "";
|
||||
if (fetched !== 1) return;
|
||||
styleSelectFont.value = fonts.length - 1;
|
||||
changeFont(); // auto-change font if 1 font is fetched
|
||||
styleInputFont.addEventListener("change", async function () {
|
||||
const family = this.value;
|
||||
if (!family) return tip("Please provide a Google font name", false, "error");
|
||||
const existingFont = fonts.find(font => font.family === family);
|
||||
if (existingFont) return tip("The font already exists in the list", false, "error");
|
||||
|
||||
document.getElementById("styleFontAdd").click();
|
||||
document.getElementById("styleInputFont").value = "";
|
||||
|
||||
const fontRanges = await fetchGoogleFont(family);
|
||||
if (!fontRanges) return tip("Cannot fetch Google font for this value", true, "error", 4000);
|
||||
|
||||
tip(`Google font ${family} is loading...`, true, "warn", 4000);
|
||||
|
||||
const promises = fontRanges.map(range => {
|
||||
const {src, unicodeRange, variant} = range;
|
||||
const fontFace = new FontFace(family, src, {unicodeRange, variant, display: "block"});
|
||||
return fontFace.load();
|
||||
});
|
||||
|
||||
Promise.all(promises)
|
||||
.then(fontFaces => {
|
||||
fontFaces.forEach(fontFace => document.fonts.add(fontFace));
|
||||
fonts.push(fontRanges[0]); // add the first font rule
|
||||
tip(`Google font ${family} is added`, true, "success", 4000);
|
||||
addFontOption(family);
|
||||
document.getElementById("styleSelectFont").value = family;
|
||||
changeFont();
|
||||
})
|
||||
.catch(err => {
|
||||
tip(`Failed to load Google font ${family}`, true, "error", 4000);
|
||||
console.error(err);
|
||||
});
|
||||
});
|
||||
|
||||
styleFontSize.addEventListener("change", function () {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue