React Component wrapper for Web Font Loader
To build the examples locally, run:
npm install
npm start
Then open localhost:8000
in a browser.
The easiest way to use react-font-loader is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).
You can also use the standalone build by including dist/react-font-loader.js
in your page. If you use this, make sure you have already included React, and it is available as a global variable.
npm install react-font-loader --save
The FontLoader
can be included within any React Component. It's render method returns null
.
There are 2 required props:
fontProvider
One of 'google', 'typekit', 'fontdeck', 'monotype', or 'custom'fontFamilies
Array of font styles to load
For Example:
<FontLoader
fontProvider="google"
fontFamilies={['Source Code Pro:400']}
/>
A few props can control the behavior of a FontLoader
fonts
Object containing fonts that have alreay been downloaded (this may be provided by i.e. a Redux object)timeout
Timeout after which the Web Font Loader reports font(s) inactive. Default is 3000classes
If true, the Web Font Loader will add classes to thehtml
element. Recommended to setfalse
in keeping with the React paradigm. Default is falsedebug
If true, logs additional event info to the console. Default is false.
Fonts loaded from Google can be automatically subsetted by passing a text
prop.
<FontLoader
fontProvider="google"
fontFamilies={[
'Open Sans:400'
]}
text="Welcome to Barbershop"
/>
Typekit needs a typekitId
prop to load the fonts.
<FontLoader
fontProvider="typekit"
fontFamilies={[…]}
typekitId="xxxxxx"
/>
To load Adobe Edge Web Fonts, pass a typekitAPI
prop with the Edge Fonts URL.
<FontLoader
fontProvider="typekit"
fontFamilies={[…]}
typekitId="xxxxxx"
typekitAPI="//use.edgefonts.net"
/>
To load fonts from Fontdeck, pass a fontdeckId
prop that corresponds to the ID of your site.
<FontLoader
fontProvider="fontdeck"
fontFamilies={[…]}
fontdeckId="xxxxxx"
/>
There are several additional props for Fonts.com:
monotypeProjectId
The project ID (Required)monotypeVersion
Optional for cache-bustingmonotypeLoadAllFonts
Optional boolean
<FontLoader
fontProvider="monotype"
fontFamilies={[…]}
monotypeProjectId="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
monotypeVersion="8675309"
monotypeLoadAllFonts={false}
/>
Custom fonts include the option to pass a customUrls
array of stylesheets.
<FontLoader
fontProvider="custom"
fontFamilies={[…]}
customUrls={['/mycustomfonts.css']}
/>
The following optional props can be passed to leverage the Web Font Loader event system:
- Triggered for all fonts passed to the
FontLoader
onLoading
Triggered when all fonts have been requestedonActive
Triggered when all of the fonts have successfully loadedonInactive
Triggered when the browser doesn't support linked fonts or none of the fonts could be loaded
- Triggered for each font and include
familyName
andfvd
for that fontfontIsLoading
fontIsLoaded
fontLoadFailed
- Web Font Loader Documentation
- Original README for generator: React Component Generator
- Typekit
- Google Fonts
- Fontdeck
- Fonts.com
http://www.apache.org/licenses/LICENSE-2.0
Copyright (c) 2017 Barbershop I/O.