nuxt webfontloaderダウンロード-Nuxt nuxt webfontloaderソースコードダウンロード

nuxt webfontloader

フォントのダウンロード

1.0.0

ダウンロード

nuxt webfontloader-効率的なWebフォントの読み込みはかつてないほど簡単になりました！

ノートをリリースします

特徴

コンポーネントとしてのSVGの完全なサポート。 Vue SFCSのようにそれらをインポートします
Googleの/TypeKitのWebFontLoaderの上に構築されています
Webフォントを非同期にロードすることにより、サイトのパフォーマンスを向上させます
Nuxt 2（およびNuxt 2のみ）サポート
完全にテストされました！

設定

YARNまたはNPMを使用してプロジェクトに依存関係としてnuxt-webfontloaderを追加する
nuxt.config.jsのmodulesセクションにnuxt-webfontloaderを追加します

 {
  modules : [
    'nuxt-webfontloader' ,
  ] ,
}

nuxt.config.jsにwebfontloaderオプションを含めます。

 export default {
  webfontloader : {
    google : {
      families : [ 'Lato:400,700' ] //Loads Lato font with weights 400 and 700
    }
  } ,
}

アプリテンプレートまたはnuxt.config.jsヘッドパーツから古いスタイルシートを削除します。

 export default {
  head : {
    link : [
      // You don't need that line anymore!
      { rel : 'stylesheet' , href : 'https://fonts.googleapis.com/css?family=Lato:400,700' }
    ]
  }
}

フォントディスプレイオプションを備えたGoogleフォントを追加します

フォントディスプレイオプションを備えたGoggleフォントを使用する場合は、これが可能です。

しかし、1つのフォントファミリまたは複数のみを追加したい場合、小さな違いがあります。

ここに、フォントディスプレイオプションを使用して1つのフォントファミリを追加する例があります。

 export default {
  webfontloader : {
    google : {
      // Loads Open Sans font with weights 300 and 400 + display font as swap
      families : [ 'Open+Sans:300,400,600&display=swap' ]
    }
  } ,
}

ここに、フォントディスプレイオプションを備えたフォントファミリを追加する例：

 export default {
  webfontloader : {
      // add Google Fonts as "custom" | workaround required
      custom : {
          families : [
              'Open Sans:n3,n4' ,
              'Roboto:n3,n7'
          ] ,
          urls : [
              // for each Google Fonts add url + options you want
              // here add font-display option
              'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap' ,
              'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
          ]
      }
  } ,
}