A react component to preview fonts.

Try it out: https://font-preview-zeta.vercel.app/

Installation

npm install font-preview
OR
yarn add font-preview

Usage

import { FontPreview } from 'font-preview';

<FontPreview
  fontUrl="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2"
  text="The quick brown fox jumps over the lazy dog"
/>
OR
<FontPreview
  fontUrl="https://keybored.pro/static/media/SourceCodePro-Regular.2cacf64afc86b76c81e6.ttf"
  text="The quick brown fox jumps over the lazy dog"
/>

Props

| Prop | Type | Description | Required | --- | --- | --- | --- | | fontUrl | string | The url of the font file | true | | text | string | The text to preview | false | | onFontLoad | function | A callback function to be called when the font is loaded | false | | onFontError | function | A callback function to be called when the font fails to load | false |

Customization

You can customize the <FontPreview /> component by either wrapping it in an element and customizing the element or by adding styles to the class font-preview in your css file. font-preview is the class assigned to the div that displays the text with font-preview.

APIs

getFontDetails

This function returns a promise that resolves to an object containing the font details. Returns an object that contains the following properties:

• fontFamily: The font family name
• fullName: The full name of the font
• version: The version of the font
• manufacturer: The manufacturer of the font
• designer: The designer of the font
• licence: The licence of the font

  import { getFontDetails } from 'font-preview';

  // Accepts font file url
  const fontMeta = await getFontDetails(fontUrl);

  // Accepts loaded font file buffer
  const fontMeta = await getFontDetails(fontBuffer);