Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

fela-font-renderer

rofrischmann6MIT5.0.25

Fela enhancer to render fonts into a separate stylesheet

fela, fela-devtools, fela-enhancer, dx, devtools, cssinjs

readme

Deprecated!
The Font Renderer Enhancer (fela-font-renderer) is deprecated, please remove it from your Fela configuration.
Font Renderering was heavily improved within Fela making this package obsolete nowadays. See http://fela.js.org/docs/basics/Renderer.html#renderfont

fela-font-renderer

npm version npm downloads

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

Installation

yarn add fela-font-renderer

You may alternatively use npm i --save fela-font-renderer.

Usage

Configuration

Options
Option Value Default Description
mountNode (HTMLElement) | DOM node to render @font-face markup into
Example
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 fontEnhancer = fontRenderer(mountNode)

const renderer = createRenderer({
  enhancers: [ fontEnhancer ]
})
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() ]
})

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

License

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