CRAZY」でwebフォントを表示する。ガジェレポ!スマートフォン用の表示で見るガジェレポ!京都在住の中年サラリーマンブロガー。Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。CRAZY」でwebフォントを表示する。絶賛連休ボケ中の@gadgerepoです。なく「はてなブログ」で運用しております。Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。Webサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。MSゴシックやメイリオ、ヒラギノ角ゴシックではなく、好みのフォントで表示させる技術」ということになります。ブログ中の全ての表示をwebフォントにしてしまうと読み込みが遅くなってしまいそうなので、今回は記事のタイトルを日本語のwebフォントで表示することにしました。いつものように、自分への備忘録を兼ねて解説いたします。一般的にフォントデータには著作権および使用ライセンスがあります。webフォントはサーバー上にフォントデータをアップするため、誰でもデータをダウンロードできてしまう関係上、市販フォントやパソコンにインストールされているフォントをwebフォントとして使用することはできません。webフォントとして使用するためには、フォントの再配布またはwebフォントとしての使用・ファイル形式の変換やサブセット化(文字の抜き出し)が許諾されている必要があります。商用での使用にも、その許諾が必要となりますのでフォントのライセンスをよく確認しておかなければなりません。再配布”で検索するといくつものフォント、まとめサイトがヒットします。今回はコチラの「りいてがきN」を使用させていただきます。Type)が利用されています。Font)フォントからwoffファイル、eotファイルを作成できる「WOFFコンバータ」というアプリを使用し、webフォントファイルを用意します。起動し、「変換前ファイル」にwebフォント化するフォントデータを選択します。「フォントをWOFFに変換する時」の項目の「EOTファイルを作成する」にチェックを入れ、「変換開始」ボタンを押します。「変換後ファイル」で特に指定していなければ、元ファイルと同じ場所に新しくwoffファイル、eotファイルができているはずです。フォントデータのアップロード自ブログのサーバー上に「font」ディレクトリをつくり、そこに先ほど変換したttfあるいはotfファイル、woffファイル、eotファイルをアップロードします。筆者は子テーマのディレクトリ内にfontディレクトリを作成しました。続いて子テーマのスタイルシートを追記・編集します。PC用の「style.css」、モバイル用の「smart.css」の最後に以下を追記します。Font)の場合です。(TrueType)の時は以下になります。'◯◯◯◯◯';}そして、記事タイトル(h1)の表示フォントにwebフォントを指定します。30px;最後にモバイル用の「smart.css」も編集します。20px;}とします。ブラウザで表示してご確認ください。まとめいかがでしょうか?webフォント化することで、自サイト・ブログデザインの自由度が格段に上がりました。他サイトとの差別化を図る上でも有用なのではないでしょうか。»ABOUT京都在住の中年サラリーマンブロガー。Mac,iPhone,Gameなど興味をもったGadget情報をなんでもレポート。ブログサークルブログにフォーカスしたコミュニティーサービス(SNS)。LINKNEW山登り初心者が、ほぼ初めての登山でオフラインでも使える地図アプリ『YAMAP』に助けられた話。スタンド』を買ってみた。【筋トレ経過報告】5ヶ月めに突入し、試行錯誤しています。活用術】素晴らしいアイデアを忘れないために!すばやく記録できるメモアプリ。タイムセール祭り】今回は安値に流されず、必要なものだけを購入。コレクション』!2月の提供コンテンツ公開。SHIGA』に行ってきた。ON』を今さら使ってみる。活用術】素晴らしいアイデアを忘れないために!すばやく記録できるメモアプリ。レトロな雰囲気!スマホでドット絵アイコンをつくってみる。子どもとiPadを共用する前にやっておくべき『3つの設定事項』。Watch』に普通の時計用交換ベルトを着けてみた。LINKMAILスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。