toss/tossface

トス・デザイン・チームが制作した、Unicode v14.0対応のミニマル・イモジ書体

開発の材料要確認 · NOASSERTIONデザイン・UI コンポーネント難易度
358+0今週👀 220
11フォーク5Issue
デモ・公式サイトをひらくtoss.im

中辛 の解説

トスフェイスは、CSS・HTMLで簡単に導入できるWebフォント対応のイモジ書体です。font-familyに「Tossface」を指定するだけで使用でき、jsDelivrのCDN経由で配信されるため、ダウンロード・インストールは不要です。Unicode v14.0の全イモジに対応し、Web・デスクトップ両対応の形式で公開されています。難易度は低く、CSSの基礎知識があれば即座に導入できます。

이런 레포예요

이럴 때 쓰면 좋아요

  • Webアプリケーションでのイモジ表示の統一感を実現する場合
  • デジタル製品全体で小サイズでも見やすいイモジが必要な場合

핵심 기능

Unicode v14.0の全イモジに対応TTF・OTF・WOFF・WOFF2の複数形式で提供CDN・ローカル両方の導入方式をサポート

대안 대비 차별점

小サイズでの視認性を優先したミニマル・デザインが特徴で、商用製品での実際の使用を想定した堅牢な設計になっています。

食べた人たち

実際に使ってみた人の記録です — 一言も完走の記録も、確認のうえで公開しています。

試食評 · 使った人のひとこと

まだ試食評がありません。使ってみたら、最初のひとことをどうぞ。

ほかのリポジトリの試食評を見る →

이 레포로 만든 것들

🖋 완주 인증하기

아직 이 레포로 만든 완주 인증이 없어요. 첫 밥도장을 찍어보세요!

このリポジトリの作り方

はじめてですか? むずかしくありません — 上から順にたどれば、自分の環境で動かして味見できます。

바로 시작하기

  1. CDNを使う場合:CSS内で以下をインポートします
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');
  1. またはHTMLの<head>内に以下を追加します
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" rel="stylesheet" type="text/css" />
  1. CSSでtossfaceクラスを定義します
.tossface {
  font-family: Tossface;
}
  1. HTMLでtossfaceクラスを付けた要素にイモジを表示します
<span class="tossface">😀</span>
  1. ローカル・インストールする場合は、GitHubのリリースページからフォント・ファイル(TTF、OTF、WOFF2等)をダウンロードします

  2. OSのフォント・フォルダにインストールして、font-family: Tossface;でデスクトップ・アプリから利用できます

ギット飯トライで味見

入れるのが面倒で少し不安だったなら — 安全スキャンからインストールまで、ターミナル一行で終わります。

ターミナルに貼り付ければ、ギット飯の安全スキャン → 隔離フォルダへ clone → インストール → 実行方法の案内まで自動です。はじめてでも大丈夫 — この一行だけです。

npx gitbap-try toss/tossface

Node.js さえあれば、インストールなしで動きます · ギット飯トライとは? →

スター推移 · 7日

358+0 / 7일

使いやすさ · まねしやすいか

サンプル評点 0/100
  • ゆるいライセンス
  • テストあり
  • サンプル集
  • 最近の更新
  • AGENTS.md
  • llms.txt
  • テンプレート

更新の情報なし · 2022 年に作成

「디자인·UI 컴포넌트」 こういうリポジトリを毎週受け取りませんか?

毎週月曜の朝、選んだ一膳だけ。広告なし · いつでも解除。

自分のリポジトリですか? README にギット飯バッジを貼る
[![깃밥](https://www.gitbap.com/badge/toss/tossface.svg)](https://www.gitbap.com/r/toss/tossface)
Claude からそのまま使う — ギット飯のつなぎ方

ギット飯を Claude につなぐと、こうしたリポジトリを Claude・Cursor・Codex から直接さがして試せます。

方法 ① コネクタ URL

Claude の設定 → コネクタにこのアドレスを貼り付け。

https://www.gitbap.com/api/mcp
方法 ② プラグイン(試用まで)

プラグインを入れると /gitbap-trending·/gitbap-try のスラッシュコマンドで、その場でリポジトリを試せます。Claude Code で下の 2 行を順に実行してください。

/plugin marketplace add jakeparkcolde/gitbap-cowork
/plugin install gitbap-cowork@gitbap
つなぎ方をくわしく →

AI が README をもとに要約しました · 原文を見る