web-dev-qa-db-ja.com

googleフォント+ webpack

Webpack 2.2は初めてです。私のプロジェクトにGoogleフォントを統合する最良の方法を知りたいです。

Webpack HTMLプラグインを使用して、テンプレートからindex.htmlを生成しています。したがって、現時点では、GoogleフォントCSSを<script>タグに直接ハードコーディングしましたが、webpackをまったく使用していないため、この「ソリューション」はあまり好きではありません。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
  <body>
    <div id='app'/>
  </body>
</html>
webpack-2google-webfonts
12
mguijarr

SASSを使用する必要はありません。 _css-loader_（CSSを使用している場合）または_sass-loader_（SASSを使用している場合）を使用する必要があります。 SASSを使用している場合は、両方のローダーが必要です。

両方のローダーはurl()ステートメントをパックします。ただし、両方ともURLが相対URLの場合にのみ機能します（おそらく、現在の回答が機能していないようです）。

つまり、フォントをダウンロードする必要があります。問題をより複雑にするために、各フォントは複数の形式で利用可能であり、すべてのブラウザをサポートする場合はすべての形式が必要です。幸いなことに、私たちを助ける素晴らしいウェブサイトがあります： google-webfonts-helper 。

そのWebサイトに希望のフォントを入力すると、次のようなCSSルールが生成されます。

_/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
_

このCSSルールはurl()を介してインポートされ、URLは相対的です。これは、_css-loader_がアプリケーションにそれをパックすることを意味します。ただし、これらのURLが参照するすべてのファイルもダウンロードする必要があります。幸いなことに、上記の_google-webfonts-helper_ Webサイトでは、そのためのダウンロードリンクを提供しています。それらのフォントをダウンロードして、_../fonts_（または任意のディレクトリ。私は個人的に_./assets/fonts_を使用します。_google-webfonts-helper_ツールには、カスタムディレクトリがある場合に使用できる入力があります）

ボーナス：マテリアルアイコンフォント

通常、Googleの素材アイコンはフォントとしてWebサイトに公開されます。ただし、それらを機能させるには特別なCSSが必要です。マテリアルアイコンフォントをパックする場合は、次のフォントフェースが必要です。

_@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('../fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
    url('../fonts/MaterialIcons-Regular.woff') format('woff'),
    url('../fonts/MaterialIcons-Regular.ttf') format('truetype'),
    url('../fonts/MaterialIcons-Regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}
_

フォントファイルは here からダウンロードできます（抽出されたZipのiconfontディレクトリを探します。

さらにフォントフェースルールの後に次のCSSを追加する必要があります。

_.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  Word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
_

注：マテリアルアイコンフォントの使用手順は、これらの手順が古くなった場合の here に基づいています。

17
Pace

Sassファイル内に直接インポートし、webpack configにsass-loaderがあります。さらに質問がある場合はお知らせください

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");

@mixin h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 52px;
    line-height: 62px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    margin-bottom: 40px;
}

Sassをロードするためのサンプルwebpack構成は次のとおりです：（ https://github.com/webpack-contrib/sass-loader から取得）

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};
10
Vishal Malik