Windows・Mac・LinuxにGoogle Robotoフォントをインストールする方法【Webサイトでの使い方も解説】

Robotoフォントは、Googleが開発したサンセリフ(ゴシック体)タイプフェイスです。洗練されたデザインで、Androidスマートフォンなどの高解像度スクリーン上でも美しく表示されるため、幅広い用途に適しています。しかも、Windows、macOS、Linuxへのインストールは驚くほど簡単です。

本記事では、Google RobotoフォントをWindows、macOS、Linux、さらにはWebサイトに導入する方法を順番に解説していきます。それでは始めましょう!

Google Robotoフォントのダウンロード

プラットフォームに関わらず、まずはRobotoフォントパックをダウンロードする必要があります。Robotoフォントの公式サイトにアクセスし、「Download Family」ボタンをクリックすれば、フォントファミリー全体を一括でダウンロードできます。

ダウンロードファイルはZIP形式でPCに保存されます。あとはお使いのOS(オペレーティングシステム)にインストールするだけです。

Windows・Mac・LinuxへのRobotoフォントのインストール手順

嬉しいことに、どのプラットフォームでもクリック操作だけで数分のうちにインストールが完了します。

1. Windows 10の場合

Windowsでは、まずダウンロードしたRobotoフォントのフォルダを解凍します。続いて、スタートメニューから「設定」を開きましょう。

「個人用設定」をクリックし、左側のメニューから「フォント」を選択します。

次に、解凍したフォントファイルをフォント設定ウィンドウへドラッグ&ドロップします。数秒でGoogle RobotoフォントがWindowsにインストールされ、以降は他のフォントと同じように各アプリケーションから選択できるようになります。

2. macOSの場合

Macでは、まずZIPファイルを解凍し、フォルダ内のすべてのフォントファイルを選択します(LICENSE.txtは除く)。そのまま右クリックして、コンテキストメニューから「このアプリケーションで開く」→「Font Book」を選択しましょう。

これでフォントがFont Bookに読み込まれ、各アプリケーションで利用可能になります。

なお、個別のフォントファイルをダブルクリックすることでも、Font Bookに登録できます。

3. Linuxの場合

ホームフォルダを開き、隠しファイル・隠しフォルダを表示する設定を有効にします。「.fonts」フォルダを探してください。存在しない場合は新しく作成します。その後、Robotoフォントのフォルダをこの「.fonts」フォルダ内に移動すれば完了です。

あるいは、「Font Manager」というフォント管理ツールを利用する方法もあります。

1. ソフトウェアセンターまたはパッケージリポジトリからFont Managerをインストールします。

2. インストール後、Font ManagerとFontsアプリを開きます(検索バーから起動できます)。

3. Font Manager内で「Manage」タブが表示されていることを確認し、プラス(+)アイコンをクリックします。

4. 解凍済みのフォントフォルダへ移動し、必要なフォントを追加します。

使用中のアプリケーションを再起動すると、Robotoフォントが選択肢に表示されるはずです。

WebサイトでGoogle Robotoフォントを使う方法

WebサイトでRobotoフォントを使用したい場合は、CSS3の@font-face構文を使って外部フォントをページに埋め込むことができます。

FontSquirrelのRobotoフォントページにアクセスし、「Webfont Kit」をクリックします。希望のフォント形式やサブセット(該当する場合)を選択して、「Download @Font-Face Kit」をクリックしましょう。

ダウンロードしたZIPファイルを、Webサイトのフォントフォルダに解凍します。次にスタイルシートを開き、以下のコードを追加してください。

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); /* Apache Software License下で提供 */
    font-weight: 200;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}
 
@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

コード内の「src」部分が、実際のフォントフォルダへのパスを正しく指すように書き換えてください。

あとは、font-family:"Roboto";という構文を指定するだけで、Webページ上にRobotoフォントを表示できます。

まとめ

GoogleのRobotoフォントは、HelveticaやArialといった定番フォントに代わるスタイリッシュな選択肢です。GoogleのMaterial Designイニシアチブの中核を担うフォントでもあります。それでいて汎用性が高く、Windows、macOS、Linux、さらにはWebサイトへの導入も非常に手軽です。

もしRobotoが好みでない場合は、特定のWebサイトで使われているフォントを調べる方法を解説した記事も参考になるでしょう。あなたは普段、パソコンでRobotoフォントを使っていますか?使っているならどんな用途でしょうか?ぜひ下のコメント欄で教えてください!