CodePen での Web フォントの使用

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 フォントに代わって適用されます。

その他の関連ヘルプ

Web フォントが use.typekit.net から読み込まれるのはなぜですか。