Skip to content

Latest commit

 

History

History
60 lines (50 loc) · 1.81 KB

README.md

File metadata and controls

60 lines (50 loc) · 1.81 KB
Raw

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);