/font-toggler

A web component to toggle the font of elements inside it.

Primary LanguageCSS

Font Toggler

A web component to toggle the font of elements inside it. Demo.

GIF of some text switching font every 2 seconds

How to use

Create font stylesheet

Create a stylesheet for the fonts, with the format the same as fonts.css.

To make this easier, I use this bash script to convert filenames to CSS.

/* ... */
@font-face {
  font-family: "Windsong";
  src: url("./1 - Handwriting/Windsong/Windsong.woff") format(woff);
}
.font--windsong {
  font-family: "Windsong" !important;
}
/* ... */

Use web component

Include the web component script and font stylesheet in your <head>.

Wrap a component to change the font of, specifying the filename of the stylesheet, and the time between font switches, in seconds.

<link rel="stylesheet" href="fonts/fonts.css">
<script src="./font-toggler.js"></script>
<!-- ... -->
<font-toggler stylesheet="fonts.css" every_s="10">
    <p>I want this text to change!</p>
</font-toggler>