Vue cli и vuetify, как использовать с локальным шрифтом Roboto

У меня есть разрабатываемое приложение Vue / Vuetify, созданное с помощью VUE CLI 3.x, и я хотел бы использовать шрифт Roboto локально, а не через Google CDN.

Кто-нибудь достиг этого через webpack и проект vuetify, сгенерированный vue cli, и если да, то как ты это сделал?

Источник

1 ответ

Решение

Первая установка пакета typeface-roboto в ваш проект.

Затем импортируйте его в ваш main.js/index.js/boot.js или что-то еще:

import 'typeface-roboto/index.css';

Наконец, обновите свой webpack.config.js разрешить использование типов файлов шрифтов в правилах модуля, т.е.

    module: {
        rules: [
            //other stuff
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
        ]
    },

Типы файлов шрифтов woff, woff2, eot а также ttf,

Источник

С Vue CLI 3 + Vuetify:

  • установить шрифт-roboto

    npm install --save typeface-roboto

  • в public/index.html, удалять

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">

  • в src/App.vue, Добавить

    <style lang="sass">
  @import '../node_modules/typeface-roboto/index.css'
</style>
Источник
Другие вопросы по тегам