How do I use a dynamic Font url in a CSS style sheet

Question

I'm building a widget which users can design and then embed on their own website. One thing they can choose is the font, which we self host on AWS.

During the initial load, the app hits our API for the widget details, the font URL is returned in the response. We are then setting this as a CSS variable like so:

HTML:

<div v-bind:style="cssProps">

Vus JS :

cssProps(){
  return {
    '--accent_color': "#" + this.$store.state.accent_color,
    '--font-url': (this.$store.state.font != null ? "https://wifiuploads.s3.amazonaws.com/" + this.$store.state.font : '"Source Sans Pro", sans-serif'),
  }
}

The main issue I have come across it I cannot interpolate a dynamic url like this:

@font-face {
  font-family: "user_selection";
  src: url(var(--font-url));
}

I cannot use a static url for the fonts, I need away to load fonts into my stylesheets with a dynamic URL.

Answer 1

To resolve I created a style element with a font-face rule using Javascript:

JS:

created(){
      var newStyle = document.createElement('style');
      newStyle.appendChild(document.createTextNode("\
      @font-face {\
          font-family: 'user_selection';\
          src: url('https://wifiuploads.s3.amazonaws.com/" + this.$store.state.font + "');\
      }\
      "));

      document.head.appendChild(newStyle);

    },

CSS:

body{
    font-family: "user_selection";
  }

Answer 2

Building on the answer, here's another brute-force approach to loading Google Fonts.

function insertGoogleFont(fontName: string) {
  var newStyle = document.createElement('style');
  newStyle.appendChild(document.createTextNode("\
    @import url('https://fonts.googleapis.com/css2?family=" + fontName + "&display=swap');"));
  document.head.appendChild(newStyle);
}