Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A function for modifying variable fonts with JavaScript

Resources

License

Packages

No packages published