生徒プロのデザインって感じがするフォントを探しています
先生Abobe Creative Cloudのライセンスを持っているならAdobe Fontsがおすすめです。
WEBサイトを作成する時は、場所や雰囲気に合ったフォントを使う必要があります。
この記事では、Adobe Creative Cloudのライセンスを持っていれば無料で使用できる Adobe Fonts をAdobe FontsをWordPressで使用する方法を説明します
Adobe Fonts にはデザインが優れたフォントが多い
WEBサイトで使うフォントは、Google Fontsなど無料で商用利用可のフォントを使うことも多いですが、特に日本語フォントだとデザイン性の高いフォントが限られてきます。
Adobe Fontsにはデザインが優れたフォントが数多くあるのが一番の魅力だと思います。
Adobe Fonts のメリットとデメリット
Adobe Fontsで使用したいフォントを探す
Adobe Fonts のサイトにアクセスして「すべてのフォントを参照」をクリックします。
使用したいフォントを探します。
- 「サンプルテキスト」にフォントを使用文字列を入力します。（実際に使用する文字に変えた方が見やすいです。）
- 画面左側で検索するフォントの条件を設定します。条件を変えるごとに自動で該当するフォントが表示されます。
- 検索で見つかったフォントの表示例を見て、気に入ったフォントをクリックして選択します。
選択したフォントが表示されるので、Webサイトに使用できるようにします。
- 「すべてのフォントがアクティブ」を ON にします。
- 「</> Web プロジェクトに追加」 をクリックします。
使用するフォントを含んだWeb プロジェクトを作成します。プロジェクト名を入力して「作成」を押します。
既にWebプロジェクトがある場合、ドロップダウンリストを開いて新たに作成、または既存のWebプロジェクトを選択します。
フォントを追加したWebプロジェクトの以下の情報が表示されます。
- 上は、Webサイトに埋め込みフォントが使用できるようにするコード
- 下は、CSSで使用する箇所に設定するコード
これらの値は、次のWordPressの設定で使いますので、メモしておくか、この画面を開いたままにしておきます。（もちろん後から再度開いて見ることもできます。）
WordPress でAdobe Fontsを使用する
WordPressの管理画面の「外観」ー「テーマファイルエディター」を選択します。
右側の「テーマファイル」リストで「テーマヘッダー」を選択して、表示されたコードの <head> タグ内に、Adobe FontsのWebプロジェクトの <script> タグのコードを貼り付けて、一番下の「ファイルを更新」ボタンを押します。
今度は、WordPressの管理画面から「外観」ー「カスタマイズ」を選択します。
「追加CSS」を選択して、フォントを設定したい要素を入力して、Adobe Fonts の「Webプロジェクト」のCSSを入力して「公開」ボタンを押します。（画像ではタイトル文字 site-titleクラス に設定しています。）
以上で設定は完了です。