This library helps you create custom elements that let you showcase your font families by loading them via a CSS file. We originally created this library for the FontCheckout service.
First, load the script. We suggest embedding it in your website’s <head> section.
<script type="module" src="https://evermoretype.pages.dev/cdn/fontpreview.js"></script>
Then, create a Font Preview element by using the <font-preview></font-preview> tags.
Load a CSS file using the catalogue="" attribute. Make sure the CSS file uses absolute URLs (i.e., https://example.com/MyFont.ttf) to load each font file. Relative URLs will not work.
<font-preview catalogue="https://example.com/fonts.css"></font-preview>
Finally, define which family you want to showcase using the family="" attribute.
<font-preview catalogue="https://example.com/fonts.css" family="My Family"></font-preview>