EmbedSocialで作成した埋め込み用ウィジェットには、一部のWEBフォントを管理画面上の操作で反映させることが可能です。今回はAdobeフォントの反映方法をご紹介いたします。
Adobeフォントを反映させる方法
1. Adobeアカウントにログインした状態で https://fonts.adobe.com/ にアクセスし、検索バーから反映を希望するフォントを検索します。※Adobeフォントの使用にはAdobeアカウントが必要です
2. 表示されたフォントより「WEBプロジェクトに追加」を選択します。
3. プロジェクトを作成し「保存」へと進みます。
4. 表示される埋め込みコードの下にある「@importリンク」をクリックします。
5. 新たに表示されたコードのうち「@import url…」の一行をコピーします。
6. EmbedSocialの管理画面を開き、ウィジェットの編集画面へと移動します。
7. 「カスタムCSS」の項目に先ほどコピーした「@import url…」の一行貼り付けます。
8. 先ほどのAdobeフォント画面に戻り、反映させるフォントのCSSプロパティ・値をコピーします。
9. セレクタに「body」を指定し、先ほどコピーした内容を貼り付けます。
最終的なカスタムCSSは以下のようになります。※下記は例であり、そのままコピーしてもフォントは反映されません
@import url("https://use.typekit.net/xxxxx.css");
body {
font-family: futura-pt, sans-serif;
font-weight: 700;
font-style: normal;
}
10. 「適用」をクリックすることで、Adobeフォントを反映させることができます。
詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。