Components AI - Typefaces
Collection of Google fonts typeface packages for three.js, react-three-fiber, and other tools.
Example usage
Below is an example for using recursive with react-three-fiber.
Install a package
yarn add @compai/font-recursiveUse three's FontLoader
import { useRef, useState, useEffect, Fragment } from "react";
import { Canvas, useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import typefaceData from "@compai/font-recursive/data/typefaces/normal-400.json";
const font = new THREE.FontLoader().parse(typefaceData);Create a component
export const RecursiveText = ({
size = 1,
height = 0.2,
color = "tomato",
text,
wireframe = false,
wireframeLineWidth = 0,
...props
}) => {
const mesh = useRef();
return (
<mesh {...props} ref={mesh}}>
<textGeometry args={[text, { font, size, height }]} />
<meshStandardMaterial color={color} wireframe={wireframe} wireframeLinewidth={wireframeLinewidth} />
</mesh>
);
}Use the component
const Demo = () => {
return (
<Canvas>
<ambientLight color="#fff" intensity={0.5}/>
<spotLight position={[10,10,10]} intensity={0.5} color="#d05edb"
<ABeeZeeText
text="ABeeZee"
color="#ff6490"
size={1}
height={0.2}
roughness={1}
wireframe={false}
wireframeLinewidth={0}
position={[0,0,0]}
/>
</Canvas>
);
}Development
Below documents how to install dependencies and run the build scripts. If you're looking to use the packages that are already built, check out the typeface documentation.
Installation
Install dependencies for package generation.
yarnUsage
The build script takes the Google Fonts listing, fetches their ttf font
files from the CDN, and then uses
opentype.js to convert to a
typeface.js format.
The conversion is adapted from facetype.js by @gero3.
yarn buildRelease
This project uses changesets to handle versioning and package building.
yarn changeset
yarn version:packages
yarn releaseResources
The following projects were used to aggregate, transform, and curate font data:
