FreeDoc

From the Webstream FreeDoc Team

FreeDoc is an outline font embedding service created, developed, and maintained by Webstream that lets developers load and use fonts within web pages without having to load them via CSS files or code. Embedding typefaces in this way has the aim of removing the need to write a large amount of CSS code to use each font, especially on websites that use multiple fonts.

FreeDoc uses modern and standard web technologies like vanilla JavaScript and is supported on all modern HTML5 websites, regardless of the framework used. The technology is free for any developer to use on personal or commercial projects, but it is not released under an open-source license. Webstream in the past pushed for the adoption of their FontScript service, but since has encouraged both systems to be used as both have their strengths and flaws, especially FontScript where users cannot load multiple custom font files without a master CSS file, whereas FreeDoc does not have this issue.

Using FreeDoc

To implement FreeDoc, import the library using the script import below.
<script type="module" src="https://fontsapi.pages.dev/public/freedoc.js"></script>

Then, import a font or set of fonts using the freedoc-font tag.
<freedoc-font src="" name=""></freedoc-font>

To use multiple fonts, use new freedoc-font tags with different names. If you want to use multiple fonts within a family, then name the fonts based on their style (i.e., My Font 1 Bold and My Font 1 Italic, etc.)

Finally, use the fonts in your code. Either use the freedoc-text tag or use the defined name in your CSS code.

<freedoc-text font="My Font 1">Hello world!</freedoc-text>