Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | const FONT_OPTIONS = [
{
label: 'Default',
value: 'default',
url: 'system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
},
{
label: 'Roboto',
value: 'roboto',
url: 'https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap',
},
{
label: 'Open Sans',
value: 'openSans',
url: 'https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap',
},
{
label: 'Lato',
value: 'lato',
url: 'https://fonts.googleapis.com/css?family=Lato:400,700&display=swap',
},
{
label: 'Montserrat',
value: 'montserrat',
url: 'https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap',
},
// Add more fonts as needed
];
/**
* Loads a font dynamically based on font family value
* @param {string} fontFamily - The font family value to load
* @returns {void}
*/
export const loadFont = (fontFamily) => {
if (!fontFamily) {
return;
}
// Find the selected font from FONT_OPTIONS
const selectedFont = FONT_OPTIONS.find((font) => font.value === fontFamily);
if (!selectedFont) {
console.warn(`Font not found: ${fontFamily}`);
return;
}
if (selectedFont.url) {
const linkId = `dynamic-font-link-${fontFamily}`;
// Check if link already exists in DOM
const existingLink = document.getElementById(linkId);
if (!existingLink) {
// Create and inject link tag
const link = document.createElement('link');
link.id = linkId;
link.rel = 'stylesheet';
link.href = selectedFont.url;
link.setAttribute('data-font-family', fontFamily);
document.head.appendChild(link);
}
}
};
/**
* Removes all dynamic font links from the document
* @returns {void}
*/
export const removeAllFonts = () => {
const dynamicFonts = document.querySelectorAll('[id^="dynamic-font-link-"]');
dynamicFonts.forEach((link) => {
link.remove();
});
};
/**
* Gets the font label for a given font value
* @param {string} fontValue - The font value to get label for
* @returns {string} The font label or 'Default' if not found
*/
export const getFontLabel = (fontValue) => {
const font = FONT_OPTIONS.find((option) => option.value === fontValue);
return font ? font.label : 'Default';
};
export const getFontURL = (fontValue) => {
const font = FONT_OPTIONS.find((option) => option.value === fontValue);
return font ? font.url : '';
};
export default FONT_OPTIONS;
|