All Projects → components-ai → typefaces

components-ai / typefaces

Licence: MIT license
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to typefaces

Urbanist
Urbanist is a low-contrast, geometric sans-serif inspired by Modernist design and typography.
Stars: ✭ 374 (+605.66%)
Mutual labels:  fonts, typography, google-fonts
three-js-fundamentals-r3f
Examples from the Three.js Fundamentals website recreated in react-three-fiber renderer.
Stars: ✭ 84 (+58.49%)
Mutual labels:  threejs, react-three-fiber
fdiff
An OpenType table diff tool for fonts. Based on the fontTools TTX format.
Stars: ✭ 33 (-37.74%)
Mutual labels:  fonts, typography
EduSmart
It utilizes 3D, Augmented reality to give real-life simulations or feels of various models and make the learning process more impactful and fascinating. With an interactive live feature, students can ask the teacher their doubts instantly and also discuss.
Stars: ✭ 23 (-56.6%)
Mutual labels:  threejs, react-three-fiber
Tehreer-Android
Standalone text engine for Android aimed to be free from platform limitations
Stars: ✭ 61 (+15.09%)
Mutual labels:  fonts, typography
seed-fonts
WordPress plugin that helps you use web fonts (@font-face) easier. You can use 5 ready-generated Thai-English web fonts, or use your own collection.
Stars: ✭ 20 (-62.26%)
Mutual labels:  fonts, google-fonts
spacesvr
A standardized reality for the future of the 3D Web.
Stars: ✭ 135 (+154.72%)
Mutual labels:  threejs, react-three-fiber
Harfbuzz
HarfBuzz text shaping engine
Stars: ✭ 2,206 (+4062.26%)
Mutual labels:  fonts, typography
Trispace
2 axes/variable/mostly monospace
Stars: ✭ 49 (-7.55%)
Mutual labels:  fonts, typography
Anybody
3 axes/variable/sans/super compressed to super extended
Stars: ✭ 73 (+37.74%)
Mutual labels:  fonts, typography
web-fonts-repository
A simple webfont hosting. Google Fonts alternative for your own fonts.
Stars: ✭ 99 (+86.79%)
Mutual labels:  fonts, google-fonts
Sprat-type
Display typeface
Stars: ✭ 58 (+9.43%)
Mutual labels:  fonts, typography
Yrsa Rasa
Yrsa & Rasa: fonts for Latin and Gujarati
Stars: ✭ 200 (+277.36%)
Mutual labels:  fonts, google-fonts
Fnt
apt for fonts, the missing font manager for macOS/linux
Stars: ✭ 187 (+252.83%)
Mutual labels:  fonts, typography
eczar
Eczar: fonts for Devanagari and Latin
Stars: ✭ 52 (-1.89%)
Mutual labels:  fonts, google-fonts
react-three-arjs
AR.js with react-three-fiber
Stars: ✭ 88 (+66.04%)
Mutual labels:  threejs, react-three-fiber
Handwrite
Handwrite generates a custom font based on your handwriting sample.
Stars: ✭ 145 (+173.58%)
Mutual labels:  fonts, typography
Inkwell
An inkwell to use custom fonts on the fly.
Stars: ✭ 146 (+175.47%)
Mutual labels:  fonts, google-fonts
bf-3
my personal site, bf.wtf version 3
Stars: ✭ 58 (+9.43%)
Mutual labels:  threejs, react-three-fiber
racing-game-cljs
A 3D racing game built with ClojureScript, React and ThreeJS
Stars: ✭ 209 (+294.34%)
Mutual labels:  threejs, react-three-fiber

Screenshot_2021-05-10 Components AI — A new way to explore generative design systems

Components AI - Typefaces

Collection of Google fonts typeface packages for three.js, react-three-fiber, and other tools.

Read the docs →

Example usage

Below is an example for using recursive with react-three-fiber.

Install a package

yarn add @compai/font-recursive

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

Read the full docs →

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.

yarn

Usage

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 build

Release

This project uses changesets to handle versioning and package building.

yarn changeset
yarn version:packages
yarn release

Resources

The following projects were used to aggregate, transform, and curate font data:

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].