- [タグの埋め込み]機能を使うとWebフォントも使うこともできます。
- [タグの埋め込み]機能は、レギュラープラン以上のプランでご利用いただけます
- [タグの埋め込み]機能はオプション契約でもご利用可能です。
- ペライチの機能でフォントを変更する場合は、フォントを変更するにはをご覧ください
1.Webフォントについて
1-1.Webフォントとは
- Web上のフォントのデータを使用するため、自分以外の環境でも同じフォントでWebサイトが表示できます。
1-2.Google Fontsとは
- https://www.google.com/fonts
- Googleが提供するWebフォントのサービスです。
2.注意点
利用できるプラン
利用に際して確認すること
- Webフォントを使用する際はフォントの利用規約をご確認ください。
有料のフォントや利用用途に制限のあるフォントもあります。
フォントが適用されない文字について
- フォントが適用されない文字はデフォルトのフォントで表示されます。
閲覧環境によって指定したフォントで表示されないことがあります。 - Webフォントを使用することによって、ペライチのフォント変更で設定したフォントが適用されない場合があります。
- フォントによって、そのフォントが使える文字が異なります。
また、意図しない文字になる場合があります。
その他
- 下記でご案内する手順はGoogle Fontsの設定方法の一例です。
ペライチではGoogle Fontsやその他のWebフォントサービスの詳細や設定方法についてご案内できません。
3.利用手順
3-1.Google Fontsでフォントを探す
- Google Fontsにアクセスする
- フォントを探す
- 選択したフォントの「＋ Select this style」をクリックする
- ［To embed a font, copy the code into the <head> of your htm］の<link>のコードをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける
例（選択したフォントによって異なります）
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css"> - [CSS rules to specify families]のタグをコピーし、メモ帳(Windows)やテキストエディタ(Mac)などに一旦貼り付ける
例（選択したフォントによって青文字部分は異なります）
font-family: 'Pacifico', cursive; - 貼り付けたタグを下記のように編集する
例
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<style>
*{
font-family: 'Pacifico', cursive;
}
</style>
3-2.ペライチのページにタグを埋め込む
- 編集画面のサイドバーより、[ページ管理設定]ボタンをクリックします
- [タグの埋め込み]タブをクリックします
- [headタグ内の埋め込み]に編集したタグを貼り付けます
- [ページ管理設定]画面の[保存]ボタンをクリックします
- プレビューでフォントが適用されているか確認します
4.設定例
その１
<link href='https://fonts.googleapis.com/css?family=Pinyon+Script' rel='stylesheet' type='text/css'>
<style> *{
font-family: 'Pinyon Script', cursive;
text-shadow: 4px 4px 2px #CCCCCC;
}
</style>
その２
<link href="https://fonts.googleapis.com/css?family=Passion+One:700" rel="stylesheet" type="text/css">
<style>
*{
color: #666666;
font-size: 60px;
letter-spacing: 8px;
font-family: 'Passion One', cursive;
text-shadow: -1px -1px 1px #333333, 1px 1px 1px #FFFF99;
}
h2{
font-family: 'Passion One', cursive;
color: #fff;
text-shadow: 0px -2px 4px white, 0px -4px 20px #FFFF00, 0px -10px 40px #FF9900, 0px -16px 80px #FF0000;
}
</style>