Adding additional fonts

[1mzino]

I am using SvelteJS with vite to quickly get a static site running which hosts its own rich-text editor.. I can get Quill running just fine and the toolbar works.. (even if I am not able to render it in a container rather than document.body)

I have followed the guide on adding fonts and am only able to see "Sans Serif" on the dropdown menu rather than my own fonts..

I am expecting to see 'Austin News' be a selectable font.. perhaps I am missing some steps? FYI I also have an external stylesheet with the 'Austin News' fontface

<script lang="ts">
  import { onMount } from "svelte";
  let quill;

  onMount(async () => {
    const { default: Quill } = await import("quill");
    let fonts = ["Austin News"];
    var FontAttributor = Quill.import("attributors/class/font");
    FontAttributor.whitelist = fonts;
    Quill.register(FontAttributor, true);

    const toolbarOptions = [
      [{ font: fonts }],
      [{ header: [1, 2, 3, false] }],
      ["bold", "italic", "underline", "strike", { color: ["#F00", "#0F0", "#00F", "#000", "#FFF", "color-picker"] }],
      ["link", "code-block"],
    ];

    quill = new Quill(".editor", {
      modules: {
        toolbar: toolbarOptions,
      },
      theme: "snow",
      placeholder: "Type something..",
    });
  });
</script>