Je n'arrive pas à comprendre comment changer la police par défaut dans vuetify. J'ai cherché la bonne variable dans ./node_modules/vuetify, mais je ne la trouve pas.
Dans l'idéal, je ne ferais aucun changement dans le module, mais préférerais remplacer ces variables de l'extérieur du module.
Le moyen le plus simple serait simplement de définir la famille de polices sur body
. Si vous utilisez Webpack et importez l'entrée de stylet Vuetify, main.styl
, vous pouvez simplement écraser la variable $font-family
avec la police de votre choix.
J'ai remarqué que, du moins dans les versions récentes de Vuetify, vous devez spécifier à la fois $body-font-family
et $heading-font-family
pour changer les polices de Roboto en un autre dans vos remplacements (en suivant ces instructions ). La redéfinition de $headings
semble être nécessaire car elle est définie dans _variables.styl
et dépend de $heading-font-family
. Notez que Vuetify sera en train de passer à SCSS in 2.0, il y aura donc un nouveau processus à ce moment-là.
$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
subheading: { size: 16px, weight: 400 },
body-2: { size: 14px, weight: 500 },
body-1: { size: 14px, weight: 400 },
caption: { size: 12px, weight: 400 },
button: { size: 14px, weight: 500 }
}
Je ne peux pas garantir qu'il s'agisse d'une "meilleure pratique". Mais étant donné qu’il n’ya pas de documentation sur la manière de procéder, je vais vous dire comment j’ai accompli cela.
J'utilise le modèle Nuxt Webpack, ma structure de fichier peut donc être un peu différente de la vôtre, mais le concept est le même.
J'ai un dossier d'actifs statiques. Dans ce dossier, j'ai un fichier css global. J'ai téléchargé la police que j'utilisais sous forme de fichier et je l'ai également ajoutée à mon répertoire statique. Mais vous pouvez le dire à peu près n'importe où.
Voici le code que j'ai ajouté à mon fichier CSS global:
@font-face{
font-family: **any name you want to give the font**;
src: url(**location in directory**) format("opentype");
}
Ensuite, il vous suffit de l'ajouter à vos règles de style, comme vous le feriez normalement.
*{
font-family: **the same name you gave it above**;
}
h1{
font-family: **the same name you gave it above**;
}
ect ...
N'oubliez pas d'entrer le bon format. Si votre fichier est téléchargé au format .otf, il est de type opentype. Si c'est .ttf c'est vrai.
Je n'ai pas encore compris comment inclure une police de CDN. Si je découvre cela, je vous le ferai savoir.
Better way , Dans votre script app.vue, ajoutez
.application {
font-family: "Font Family Name";
}
Par exemple, si vous utilisez une police Google, votre balise de script doit ressembler à
<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");
.application {
font-family: "Questrial";
}
</style>