2023.2.3開発フロントエンドAdobeFontsフォントWebフォントXDIllustratorPhotoshopCSS開発なしょあとで読むデザインにおいて非常に重要な「フォント」ですが、フォントメーカーが出しているものは高額だったり、フリーフォントは商用利用に制限があったり、なかなか手が出ない方は多いのではないでしょうか。Fontsを紹介します。IDをお持ちの方は無料で使用することができますので、この記事で使い方を学んでいただき、是非活用してみてください!はじめまして、イッパイアッテナです。ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。Fontsとは、Adobeが提供するwebフォントサービスです。Cloudを契約している方は追加料金なしで使用することができます。モリサワやフォントワークスといった日本を代表するフォントメーカーを含む世界中のフォントが20,000以上収録されていて、日本語対応フォントも500以上収録されています。随時アップデートもしているので新たにフォントが収録されることもあります。webサイトでフォントを表示するためのソースコードも用意されており、webデザインで使用することもできます。Fontsのサイトからインストールする方法とIllustratorから直接インストールする方法があります。Fontsにアクセスします。STEP好きなフォントを検索するトップページでは画面中央の検索窓からフォント名やフォントメーカーを入力して検索します。フォントの検索画面もあり、この場合だと右上の検索窓にフォント名などを入れて検索することももちろんできますが、左側のフィルターを使って新しいフォントを見つけるのもお勧めです。STEPフォントを選ぶフォントが見つかったら「ファミリーを表示」をクリックします。STEPフォントをアクティベートするファミリーを表示すると、下画像のような画面になります。右上の「〇〇個のフォントをアクティベート」横のスイッチをONにします(ON状態は青になります)。下画像のような表示が出たら、アクティベート完了です。PCにフォントがインストールされました。Illustratorから直接インストールするSTEPアプリケーションでテキスト入力する今回はIllustratorを使って解説します。テキストを入力するところまで進めてください。※テキスト入力までの手順は割愛します。STEPフォントのプルダウンメニューを開くフォント名が記載されているプルダウンメニューを開きます。ここにはPCにインストールされているフォントが一覧で表示されます。STEP「さらに検索」をクリッククリックすると一時的に「初期化しています」というメッセージが表示されますが、少し待つとフォント一覧が表示されます。Fontsで提供されているすべてのフォントが表示されます。STEP好きなフォントを探すフォントの属性(セリフ・サンセリフなど、細字・太字など)でフィルターをかけたり、お気に入り機能を使ってフォントをマーキングしておくこともできます。使ったことのあるフォントであれば、履歴やインストール済みでフィルターをかけることもできます。フォント名で検索することができないので、名前順で並んでいるフォントの中から探す必要があります。STEPフォントをアクティベートするフォント名の右側にある雲マークをクリックするとアクティベートされます。雲マークにチェックが付いたらアクティベート完了です。(少し時間がかかります)アイコンについてフォント隣の雲マークによってフォントがPCにインストールされているかなどの状態がわかるようになっています。Fontsのサイトへショートカットできるので、サイトからフォントをアクティベートします。XDの場合XDからフォントをアクティベートすることはできません。Fontsのサイトからアクティベートする必要があります。Fontsに収録されているフォントであれば自動的にアクティベートされます。FontsはHTMLにタグを貼るだけで、任意のフォントをwebサイトで表示させることができます。Fonts内で自動生成することができます。STEPフォントを選ぶここは先述しているので割愛します。STEP「webプロジェクトに追加」を選択するSTEP任意のプロジェクト名をつける複数のフォントをwebサイトに追加すためのフォルダ名と思って名前をつけてください。別のプロジェクトがある場合は、プルダウンメニューから選択します。STEP欲しいフォントファミリーを選択して作成をクリックするSTEP表示された<link>タグを<head>タグ内にコピペするHTMLファイル内のCSSを読み込ませるタグがあるあたりに生成された<link>タグをコピペします。STEPCSSでフォントを指定する追加されたフォント以降に各ウェイト毎にCSSが用意されているので、CSSファイルにコピペします。IDを持っている必要があります。IDは作れますが、使えるフォントに制限があります。そのため使用するフォントによってはクライアントも有料プランに加入している必要があります。IDやプランの加入状況を事前に確認しておくことをお勧めします。Fontsのフォントを使用したい場合は、画像として書き出して使用することをお勧めします。Fontsを紹介しました。フォントメーカーが出しているフォントはカッコいいけど高額で手が出せなかったり、webで使えるフォントを探していた方には一つの選択肢になるのではないでしょうか。Fontsをのぞいてみてください!この記事を書いた人なしょ野球とカメラとスノボとゲームと...好きなものが多くて困ってます。新しい世界へのお誘いもお待ちしています!よかったらシェアしてね!URLをコピーしました!URLをコピーしました!Web制作について相談してみませんか?必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。Reserved.あとで読む「あとで読む」機能を使用するには、ログインをしてください。(21)用語集データのダウンロードデータをダウンロードするにはログインをしてください。ログイン会員登録ページを表示できません。このサイトは、最新のブラウザでご覧ください。