This custom element library helps you create an embeddable text element that lets you rapidly change the font used, to add a complex and dynamic look to your website. We originally created this library for the new ITG Fonts website header.
First, load the script. We suggest embedding it in your website’s head section.
<script type="module" src="https://evermoretype.pages.dev/cdn/fontcycle.js"></script>
Then, create a Font Cycle element by using the <font-cycle></font-cycle> tags.
Make sure you have a discoverable CSS file embedded in your HTML code so the library can use those fonts.
Define which fonts you want to use with the fonts="" attribute. Don’t use single-quotes ('') inside the attribute. Each font should be comma separated.
<font-cycle fonts="Font 1,Font 2, Font3">Lorem Ipsum</font-cycle>
You can change the interval (the speed at which the fonts change) with the interval="" attribute. All intervals are measured in milliseconds.
<font-cycle fonts="Font 1,Font 2, Font3" interval="600">Lorem Ipsum</font-cycle>
If you want to influence the order in which the fonts load, then use the mode="" attribute. Choose either sequential or random.
<font-cycle fonts="Font 1,Font 2, Font3" interval="600" mode="random">Lorem Ipsum</font-cycle>
By default, the library will use the 400 or ‘regular’ weight of a font. You can change that either with custom CSS code or by using <b> and <i> tags within the Font Cycle element.
You can also embed an element within other HTML elements.
<p>Hello <font-cycle fonts="Font 1,Font 2, Font3" interval="600" mode="random">World</font-cycle>!</p>