WebサイトでGoogleのRobotoフォントを使用するにはどうすればよいですか？

164

私のウェブサイトでGoogleのRobotoフォントを使用したいのですが、このチュートリアルに従っています：

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

次のようなフォルダ構造のファイルをダウンロードしました。

ここに画像の説明を入力してください

今私は3つの質問があります：

  1. 私のmedia/css/main.cssURLにCSSがあります。それで、そのフォルダをどこに置く必要がありますか？
  2. すべてのサブフォルダーからすべてのeot、svgなどを抽出してフォルダーに入れる必要がありfontsますか？
  3. cssファイルfonts.cssを作成し、ベーステンプレートファイルに含める必要がありますか？

彼がこれを使用する例

@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'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

次のようなdir構造が必要な場合、私のURLはどのように見えるべきですか？

/media/fonts/roboto

html  css  fonts 
— user26
ソース

回答:

258

実際にこれを行う必要はありません。

  • Googleのウェブフォントページに移動
  • 検索する Roboto右上にある検索ボックスに
  • 使用するフォントのバリエーションを選択します
  • 上部にある[このフォントを選択]をクリックして、必要な太さと文字セットを選択します。

ページには<link>、ページに含める要素とサンプルのリストが表示されますfont-family、CSSで使用するルールのれます。

この方法でGoogleのフォントを使用すると、可用性が保証され、独自のサーバーの帯域幅が減少します。

— スニル・ガルグ
ソース
それをありがとう、それは完璧でした。あなたはグーグルプレイストアで彼らのプレイリストfoontsのためにグーグルが使用する設定を知っていますか？まさにそのようなスタイルが欲しいです。また、リンクやリンクのコードスニペットも見つかりませんでした。フォントは表示されますがコードはありません
— user26
3
クールなことですが、それらはLESSファイルにも@importを提供します！ただし、インターネット接続またはGoogle接続の問題がない場合のテスト（例：中国）=フォントなし... Roboto Black（Roboto Bk）がないことにも気づきましたfont-family。実際には3つのフォントファミリ（Roboto、Roboto CondensedおよびRoboto Slab）と他のすべてのRobotoバリアントはfont-style、font-weightCSSの変更によって作成されます。したがって、理想的には、Googleを配置した後<link>、フォントが実際に存在するかどうかを確認します。そうでない場合は、独自のものを使用してください（1つのフォントファミリーからすべてのファイルを読み込む場合、通常は0.5MBを超えません）。
— アームフット2013
7
@ user26 <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>これは、1つのfont-familyのみからすべてのスタイルをロードします：Roboto。ただし、Google Fontsにないフォントファミリー（Roboto Blackなど）が必要な場合は、フォルダー上のファイルが必要であり、質問で示したサンプルコードをmain.cssにコピーします（このように、@font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.または私の答え）。
— アームフット2013
14
-1 Using Google's fonts this way guaranties availability。「可用性を保証する」ものはなく、Googleフォントははるかに少ない。私はたまたまGoogleのCDNを使用すると大量のWebサイトが正しくロードされない、またはまったくロードされない10億人以上の人々の1人です。私は誰に何をすべきかを言っているわけではありませんが、GoogleのCDNが完璧なソリューションであるとは思いません。
— Nateowami 16
1
-1。@Nateowamiが述べたように、あなたはGoogleのサーバーに依存しています（これは特定の国ではブロックされる可能性があります）。プライバシーに悪影響を及ぼし、実際にCDNでフォントをホストするとパフォーマンスが向上する可能性があります。もっと大変ですが、それはあなたの仕事ですよね？
— RobinMétral19年
70

ページでライセンスされたWebフォントを使用するには、2つの方法があります。

  1. Typekit、Fonts.com、Fontdeckなどのフォントホスティングサービスは、デザイナーが購入したフォントを管理し、フォントを提供するダイナミックCSSまたはJavaScriptファイルへのリンクを生成するための簡単なインターフェイスを提供します。Googleはこのサービスも無料で提供しています（ここに、リクエストしたRobotoフォントの例を示します）。Typekitは、フォントがブラウザ全体で同じピクセルを占めるようにするための追加のフォントヒントを提供する唯一のサービスです。

    GoogleやTypekitで使用されているようなJSフォントローダー（WebFontローダーなど）は、CSSクラスとコールバックを提供して、発生する可能性のあるFOUT、またはフォントのダウンロード時の応答タイムアウトの管理に役立ちます。

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. DIYのアプローチでは、Webで使用するためにフォントのライセンスを取得し、（オプションで）FontSquirrelのジェネレーター（または一部のソフトウェア）などのツールを使用してファイルサイズを最適化します。次に、標準のクロスブラウザ実装@font-face CSSプロパティの使用して、フォントを有効にします。

    この方法では、含める文字をより細かく制御できるため、ファイルサイズを指定できるため、ロードパフォーマンスが向上します。

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

短い話：

@ font-face宣言とともにフォントホスティングサービスを使用すると、全体的なパフォーマンス、互換性、および可用性に関して最良の出力が得られます。

出典：https : //www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

更新

Roboto：Googleの署名フォントがオープンソースになりました

ここにある指示を使用してRobotoフォントを手動で生成できます。

— アシェシュ・クマール・シン
ソース
17

古いポスト、私は知っています。

