fluid-variable-font-events v1.0.1

Fluid Axis Variation Events

A simple function to use varible font axes with JavaScript events.

Example usage

Change font weight based on screen width

import {fluidAxisVariation} from 'fluid-variable-font-events'

// Set a range for the minimum & maximum font axis values
const minAxisValue = 200;
const maxAxisValue = 900;

// Set a range for the minimum & maximum event values
const minEventValue = 320;
const maxEventValue = 1440;

// Get the current event value
const currentEventValue = window.innerWidth;
var element = document.querySelector("p");

// Initial setting
fluidAxisVariation(minAxisValue, maxAxisValue, minEventValue, maxEventValue, window.innerWidth,"--weight", element);

// Event
window.addEventListener("resize", function(){
    fluidAxisVariation(minAxisValue, maxAxisValue, minEventValue, maxEventValue, window.innerWidth,"--weight", element);
}, false);

Codepen Link

More examples

variablefonts.dev Codepen Collection