外部フォントスタイルシートをブランドシステムにリンクする

This article applies to Content Automation templates which are different from Brandfolder Custom Templates, and CI Hub.  

あなたのブランドフォントはすでに CDN (コンテンツ配信ネットワーク) 経由でデジタル的にアクセス可能で、Web 対応になっている可能性があります。この場合、ホストされているフォントを宣言してアクセスする CSS スタイルシートをブランド システムにリンクするだけで、テンプレートで使用できるようになります。

最初のスタイルシートのリンク

1. ブランドシステムのタイポグラフィタブからクリック編集ページの右上隅にあります。
2. 既存の書体で宣言されたフォントを更新するか、新しい書体とフォント リストを使用して最初から始めることができます。
3. クリックソースを追加リンクされていないフォント入力で、スタイルシート リンク モーダルを開きます。
4. に基づいて@フォントフェイスフォントファミリースタイルシートで宣言すると、どのフォントをリンクするかを指定できるようになります。名前入力。複数存在する場合は、以下の複数のフォントのセクションを確認してください。
5. クリックソースを追加リンクプロセスを完了します。

新しいフォントは CDN にリンクされるので、テンプレートを作成するたびに使用できるようになります。 

スタイルシートの書式設定

外部スタイルシートをリンクする場合、ブランドシステムは、1つ以上の@フォントフェイスフォントへの宣言。 

ファイルは以下のようになります。ブランドシステムにリンクするスタイルシートは、ソースURL。

@font-face { font-family: 'Helvetica'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica.woff2') format('woff2'), url('helvetica.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal;フォントスタイル:斜体; }

スタイルシート内の複数のフォント

スタイルシートが以下の例のようになっている場合（つまり、複数の@フォントフェイスフォントファミリー宣言など) がある場合は、同じ CDN リンクで複数のフォントを設定する必要があります。これは、新しくリンクされたフォントに基づいてタイプスケールを正しく作成できるようにするためです。これが実際にどのように動作するかを確認するには、以下のビデオをご覧ください。 

@font-face { フォントファミリー: 'ポピンズ'; src: url('poppins.woff2') format('woff2'), url('poppins.woff') format('woff'); font-weight: normal; font-style: 斜体; } @font-face { font-family: 'ヘルベチカ'; src: url('helvetica-bold.woff2') format('woff2'), url('helvetica-bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Helvetica'; src: url('helvetica-italic.woff2') format('woff2'), url('helvetica-italic.woff') format('woff'); font-weight: normal; font-style: 斜体; }

その他のリソース

• MDN Web ドキュメント: @font-face
• Digital Ocean: @font-face と font-display を使用して CSS でカスタム フォントを定義する方法