Vue Cli 3 Local fonts not loading - vue.js

When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to serif on #app. Fonts are not showing up in my dist folder anywhere.
I have tried adding loaders in vue.config.js, changing url paths, and moving the #font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js.
Font loading:
#font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot');
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
And use within App.vue:
<style lang="scss">
#app {
font-family: 'OpenSans-Regular', serif;
}
</style>
That styling is placed within my main.scss file. The file structure as follows:
src
assets
fonts
OpenSans-Regular.eot
OpenSans-Regular.woff
etc
styles
main.scss
App.vue
vue.config.js
vue.config.js file is as follows:
module.exports = {
publicPath: '/',
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `#import "#/styles/main.scss";`
}
}
},
configureWebpack: {
module: {
rules: [{
test: /\.(ttf|otf|eot|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
},
},
}]
}
}
}
I have also tried a chainWebpack in vue.config.js to no avail:
chainWebpack: config => {
config
.module
.rule("file")
.test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
.use("url-loader")
.loader("url-loader")
.options({
limit: 10000,
name: 'assets/fonts/[name].[ext]'
})
.end();
}

Did you try
#font-face {
font-family: 'OpenSans-Regular';
src: url('~#/assets/fonts/OpenSans-Regular.eot');
src: url('~#/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('~#/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
url('~#/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
url('~#/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
url('~#/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Works for me Vue CLI 3, no vue.config.js settings.
I'm loading my styles like this:
import Vue from 'vue';
import router from './router';
import store from './store';
// eslint-disable-next-line
import styles from './scss/app.scss';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
Not sure if that is good practice.

What I ended up doing was moving to a file loader method to get the fonts to package over and set the the public path.
vue.config.js
module.exports = {
assetsDir: 'assets/',
publicPath: '/', // Base directory for dev
css: {
sourceMap: true,
loaderOptions: {
sass: {
data: `#import "#/styles/main.scss";`
}
}
},
chainWebpack: config => {
config.module
.rule("fonts")
.test(/\.(ttf|otf|eot|woff|woff2)$/)
.use("file-loader")
.loader("file-loader")
.tap(options => {
options = {
// limit: 10000,
name: '/assets/fonts/[name].[ext]',
}
return options
})
.end()
}
};
File-loader doesn't see the files unless called in the js so I imported them in main.js The console log is to navigate around the linter flagging unused imports
// Fonts need to be called in js for webpack to see and copy over
import OpenSansReg from './assets/fonts/OpenSans-Regular.ttf';
import OpenSansLight from './assets/fonts/OpenSans-Light.ttf';
import OpenSansBold from './assets/fonts/OpenSans-Bold.ttf';
console.log(OpenSansReg, OpenSansBold, OpenSansLight);
then in one of my scss files
#font-face {
font-family: 'OpenSans-Regular';
src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/OpenSans-Regular.otf') format('opentype'),
url('/assets/fonts/OpenSans-Regular.woff') format('woff'),
url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'),
url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
font-weight: normal;
font-style: normal;
}

For me, I just took out that 'format()' thing and works... Finally..

I stuck my custom icon-font in the head tags of my initial index.html page Which also has a custom font import. The same page that you would stick your <div id="vue-app"></div>. All the other pages /components can use the font-family for me.
<head>
...
<link rel="stylesheet" href="icon-font/styles.css" />
</head>
But if i try any other location in the project it fails. and the Scss doesnt even compile.

This helped me
In src folder main.js just added:
import '../src/fonts/fonts.css'
in the font the following code:
#font-face {
font-family: 'Conv4240';
src: url('~#/fonts/Conv4240/4240.eot');
src: local('☺'),
url('~#/fonts/Conv4240/4240.woff') format('woff'),
url('~#/fonts/Conv4240/4240.ttf') format('truetype'),
url('~#/fonts/Conv4240/4240.otf') format('opentype'),
url('~#/fonts/Conv4240/4240.svg') format('svg');
font-weight: normal;
font-style: normal;
}
And everything started to work

Related

Sass global variables and mixins not working

I've set up a project using Vue 3.2.33 and Vite 2.9.5
When I try to access any global variable or mixin from within any vue component, I get an undefined error. This problem doesn't occur in scss files.
The import itself seems working correctly because any css rules in it are working.
vite.config.ts:
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '#use "#/styles/variables";',
},
},
},
});
src/styles/_variables.scss:
// breakpoints
$breakpoints: (
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
);
#mixin test {
border: 3px solid red;
}
Example use:
<style scoped lang="scss">
#use 'sass:map';
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
#include test; // <- undefined
&--fluid {
max-width: 100%;
width: 100%;
}
}
$widths: (
'sm': 540px,
'md': 720px,
'lg': 960px,
'xl': 1140px,
'xxl': 1320px,
);
#each $breakpoint, $width in $widths {
#media (min-width: map.get($breakpoints, $breakpoint)) { // <- $breakpoints undefined
.container {
max-width: $width;
}
}
}
</style>
use
#import
in your vite config instead of
#use
vite.config.ts:
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: '#import "./src/styles/variables.scss";',
},
},
},
});
keep in mind that you cannot import the same file variables.scss again in your main.ts file otherwise, you will get this error
[sass] This file is already being loaded.
by the way, you can also import the scss file in every single component manually as you mentioned but that would be really tedious so using a global import in preprocessorOptions in vite.config.ts is a much better option for files used globally like a variables.scss file.
I've managed to "fix" the issue. Turns out, when I replace all #use rules for file imports, the sass code is imported correctly and works. But this produces a new problem as the #import rules cannot be placed before #use, so I had to remove the additionalData key from config and include the imports manually.

