[Vuejs]-How can I inject fonts and colour variables (fetched from backend api upon page load) into Nuxt.js styles?

by

0👍

You can construct a FontFace object and inject it to the document.

Following are the example of how you can achieve it. You can run the code snippet:

const fontFamily = 'Sansita Swashed'; // your custom font family
const fontSrc = 'https://fonts.gstatic.com/s/sansitaswashed/v1/BXR8vFfZifTZgFlDDLgNkBydPKTt3pVCeYWqJnZSW7RpXTIfeymE.woff2' // your custom font source
function injectCustomFont() {
  const customFont = new FontFace(fontFamily, `url(${fontSrc})`);
  customFont.load().then((font) => {
    document.fonts.add(font);
    document.body.style.fontFamily = '"Sansita Swashedr", cursive';
  });
}


document.getElementById('btnFontChanger').addEventListener('click', () => {
  injectCustomFont();
});
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button id="btnFontChanger" type="button">Click to change font</button>

FontFace() constructor can accept one more parameter. Learn more at here.

Note:

FontFace is still an experimental. You must double check the browser compatibility before using it.

Relatable links:

https://usefulangle.com/post/74/javascript-dynamic-font-loading

https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

Leave a comment