Download do nuxt webfontloader - nuxt webfontloader do download do código fonte

nuxt webfontloader

Baixar fonte

1.0.0

Baixar

NUXT WebFontLoader - O carregamento eficiente da fonte da Web nunca foi tão fácil!

Notas de liberação

Características

Suporte total dos SVGs como componentes. Importe -os como seus sfcs vue
Construído em cima do webfontloader do Google/Typekit
Melhora o desempenho do site carregando-se de forma assíncrona
NUXT 2 (e apenas o NUXT 2) Suporte
Totalmente testado!

Configurar

Adicione nuxt-webfontloader como uma dependência usando fios ou npm ao seu projeto
Adicione nuxt-webfontloader à seção modules de nuxt.config.js

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

Inclua suas opções WebFontLoader no nuxt.config.js , por exemplo:

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

Remova as folhas de estilo antigas do seu modelo de aplicativo ou nuxt.config.js Head Part:

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

Adicionando fontes do Google com a opção de exibição de fontes

Se você gosta de usar fontes de óculos com a opção de exibição de fontes, isso é possível.

Mas há uma pequena diferença se você deseja adicionar apenas uma família de fontes ou mais de uma .

Aqui é um exemplo para adicionar uma família de fontes com opção de exibição de fontes:

 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' ]
    }
  } ,
}

Aqui é um exemplo para adicionar mais famílias de fontes com opção de exibição de fontes:

 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'
          ]
      }
  } ,
}