Vite - Separate chunk for fonts

I am building a library that contains components and some shared CSS, like a design system.
The problem is that it is not separating the fonts in different chunks, instead, it is inlining them in the font as base 64, so the CSS file gets huge!
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import { resolve } from 'path';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'design-system',
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
alias: [
{ find: '#', replacement: '/src' },
],
},
});
I already tried to place it in root/public, but it didn't work.
I have a file _fonts.css which import fonts like so
#font-face {
font-family: Inter;
src: url('/public/fonts/Inter-Regular.ttf') format('truetype');
font-weight: 400;
}
And then I have a main.scss that imports it
// main.scss
#import 'normalize';
#import 'themes';
#import 'fonts';
Any idea on how to split it?
I was able to accomplish this in a library we're working on by placing the fonts in the special public directory (see: https://vitejs.dev/guide/assets.html#the-public-directory).
Long story short placing assets in there makes Vite copy them over without any actual transformation and/or renaming.
First of all place your font files in public/fonts/.
Then add the following to vite.config.ts:
{
root: './',
publicDir: 'public',
}
This was necessary although it should be a default setting.
Then my font declaration looks like this:
#font-face {
font-family: MyFont;
src: url('./fonts/myfont.woff2');
font-weight: 200;
}
But - this is for the library mode. In case you're building an app just start the font URL path with / instead of ./.

How to use sass global variables from other components in vite/vue3

I want to use and change global variables from other components, my files structure looks like this...
I have my variables in global.sass file, but I can't access variables in other components.
You need to set configuration file vite.config.js :
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "#/assets/global.scss";`
}
}
},
also for local fonts you can add another configuration there, set alias:
resolve: {
alias: {
'#': path.resolve(__dirname, 'src'),
}
},
and then use it something like:
#font-face {
font-family: 'Opensans-Bold';
font-style: normal;
src: local('Opensans-Bold'), url(#/assets/fonts/OpenSans-Bold.woff2) format('woff2');
}
Nikola's answer is correct. For any Nuxt3 users out there I'd like to add you need to make sure you don't have explicit css config in your nuxt config file at the same time. Otherwise you might get file already imported error
A new sass module system
Note: The Sass team discourages the continued use of the #import rule. Sass
will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead. (Note that only Dart Sass currently supports #use. Users of other implementations must use the #import rule instead.)
More details: Here
Below is the best way to global scss at that time.
vite.config.js
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/_main.scss" as *;`,
},
},
},
plugins: [vue()],
});
styles/abstracts/_colors.scss
$default: #000000;
$default-light: #333333;
$default-dark: #000000;
styles/abstracts/index.scss
#forward './colors';
#forward ...
styles/_main.scss
#forward './abstracts';
#forward './components';
#forward './layouts';
src/index.scss => don't forget to add this import "./index.scss" in App.vue
#forward './styles/abstracts';
#use './styles/abstracts' as *;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: $font-primary;
font-size: 1.6rem;
line-height: 1.5;
text-rendering: optimizespeed;
color: $text;
overflow-y: overlay;
}

