フォントを変更する

 

ページ全体のフォントを変更する

※ Widget内のテキストを除く

手順

  1. Version編集画面>「Version設定」をクリック
    01d815fc2b7f914303ddf9d550445146

  2. フォントの箇所に、下記フォント名コピーして入れ替える
▼ ご利用できるフォント
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
  • ヒラギノ角ゴPro W3

 3. 更新ボタンを押します。


 
 

 

一部テキストのフォントを変更する

指定箇所のフォントを変更することができます。

デフォルトのフォントを利用する

 1. 変更したい文字を選択する

 2. ツールバーの3点リーダーをクリック

 3. フォントを選択する

 

Google Fonts(外部ツール)を利用する

Google Fonts(外部ツール)にあるフォントを活用できます。
 

 手順

1. Google Fontsで実施すること

    1. 言語を絞り込み、お好きなフォントを選択する
    2. 「Get front 」>「Get embed code」> Web >「Copy code」でフォントの埋め込みHTMLとCSSコードを取得する


2. Squad beyondに実装する

    1. Version画面で任意なWidgetを挿入し、「HTML編集」クリック



099a5f80b9b5d4aa1ee91ee0479cd758
   b. 「HTML (カスタム)」・「CSS (カスタム)」内の記述を全て削除する
   c. 以下の記述を「HTML(カスタム)」に貼り付ける

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--↓Google Fontsで取得できたHTMLコードを貼り付ける↓ -->
⚪️⚪️⚪️⚪️
<style>
.custom-font {
    /* ↓Google Fontsで取得できたCSSコードの2行目を貼り付ける↓ */
▼▼▼▼
}
</style>
<p class="custom-font">
テキスト
</p>

   d. ⚪️⚪️⚪️⚪️」を1-bで取得できたHTMLコードに入れ替える

   e. 「▼▼▼▼」を1-bで取得できたCSSコードの2行目に入れ替える

99d89b941c832ef57a63400bbb2ff473

   f. 更新ボタンをクリックします。

 
 参考サイト
▼ 【外部サイト】Google Fonts
 
▼ 【外部サイト】Google Fonts FAQサイト