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