- Adobe Fonts ユーザガイド
- はじめに
- フォントのライセンス
- フォントの入手と使用
- Creative Cloud アプリケーションでの Adobe Fonts の使用
- フォントの管理
- デスクトップアプリケーションでの見つからないフォントの解決
- InDesign でのフォントの使用
- フォントとタイポグラフィ
- HTML5 Canvas ドキュメントでの web フォントの使用
- InCopy でのフォントの使用
- Muse での web フォントの使用
- フォントファイルのパッケージング
- トラブルシューティングガイド：フォントの追加
- 追加したフォントがフォントメニューに表示されない
- 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
- 現在使用しているフォントがフォントメーカーによって更新された場合
- Web デザインと開発
- Web サイトへのフォントの追加
- トラブルシューティングガイド：web サイトへのフォントの追加
- フォントの問題のトラブルシューティング
- HTML 電子メールまたはニュースレターでの web フォントの使用
- Accelerated Mobile Pages（AMP）を使用した web フォントの使用
- CSS セレクター
- font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
- 埋め込みコード
- ダイナミックサブセットと web フォント提供
- フォントイベント
- Web フォントが use.typekit.net から読み込まれるのはなぜですか。
- サイトが use.typekit.net に接続できない
- CodePen での web フォントの使用
- ブラウザーと OS のサポート
- ドメイン
- ローカル開発環境での web フォントの使用
- コンテンツセキュリティポリシー
- Web フォントの印刷
- 言語サポートと OpenType 機能
- フォント技術
CodePen は、Web ベースの HTML、CSS および JavaScript コードエディターで、ブラウザー内でコードをすぐに試してみることができます。Pen で適切に カスタム Web フォントを使用できます。
使用するフォントの選択
Web フォントのチュートリアルに従ってフォントを選択し、Web プロジェクトを作成します。
Pen への埋め込みコードの追加
埋め込みコードは、HTML エディターの設定メニューまたは CSS／Add External CSS メニューの「Stuff for <head>」フィールドで CodePen UI に追加できます。
プロジェクトの埋め込みコードを確認するには、Web プロジェクトページに移動して、プロジェクト名を探します。これらのいずれかの場所にそのプロジェクトのデフォルトの CSS 埋め込みコードをコピー＆ペーストします。
CSS でのフォントの適用
Pen の CSS エディターでフォントファミリー名を使用して、フォントを「Live View」ですぐに見ることができるようになりました。
CSS で使用するフォントファミリー名は、Web プロジェクトでも表示されます。詳しくは、CSS でのフォントの使用に関する説明を参照してください。
Pen をフォークする
公開 Pen は、フォーク（コピー）して、自分のコードを別のユーザーが作成できるようにすることができます。Web フォントは、フォークした Pen でも機能します。
プロジェクトの削除またはサブスクリプションのキャンセル
CodePen で使用しているプロジェクトを削除したり、サブスクリプションをキャンセルすると、その埋め込みコードを使用する Pen ではフォントを使用できなくなります。これには、元の Pen とそこからフォークした Pen も含まれます。CSS で指定されたフォールバックフォントがカスタム Web フォントに代わって適用されます。