Storybook with vue - SassError: Undefined variable

I am using storybook with Vue. I have some common SCSS I want to use.
I am using the addon in **main.js**
addons: [
'#storybook/preset-scss'
],
This seems to automatically pick up ./src/scss/variables.scss which for testing I have added
body {
border: 10px solid green;
}
This works and hot reloads too the issue is any variables are not found in my components.
So my story list.stories.js imports the list component
import List from '../components/List.vue'
but within the style block I am trying use a var from the variables.scss.
<style lang="scss" scoped>
.list {
border: 1px solid $light-blue;
}
</style>
And get the error
SassError: Undefined variable: "$light-blue".
on line 204 of components/src/components/List.vue
>> border: 2px solid $light-blue;
In main.js add sass-loader to webpack config:
module.exports = {
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: '../src/scss/variables.scss',
},
},
],
});
return config;
}
}
It works with installed css-loader#5, sass-loader#10 and style-loader#2.
If scss is not working, then you can load styles by creating preview-head.html file at config/storybook/preview-head.html
And then just load your CSS there. For example:
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-screen.css">
Make sure to restart Storybook dev server. npm run storybook:serve

Change default font in vuetify

I can't figure out how to change the default font in vuetify. I've been looking for the right variable within ./node_modules/vuetify, but I can't locate it.
I'd ideally not make any changes in the module, but would rather override such variables from outside the module.
Best way
Define (if you use google fonts)
#import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
#import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');
$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';
For vuetify 2+
.v-application {
font-family: $body-font-family, sans-serif !important;
.title { // To pin point specific classes of some components
font-family: $title-font, sans-serif !important;
}
}
In app.vue or a separate scss/css file imported directly into app.vue
For vuetify 1.5.x
In your app.vue script add
.application {
font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
font-family: $body-font-family !important;
}
For example, if you are using a google font, your script tag should look like
<style lang="scss">
#import url("https://fonts.googleapis.com/css?family=Questrial");
.application {
font-family: "Questrial";
}
</style>
Update 2021
In your main.scss file,
$font-family:'Ubuntu'
.v-application {
[class*='text-'] {
color: #36405a;
font-family: $font-family, sans-serif !important;
}
font-family: $font-family, sans-serif !important;
}
The easiest way would be to simply set the font-family on body. If you are using webpack and importing the Vuetify stylus entry, main.styl, you can simply overwrite the $font-family variable with whatever font you want.
What worked for me using Nuxt.js with Vuetify Module was simply setting the body font in variables.scss, like this:
$body-font-family: SofiaPro, Roboto;
All other fonts are derived from this one.
Default variables file ('~vuetify/src/styles/styles.sass') is imported automatically afterwards and ignores a variable if it was already set (thanks to !default). Therefore there's no need to change $heading-font-family and individual $headings anymore.
For this to work with Nuxt module, do not forget to set treeShake: true in nuxt.config.js file. If you are not using Nuxt.js, then probably you need to import the variables file after setting the body font.
Here's an example of my nuxt.config.js file fragment:
buildModules: [
'#nuxtjs/vuetify'
],
vuetify: {
treeShake: true,
customVariables: ['~/assets/variables.scss'],
... other Vuetify options
}
Where viariables.scss contains the above font definition.
I wrote a short article explaining this subject, containing a complete code example: https://medium.com/#jareklipski/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10
So vuetify provides a very simple solution.
In your src directory create a sass, scss, or styles directory and then create a file named variables.scss or variables.sass in it.
When you run yarn serve or npm run serve, vuetify will automatically
hoist the global Vuetify variables to all of your sass/scss files.
Example - src/scss/variables.scss
Below code will change the default body font
#import url('https://fonts.googleapis.com/css2family=Poppins:wght#400;700&display=swap');
$body-font-family: 'Poppins', sans-serif;
You can change many more shit in there and can change webpack settings if above doesn't work for you directly - check this link
Hope it helps!
I have noticed that, at least in recent versions of Vuetify, you need to specify both $body-font-family and $heading-font-family to change the fonts of everything from Roboto to something else in your overrides (following these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS in 2.0 so there will be a new process at that point.
$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 }
}
I cannot guarantee that this is "best practice". But considering that there is no documentation on how to do this properly I am going to tell you how I accomplished this.
I am using the Nuxt webpack template so my file structure may be a bit different than yours but the concept is the same.
I have a static assets folder. Within that folder I have a global css file. I downloaded the font I was using as a file and added it to my static directory as well. But you could put it pretty much anywhere.
Here is the code that I added to my global CSS file:
#font-face{
font-family: **any name you want to give the font**;
src: url(**location in directory**) format("opentype");
}
Then you just add it to you styling rules as you normally would
*{
font-family: **the same name you gave it above**;
}
h1{
font-family: **the same name you gave it above**;
}
ect...
Remember to enter the correct format. If your file downloads as a .otf it is opentype. If it is .ttf it is truetype.
I have not yet figured out how to include a font from CDN. If I do figure that out I will let you know.
For Laravel Vuetify users, this all you need:
Update your webpack.min.js file to look like:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/main.scss', 'public/css')
.stylus('resources/stylus/main.styl', 'public/css');
Your main.styl should be located in the path: resources\stylus\main.styl
Your main.styl file should look like this:
#import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");
$body-font-family = 'Literata', serif
$alert-font-size = 18px
#import '~vuetify/src/stylus/main'
// For a-la-carte
#import '~vuetify/src/stylus/app'
To prevent Vuetify from writing inline styles that could override your main.css, do:
mix.options({
extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
});
And finally, ensure stylus-loader is setup already, if not run in command line:
$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev
You can also npm install material-design-icons-iconfont.
npm install material-design-icons-iconfont --save
This solution work on Vue-CLI>=3
First of all you must install sass-loader
npm install sass sass-loader fibers deepmerge -D
You should first create "sass" folder in the "src" directory, then
create a "variables.scss" file in this directory.
Then write the below code in this file.
$ body-font-family: Your-FontName
#import '~vuetify/src/styles/settings/_variables.scss';
You need to restart your project now.
Install your font via CDN/npm. Then just override this variable by adding this line in ./src/styles/variables.scss
//Change default font to 'Inter'
$body-font-family: "Inter" !important;
A short and simple approach.
If you are using Vuetify 2+, the process will be very similar to jeffbaumes's answer but using Sass instead of Stylus
// src/sass/main.scss
#import '~vuetify/src/styles/styles.sass';
$body-font-family: 'My Custom Font', cursive;
$heading-font-family: $body-font-family, cursive;
#each $heading, $style in $headings {
$headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}
Or you can change the fonts of some heading styles and not others like this:
$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));
Unfortunately, #alice-mx answer didn't work for me (couldn't import from node_modules).
This is how I solved this problem in my code (using Vuetify 2):
After downloading the wanted .woff2 file and put it in src/assets/fonts,
I added this code to my App.vue file (or whichever main vue file you set in your project):
// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify
%font-choice {
font-family: "Noto Sans", sans-serif !important;
}
#mixin md-typography {
#each $typoOption in $typoOptions {
.#{$typoOption} {
#extend %font-choice;
}
}
.v-application { // This is where we'll add all the md-typography classes
font-size: 12px;
#extend %font-choice;
#include md-typography;
}
// add font-face because in this case Noto-Sans is taken from Google fonts
#font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 400;
src: local("Noto Sans"), local("NotoSans"),
url("~#/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>
I hope this will help!
This answer helped me to form the .scss code
My solution in (latest) Nuxt:
nuxt.config:
head: {
.......
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
{
rel: 'stylesheet',
href:'https://fonts.googleapis.com/css?family=Raleway:400|Roboto+Slab:200&display=swap'
}
]
},
vuetify: {
treeShake: true,
customVariables: ['~/assets/variables.scss'],
theme: {
.....
},
}
},
variables.scss
$body-font-family: Raleway, sans-serif;
$heading-font-family: Roboto Slab, serif;
#import '~vuetify/src/styles/styles.sass';
I tried everything nothing was working in my case, but the below solution will definitely work though not the best solution
Add the below scss in your variables.scss
$body-font-family: "Open Sans",sans-serif;
.v-application {
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-headline,
.text-title,
.text-subtitle-1,
.text-subtitle-2,
.text-body-1,
.text-body-2,
.text-button,
.text-caption,
.text-overline {
font-family: $body-font-family !important;
}
}
I'm using webpack and the only way I could make it work was:
// webpack.config.js
...
{
test: /\.sass$/,
use: [
{
loader: 'sass-loader',
// Vuetify
// Requires sass-loader#^9.0.0
options: {
implementation: sass,
sassOptions: { fiber: fibers },
additionalData: "#import '~/src/styles/variables.scss'",
}
}
]
}
...
// src/styles/variables.scss
#import "~vuetify/src/styles/settings/_variables.scss";
#import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
$body-font-family: 'Fredoka One', cursive;
$heading-font-family: $body-font-family;
$headings: (
'h1': (
'font-family': $heading-font-family,
),
'h2': (
'font-family': $heading-font-family,
),
'h3': (
'font-family': $heading-font-family,
),
'h4': (
'font-family': $heading-font-family,
),
'h5': (
'font-family': $heading-font-family,
),
'h6': (
'font-family': $heading-font-family,
),
);
Vuetify v2.4.11
Vue v2.6.12
To configure a custom font in Vuetify you need to include this CSS in your App.vue component.
<style lang="scss">
#import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
$font-family: 'New Tegomin', serif;
.my-application {
.headline,
[class*='display-'],
[class*='text-'] {
color: #36405a;
font-family: $font-family, sans-serif !important;
}
font-family: $font-family, sans-serif !important;
}
</style>
Put a specific class in your node, something like that:
<v-app class="my-application">
This second point is important because all the font styles from Vuetify have !important and if you want to overwrite, you need to put an extra class...
I hope that this tip helps everyone!
How I achieved it: (Vuetify 2+)
1) Into your index.html, import your fonts.
<link rel="stylesheet" href="<%= BASE_URL %>fonts/<MY_CUSTOM_FONT>/fontface.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Literata:100,300,400,500,700,900">
2) Inside /src, create a styles directory and a file named variables.scss inside it
3) In that file, override some variables values:
// Globals
$body-font-family: 'MY_CUSTOM_FONT'; // Used on content
$heading-font-family: 'Literata'; // Used on helpers classes
Hope it helps someone.
References:
https://github.com/vuetifyjs/vuetify/issues/8169
https://vuetifyjs.com/en/customization/sass-variables#example-variable-file
it is a late reply but , You can add in common scss/sass/less file (which is called in App.vue or you main App file) it will implement it all over the application
.body,
.v-application{
font-family: 'Antic', sans-serif;
}
For vue 3 with vite and vuetify 3.0.6 generated by yarn create vuetify
based on #arora answer and official docs
Run npm install -D sass
In src/plugins/vuetify.js replace import 'vuetify/styles with import '../assets/main.scss' as stated here
Create main.scss file in assets folder as stated
#use 'vuetify' with (
$utilities: false,
$color-pack: false,
$body-font-family: 'Assistant'
);
I had to set utililties: yes to resolve some style issues (Do not use true).
There is a much easier and proper way than all of the methods above. Add
treeShake: true,
defaultAssets: {
font: {
family: 'Poppins'
}
}
to the vuetify object in nuxt.config.js. This should properly enable your font family throughout the application.(see defaultAssets documentation for more details and note that the treeShake option is required)
Extra helpful thing:
when changing font from Roboto to any other font, by default vuetify will still import the cdn Roboto fonts file (url) in the "head" tag. To avoid that extra thing use the "defaultAssets: false" option under vuetify settings.
EDITED
That thing only works within NUXTJS, thanks to #nlavr for pointing it out
I've run into the same problem in February 2023. This is an answer that works specifically on Vuetify 3 inside Nuxt 3.
Here is a very simple way:
Go to get the source of your fonts. eg. Google font.
Input those fonts link in your nuxt.config:
head: {
link: [
{
rel: 'stylesheet',
href: 'https://your-font-source.com'
},
]
},
Apply the font-family to the html selector inside one of the Vue Components as a none scoped style:
<style>
html {
font-family: 'Your font name';
}
</style>
If there's no override font specifically set in the components this font will be used throughout the app.