Efficient font loading using Font Face Observer.
Overview
Call this function to initialize a new
FontFaceObserver, and optionally execute a call back function when it's done.
FontFaceObserver
is an efficient font loader/monitor that uses the
IntersectionObserver
API to defer the loading process until the font is required.
Usage
Dependencies
To get the
fonts-load
utility working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/00-core/font-definition';
import loadFonts from 'design-system/src/js/00-utilities/fonts-load';
Basic code
Call this function without arguments to load the default
Ubuntu
font, and to set up the text elements of the DS to use it.
Function call
loadFonts( font, callBack );
| # | Name | Type | Default | Required | Description |
|---|---|---|---|---|---|
| 0 | font | String |
'Ubuntu' |
No | A
font-family
name defined in a stylesheet
@font-face
rule.
|
| 1 | callBack | function |
The default callBack adds the
'fonts-loaded'
class to the root element of the document.The text elements of the design system will be displayed using the default Ubuntu
font when this class is added.
|
No | A function reference to be called back when the
FontFaceObserver
has finished initializing.
|