【Webフォント】 Android の欧文デフォルトフォントとなっているRobotoを導入する！【使い方】

Androidのデフォルトフォントとしても知られる
「Roboto」というフォントですが、
こちらもオープンソースとなっているため、
無料でかつWebフォントとして使用することができます。

くせのない字体であるため、
使いやすい欧文フォントだと思います。

『Noto Sans Japanese』の導入方法はこちら！
【Webフォント】Noto Sans Japaneseの導入する！

うまくWebフォントが表示されない方はこちら！
【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

• 国内シェアNo.1の高速サーバーなのでストレスフリー！
• 自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！ またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！ またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

Robotoとは？

「Roboto」はgooleによって開発されたフォントの一つで、
OSの一つである、Androidのデフォルトフォントとして知られています。

字体にはあまり癖がなく使い勝手の良いと思います。
一方で癖がないため、あまり感動はないかもしれません。

なお「Roboto」は欧文のみとなっているため、
英語や数字等に適用されます。
そのため、日本語には適用されず、
日本語には日本語対応のフォントを設定することが必要となります。

Robotoを導入してみる

RobotoをWebフォントとして導入するのは簡単です。
これから記載するコードをコピペするだけで導入可能です。

まずはRobotoのデータを読み込ませるため、
header.phpにある、＜head＞～＜/head＞の間に、
以下のコードをコピペします。

<link href="https://fonts.googleapis.com/css?family=Roboto:400,900" rel="stylesheet">

なお、style.cssから読み込む方法もありますが、
読込スピードに大きな影響を与えるため、
推奨されていません。
style.cssから読み込む場合は、
以下のコードをstyle.cssにコピペしてください。

@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');

これが完了したら、
スタイルシートにおいて、
font-familyの設定をします。

サイト全体に設定する場合は、
以下の様なコードを追記します。

body{
	font-family:"Roboto","Noto Sans Japanese", sans-serif;
}

なお、Noto Sans Japaneseは例として記載しておりますが、
Noto Sans Japaneseである必要はありません。

ここには、日本語のフォントを記載しましょう。

またRobotoは欧文フォントで、
日本語には対応していないため、
必ず先頭に記載するようにしてください。

検索してもあまり出てこない

RobotoはAndroidなどでデフォルトフォントとして利用されていますが、
調べてもあまり情報が出てきません。

そのため、初心者向けとして簡単に導入できる方法を記事にしました。

RobotoはGoogleフォントの一つですが、
他にもGoogleフォントは何百もの種類があります。

どれも簡単に導入できるので、
お好みのフォントを探してみましょう

『Noto Sans Japanese』の導入方法はこちら！
【Webフォント】Noto Sans Japaneseの導入する！

うまくWebフォントが表示されない方はこちら！
【Webフォント】Webフォントがうまく適用されない場合の対処法【表示されない】