CodePen は、Web ベースの HTML、CSS および JavaScript コードエディターで、ブラウザー内でコードをすぐに試してみることができます。Pen で適切に カスタム Web フォントを使用できます。

使用するフォントの選択

Web フォントのチュートリアルに従ってフォントを選択し、Web プロジェクトを作成します。

Pen への埋め込みコードの追加

埋め込みコードは、HTML エディターの設定メニューまたは CSS/Add External CSS メニューの「Stuff for <head>」フィールドで CodePen UI に追加できます。

プロジェクトの埋め込みコードを確認するには、Web プロジェクトページに移動して、プロジェクト名を探します。これらのいずれかの場所にそのプロジェクトのデフォルトの CSS 埋め込みコードをコピー&ペーストします。

CodePen とデフォルトの CSS 埋め込みコードの使用
CSS ファイルの直接リンクによる CodePen の使用

CSS でのフォントの適用

Pen の CSS エディターでフォントファミリー名を使用して、フォントを「Live View」ですぐに見ることができるようになりました。

Web フォントが適用された CodePen エディター

CSS で使用するフォントファミリー名は、Web プロジェクトでも表示されます。詳しくは、CSS でのフォントの使用に関する説明を参照してください。

Web プロジェクトページの CSS 情報

Pen をフォークする

公開 Pen は、フォーク(コピー)して、自分のコードを別のユーザーが作成できるようにすることができます。Web フォントは、フォークした Pen でも機能します。

プロジェクトの削除またはサブスクリプションのキャンセル

CodePen で使用しているプロジェクトを削除したり、サブスクリプションをキャンセルすると、その埋め込みコードを使用する Pen ではフォントを使用できなくなります。これには、元の Pen とそこからフォークした Pen も含まれます。CSS で指定されたフォールバックフォントがカスタム Web フォントに代わって適用されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー