Google Fontsなどで使いたいフォントを選び、Webフォントの追加・設定する機能です。
※この機能を使う場合、多少CSSの知識が必要になります。
Webフォント読み込み用コードの追加・フォント設定の編集
Webフォント用HTMLコードの追加・フォント指定は「[ys] Toolbox」→「フォント設定」から設定できます。
Webフォント追加用HTMLコードの追加
まずはGoogle FontsなどでWebフォントを追加するためのHTMLコードを取得し、コードの追加設定をします。
※Webフォントを使う方法はさまざまですが、このページではGoogle Fontsを使った方法で紹介します。
Google Fontsで追加したいフォントを選ぶ
Google Fontsのページを開き、使いたいフォントを選択します。
使いたいフォントを探す
使いたいフォント名を検索したりして、使いたいフォントを探します。
フォントの詳細ページから「Get font」をクリックします。
Webフォント追加用HTMLコードの取得
フォントの選択ができたら、選択したフォントの画面で「Get embed code」をクリックします。
Embed code in the <head> of your htmlと書かれた欄が追加用HTMLコードになるため、右下の「Copy code」をクリックしてコードをコピーします。
Webフォント追加用HTML欄に貼り付ける
コピーしたコードを「Webフォント設定」画面の「Webフォント追加用HTML」欄に貼り付けます。
HTMLコードを貼り付けただけではフォントを使った状態にならないため、「フォント指定の編集」欄も合わせて設定します。
フォント指定の編集
Google Fontsのページに戻りフォントごとのCSSが書かれた部分から追加したいフォントを指定する為の記述をコピーします。
上の例では「Shippori Mincho」というフォントを追加したいので、'"Shippori Mincho", serif;'部分をコピーしました。
まずはコピーしたコードをフォント指定の編集の「font-family」欄に貼り付けます。
英文フォントを追加する場合、これだけでは日本語フォントの指定が不足するため、追加したコードの後ろにカンマを付け、続けて日本語フォントの指定を追加します。
現在の設定で有効になっているフォントの指定がすぐ下に表示されているので、コピーして「font-family」欄に追記しましょう。
「変更を保存」をクリックして設定を保存します。