これはCSS を使用しても可能@import urlです。

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
— しっかりとした
ソース
8
あなたのソリューションは、パフォーマンスのアンチパターンです。マークアップでリンクタグを使用すると、@ importに比べてGoogleのCSSファイルのダウンロードが早くなります。ブラウザは、一般に、特にプリローダーにより、リソース参照を早期に発見するだけです（HTMLの解析中と最初にHTMLを解析してから、CSSファイルを検出してからダウンロードし、次に@importを解析して検出します）。インポートしたスタイルシートをダウンロードします）。
— Radko Dinev 2016年
3
必ずしも。Webpackとプラグインを使用して、これはすべてディストリビューションビルドに埋め込まれます。
— Spock 2017
5

srcあなたがそれらのすべてを置くため、場合、フォントファイルを直接参照/media/fonts/robotoしますが、このようなあなたのmain.cssでそれらを参照する必要があります。 src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..あなたが参照していることを意味している、フォルダを1つ上がるmediaのmain.cssが入っている場合は、フォルダ/media/cssのフォルダ。

../fonts/roboto/CSSのすべてのURL参照で使用する必要があります（ファイルがのようなサブディレクトリではなく、このフォルダーにあることを確認してくださいroboto_black_macroman）。

基本的に（あなたの質問に答える）：

media / css / main.cssのURLにCSSがあります。だから私はそのフォルダをどこに置く必要がありますか

そのままでもかまいませんが、必ず使用してください src: url('../fonts/roboto/

すべてのサブフォルダーからすべてのeot、svgなどを抽出してfontsフォルダーに入れる必要がありますか

これらのファイルを直接参照する場合（CSSコードにサブディレクトリを配置せずに）、はい。

CSSファイルfonts.cssを作成し、ベーステンプレートファイルに含める必要がありますか

必ずしもそうとは限りませんが、main.cssにそのコードを含めることができます。ただし、カスタマイズしたCSSからフォントを分離することをお勧めします。

使用するフォントLESS / CSSファイルの例を次に示します。

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

（この例ではttfのみを使用@import "fonts";しています）次に、main.lessファイルで使用します（CSSプリプロセッサは少ないため、このようなことが少し簡単になります）

— アームフット
ソース
2

これは、CDNを使用せずに静的展開に必要なwoff2ファイルを取得するために行ったものです

一時的にcssのcdnを追加してrobotoフォントをindex.htmlにロードし、ページをロードします。Google開発ツールからソースを確認してfonts.googleapis.comノードを展開し、css？family = Roboto：300,400,500＆display = swapファイルのコンテンツを表示して、コンテンツをコピーします。このコンテンツをアセットディレクトリのcssファイルに配置します。

cssファイルで、ギリシャ語、アクリル、ベトナム語のものをすべて削除します。

このcssファイルの次のような行を見てください。

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

リンクアドレスをコピーしてブラウザに貼り付けると、フォントがダウンロードされます。このフォントをアセットフォルダーに入れ、こことcssファイルで名前を変更します。これを他のリンクに行います。6つの一意のwoff2ファイルがありました。

素材アイコンについても同じ手順を踏みました。

次に戻って、cdnを呼び出す行にコメントを付け、代わりに、作成した新しいcssファイルを使用します。

— ヘルツゲート
ソース
1

これを試して

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
— リード開発者
ソース
1

CSSスタイルシートのフォントタイプ名の前に/ fonts /または/ font /を使用します。私はこのエラーに直面していますが、その後はうまくいきます。

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
— モハメッド・ジャベド
ソース
1

ウェブサイトでは、以下のように「Roboto」フォントを使用できます。

別のcssファイルを作成した場合は、cssファイルの最上部に次の行を追加します。

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

または、別のファイルを作成したくない場合は、その間に上記の行を追加します<style>...</style>。

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

次に：

html, body {
    font-family: 'Roboto', sans-serif;
}
— ミスターノーバディ
ソース
0

そのzipファイルにあるHow_To_Use_Webfonts.htmlを読みましたか？

それを読んだ後、各フォントサブフォルダーには既に作成された.cssがあり、これを含めることで使用できるようです。

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— バリーコールバンクジュニア
ソース
0

それは簡単です

ダウンロードしたフォルダのすべてのフォルダに異なる種類のrobotoフォントが含まれています。つまり、それらは異なるフォントです

例：「roboto_regular_macroman」

それらのいずれかを使用するには：

1-使用したいフォントのフォルダを抽出します

2- cssファイルの近くにアップロードします

3-今それをCSSファイルに含めます

「roboto_regular_macroman」と呼ばれるフォントを含める例：

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

ファイルのパスに注意してください。ここでは、cssと同じフォルダーに「roboto_regular_macroman」というフォルダーをアップロードしました

その後、次のように入力するだけでフォントを使用できます font-family: 'Roboto';

— オマールムスタファ
ソース
0

それは実際には非常に簡単です。GoogleのWebサイトにあるフォントに移動し、そのフォントを含めたいすべてのページの先頭にそのリンクを追加します。

0

1時間を費やし、フォントの問題を修正しました。

関連回答-以下はReact.jsウェブサイト用です：

  1. npmモジュールをインストールします。

    npm install --save typeface-roboto-mono


  2. 以下のいずれかを使用する.jsファイルにインポートします。

    import "typeface-roboto-mono"; //インポートがサポートされている場合//インポートがサポートされて
    require('typeface-roboto-mono') いない場合

  3. 要素には、次のいずれかを使用でき
    ます。

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

お役に立てば幸いです。

— マノハールレディポーレディ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.