Font Files Framer Package: Component Usage Example

Font Files Component Usage Example.tsx

import * as React from "react"
import { Frame, addPropertyControls, ControlType } from "framer"
import { url } from "framer/resource"

// @ts-ignore
import { Loader } from "@framer/jordanframer.font-files/code/Loader"
// @ts-ignore
import { File } from "@framer/jordanframer.font-files/code/File"

const fontFileName = "FontFiles/emulogic.ttf"

export function ComponentExample(props) {
    const { fontFamily, ...rest } = props
    const fontPath = url(`./design/assets/${fontFileName}`)
    const style = { color: "#fff", fontSize: "36px", fontFamily: fontFamily }
    return (
        <Frame {...rest} background={"#000"} style={style}>
            <Frame size={"100%"} background={""}>
                Code Font Files Test
            </Frame>
            <Frame name={"FontFiles"} size={0} overflow={"hidden"} opacity={0}>
                <Loader>
                    <File cssName={fontFamily} filePath={url(fontPath)} />
                </Loader>
            </Frame>
        </Frame>
    )
}

const defaultProps = { height: 300, width: 300, fontFamily: "emulogic" }

ComponentExample.defaultProps = defaultProps
ComponentExample.displayName = "Font Files: Component Example"

addPropertyControls(ComponentExample, {
    fontFamily: {
        type: ControlType.String,
        title: "Font Family",
        defaultValue: defaultProps.fontFamily,
    },
})