フォント

ベータ

フォント管理は構築・テスト済みで、リリース前の最終レビュー中です。機能の提供状況をご覧ください。

Atlas は、ウェブサイトのフォントをライセンスの証拠とともにホストします。フォントが配信されるのは、そのライセンスがウェブ埋め込みを許可していて、期限が切れていない間だけです。

フォントを追加する

Design → Fonts を開いて、Add a font をクリックします。

1. Family name と Key を入力します。キーは CSS 変数の名前になり、後から変更できません。

2. Files, weights and styles で、WOFF2 または WOFF のファイルをアップロードします（メディアライブラリから選ぶこともできます）。各ファイルに Weight（たとえば 400、可変フォントなら 100-900 のような範囲）と Style（Upright または Italic）を設定します。

3. Fallback fonts を追加し、While loading を選択します。Show the fallback, then swap または Use the font only if it is ready at once です。

4. Licence で、Licence の名称、Licence ends（ある場合はその日付）、Evidence、任意の Licence document を記録し、The licence allows embedding this font on websites (@font-face) にチェックを入れます。

5. Add font をクリックします。

各フォントのカードには、使い方（たとえば font-family: var(--atlas-font-brand)）に加え、フォールバック、ライセンス、以前のバージョンが表示されます。ファイルの差し替えやライセンスの更新には New version をクリックします。以前のバージョンは保持されます。

ウェブサイトにフォントを読み込む

Add to your website カードに、すぐに使えるスニペットが表示されます。

• 任意のウェブサイト: Copy link tag で、ページの head に追加します。サイトの有効なフォントをすべて含む 1 つのスタイルシートが読み込まれます。
• Next.js: Copy code で、サーバーレンダリング版のコードをコピーします。

<link
  rel="stylesheet"
  href="https://<delivery host>/v1/delivery/environments/{environmentId}/fonts.css"
/>

スタイルシートは 5 分間キャッシュされ、フォントファイルは永続的にキャッシュされます。ファイルのバージョンごとに専用のアドレスがあるためです。フォントファイルは、その環境のウェブサイトのアドレスにのみ配信されます。

ライブウェブサイトのフォント

フォントの変更は、コンテンツと同様に、次のリリースで本番環境に届きます。本番環境が配信するのは、ライブリリースに含まれるフォントのバージョンだけです。

制限

• WOFF2 と WOFF のみ（TTF と OTF は非対応）。
• 1 つのフォントあたり、ファイルは最大 32 件、フォールバックフォントは最大 8 件。
• フォントは 1 つのサイトに属します。組織で共有するフォントカタログはまだなく、サブセット化もできません。

ウェブサイトヘルパーとパレット公開する