fela-font-renderer

fela-font-renderer

Allocates all renderFont calls to a separate renderer which renders into a separate mountNode to prevent refetching the @font-face every time.

Installation

npm i --save fela-font-renderer

Assuming you are using npm as your package mananger you can just npm install.
Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaFontRenderer global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela-font-renderer@3.0.0/dist/fela-font-renderer.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela-font-renderer@3.0.0/dist/fela-font-renderer.min.js"></script>

Usage

Client

Using the enhancer for client-side rendering can be achieved by simply passing another mountNode to the enhancer.

import { createRenderer, render } from 'fela'
import fontRenderer from 'fela-font-renderer'

const mountNode = document.getElementById('font-stylesheet')
const enhancer = fontRenderer(mountNode)

const renderer = createRenderer({ enhancers: [enhancer] })

render(renderer, document.getElementById('stylesheet'))

Server

To get the static CSS markup for both renderers can be achieved using the renderer.fontRenderer to generate the @font-face markup.

import { createRenderer } from 'fela'
import fontRenderer from 'fela-font-renderer'

const renderer = createRenderer({ enhancers: [fontRenderer()] })

// renderer styles ...

const CSS = renderer.renderToString()
const fontCSS = renderer.fontRenderer.renderToString()

Configuration

option	value	default	description
mountNode	HTMLElement		DOM node to render @font-face markup into

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.