Windows、Mac、LinuxにGoogle Robotoフォントをインストールする方法

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法の特集画像

Robotoフォントは、Googleが作成したサンセリフ書体です。エレガントで、高解像度の画面（Androidフォンなど）でうまく表示されます。そのため、多くのアプリケーションに最適です。さらに、Windows、macOS、LinuxにGoogle Robotoフォントをインストールする方法は非常に簡単です。

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

プラットフォームに関係なく、最初にRobotoフォントパックをダウンロードする必要があります。これを行うには、Robotoフォントサイトにアクセスしてください。フォントファミリー全体をダウンロードする最も簡単な方法は、右上の「ファミリーをダウンロード」ボタンをクリックすることです。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のダウンロードRoboto

これにより、コンピュータにZIPファイルが保存され、その時点でオペレーティングシステムにインストールできるようになります。

フォントがピクセル化されたり、何らかの形で破損して表示される場合は、問題を修正するためのトラブルシューティング手順を試してください。

素晴らしいニュースは、プラットフォームに関係なく、数回のクリックでRobotoフォントをインストールできることです。

WindowsにGoogle Robotoフォントをインストール

WindowsにRobotoフォントをインストールするには、以下の手順に従ってください：

RobotoフォントフォルダーのZIPを解凍します。右クリックして「すべて展開」を選択します。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のWindowsの解凍

「スタート」メニューを開き、「設定」を選択します。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のWindows設定

「個人設定」をクリックし、右側の設定リストから「フォント」を選択します。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のWindowsフォント

解凍したフォントをインストーラーウィンドウにドラッグします。数秒後、Google RobotoフォントがWindowsにインストールされます。アプリケーション内で他のフォントと同様に選択できます。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のドラッグしてインストール

他の種類のフォントをインストールするか、Windowsで利用可能なフォントを確認するには、Windowsでのフォントのインストールと管理に関するガイドを参照してください。

macOSにGoogle Robotoフォントをインストール

MacにRobotoフォントをインストールするには、以下の手順に従ってください：

ZIPファイルを解凍します。ダブルクリックするか、右クリックして「開く」を選択します。
フォルダー内のすべてのフォントを選択します（LICENSE.txtはスキップ）、右クリックしてコンテキストメニューから「Font Bookで開く」を選択します。

Font Bookでフォントを開く。

これにより、Font Bookに読み込まれ、アプリケーションで使用できるようになります。

個々のフォントファイルをダブルクリックしてFont Bookに読み込むこともできます。

LinuxにGoogle Robotoフォントをインストール

unzipコマンドで圧縮ファイルを解凍します。
ホームフォルダーを開き、隠しファイル/フォルダーを表示するオプションを有効にします。Ctrl + Hを押すか、「表示」メニューをクリックして「隠しファイルを表示」を選択できます。
「.fonts」フォルダーを見つけます。存在しない場合は作成します。
Robotoフォントフォルダーをこの「.fonts」フォルダーに移動します。

または、Font Managerプログラムを使用してフォントを管理します。

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

Font Managerアプリをインストール中。

インストールが完了したら、これを開き、Fontsアプリも開きます（再度、検索バーから）。

Debian Fontsアプリを開く。

Font Manager内で、管理タブにいることを確認し、プラス（+）アイコンをクリックします。

Debianでフォントを追加中。

解凍したフォントフォルダーに移動し、必要に応じて追加します。

使用しているアプリを再起動すると、Robotoフォントが表示されるはずです。

LinuxではRobotoに問題が発生することはないはずですが、Ubuntuなどの一部のディストリビューションでは特定のフォントを認識するのに問題がある場合があります。UbuntuでRobotoや他のフォントに問題がある場合は、TrueTypeフォント形式に変換してみてください。

ウェブサイトでGoogle Robotoフォントを使用

ウェブサイトでRobotoフォントを使用したい場合は、CSS3 @font-face構文を使用して外部フォントをウェブページに埋め込みます。

FontSquirrelのRobotoフォントページに移動し、「Webfont Kit」をクリックし、好みのフォント形式、サブセット（あれば）を選択し、「@Font-Face Kitをダウンロード」をクリックします。

Windows、Mac、LinuxにGoogle Robotフォントをインストールする方法のFont Squirrelからのダウンロード

ZIPファイルをウェブサイトのフォントフォルダーに解凍します。ウェブスタイルシートを開き、以下のコードを追加します：

@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'),  
src: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'),  
src: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'),  
src: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'),  
src:url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');  
font-weight:300;  
font-style:italic;  
}