Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font Files Framer Package: Component Usage Example
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,
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.