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

Robotoフォントは、Google によって作成されたサンセリフ スタイルの書体です。このフォントは、Android 4.0 (Ice Cream Sandwich) のリリース初期から登場しており、Androidスマートフォンなどの高解像度画面での優雅さと視認性の良さが特徴です。

Roboto にはあらゆる種類の書体 (標準、太字、斜体、斜体、太字など) があり、主にシステム アプリとすべての Googleアプリで使用されます。

これらのフォント愛好家にとって朗報です。Google 開発者が Roboto フォントを無料でリリースし、制限なしで (Apache ソフトウェア ライセンスに基づいて) 使用できるということです。これで、 Windows、MAC、Linux、さらには Web サイトでも使用できるようになりました。

以下は、上記のすべてのオペレーティング システム プラットフォームに Google Roboto Font をインストールする方法です。

Google Robotoをダウンロード

使用しているオペレーティング システムに関係なく、まず最も重要なことは、Google Roboto フォント セットをデバイスにダウンロードすることです。

Roboto フォント サイトにアクセスし、フォント (圧縮ファイル) をダウンロードします。 「このフォントを選択」をクリックし、画面の下部にある「1 ファミリーが選択されました」と表示された暗いタブをクリックする必要があります。

新しく開いたタブで、「ダウンロード」アイコンをクリックして Roboto フォントをダウンロードします。フォント セットは zip ファイルとしてダウンロードされます。

ダウンロードしたzipファイルを任意のフォルダに解凍します。そのフォルダーを開くと、その中にあるすべての Roboto フォントが表示されます。

Windows 10 に Roboto フォントをインストールする

Roboto フォント フォルダーを開きます。すべてのフォントを選択し、右クリックして「インストール」を選択します。

この時点で、数分後にフォントがシステムに自動的にインストールされます。これで、デバイス上のアプリケーションで Roboto フォントを使用できるようになりました。

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

ホームフォルダーを開き、隠しファイル/フォルダーを有効にします。 「.fonts」フォルダーを見つけます。存在しない場合は、拡張子「.fonts」を持つ新しいフォルダーを作成します。次に、Roboto フォントを含むフォルダーを、作成した「.fonts」フォルダーに移動します。

次に、LibreOffice、GIMP、Photoshop、または使用しているアプリケーションを再起動します。 Roboto フォントが選択用に表示されます。

Roboto フォントを MAC にインストールする

MAC の場合、方法は Windows の場合と同様です。まずフォントを抽出し、ダブルクリックしてインストールすると、Roboto が Font Book に表示されます。あなたの。さらに、フォント ブックにドラッグ アンド ドロップすることもできます。

ウェブサイト用の Roboto フォントをインストールする

Web サイトで Roboto フォントを使用したい場合は、 CSS3 の「@font-face」構文を使用できます。 Webサイトに外部フォントを埋め込む方法です。

FontSquirrel Robotoフォント ページに移動し、「Webfont Kit」をクリックして、好みのフォント形式を選択し、「Download @Font-Face Kit」をクリックします。

ダウンロードしたファイルを Web サイトのフォント フォルダーに解凍します。次に、Web サイト上のスタイルシートを開き、次のコードを追加します。

@font-face { font-family : 'ロボット'; src: url('Roboto-レギュラー-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#Roboto Regular') format('svg');フォントの太さ: 通常;フォントスタイル: 通常; } @font-face { font-family : 'ロボット'; 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-face { font-family : 'ロボット'; 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-face { font-family : 'ロボット'; 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-face { font-family : 'ロボット'; 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');フォントの太さ: 200;フォントスタイル: 通常; } @font-face { font-family : 'ロボット'; 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 ソフトウェア ライセンスに基づく)。フォントの太さ: 200;フォントスタイル:斜体; } @font-face {フォントファミリー: 'ロボット'; 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');フォントの太さ: 100;フォントスタイル: 通常; } @font-face { font-family : 'ロボット'; 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');フォントの太さ: 100;フォントスタイル:斜体; } @font-face { font-family : 'ロボット'; 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');フォントの太さ: 300;フォントスタイル: 通常; } @font-face { font-family : 'ロボット'; 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');フォントの太さ: 300;フォントスタイル:斜体;

「src」をフォントフォルダーのパスに変更してください。

次に、次の構文を使用して Web サイトに Roboto フォントを表示します。

フォントファミリー:"ロボット";

気に入ったフォントをインストールしていただければ幸いです。

続きを見る：

• この Web サイトは、コンピュータにインストールされているすべてのフォントを管理するのに役立ちます
• 無料のフォントを見つけてダウンロードできる 5 つの Web サイト
• ベトナム語をサポートする巨大な無料フォント セットを Google からダウンロードする手順
• アプリケーションやウェブサイトで使用されているフォントを「認識」するための 8 つのツール