What is the process for switching the default font in Vuetify from Roboto to a different typeface for all elements?

Is there a way to update the font for all elements in Vuetify from Roboto to another option?

I am currently using Vuetify, which comes with the default Roboto font. However, I would like to switch it to a different font. Modifying the font in the variables.scss file hasn't been effective as each class is specifically assigned the Roboto font.

@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';
$heading-font-family: 'Oxygen';

Despite these changes, when I apply classes like:

class = "text-md-h6 text-lg-h6 .text-xl-caption"

the Roboto font continues to be used.

@media (min-width: 1024px)
<style>
.v-application .text-xl-caption {
    font-size: 0.75rem !important;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.0333333333em !important;
    font-family: "Roboto", sans-serif !important;
}

What steps should I take to successfully change the font style across all components?

vue.jsfontsvuetify.js

Answer №1

To make this work, ensure that you set the font variables in the variables.scss file as explained here. If it's not working, here are a few things to double-check:

  • Confirm that the file is located in one of the expected folders: src/[sass, scss, or styles]. See the documentation for more details.
  • Make sure Vuetify Loader is installed along with sass and sass-loader as development dependencies.
  • The variables file should only contain variables, not imports. Font declarations can be included in the main file or elsewhere.

Answer №2

Avoid relying on !important in most situations, especially with styles like font-family that also use !important. CSS will prioritize the style with a more specific selector, requiring you to add !important as well. Consider using something like 

.v-application .v-application--wrap *
with !important, such as:

.v-application .v-application--wrap * {
font-family: $body-font-family !important;
}

If you have different styles for different classes, place them all within 

.v-application .v-application--wrap { }
and let Sass handle the processing. Keep in mind that Vuetify classes may use more specific selectors, so adjust accordingly for those cases.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting a conditional null assignment in Vuex action

In my store, I have the following action: updateTicketCustomer ({commit, state}, selectedCustomer) { axios.patch('/tickets/' + state.currentTicket.id, { customer_id: selectedCustomer.id }) .then((response) => { c ...

vue.jsvuex

The image has been restricted from view due to CORS specifically on Windows operating systems

This Vue component includes a photo block and an "edit" button. <template> <div> <tui-image-editor ref="editor" > </tui-image-editor> <div class=""> <img :src="img&qu ...

vue.jscorstoast-ui-image-editor

Utilizing Props in Data and Methods in Vue.js

As a newcomer to Vue.js, I am encountering an issue when passing data from a parent component to a child component using props. While I can access the data in the child component, I'm facing difficulties when trying to use it within the child componen ...

vue.js

Vuetify: Dynamic v-select options based on user selection

Here's a codepen I created as an example: https://codepen.io/rasenkantenstein/pen/qBdZepM In this code, the user is required to select a country and then choose cities only from that selected country. The data of people is stored in an array behind t ...

javascriptvue.jsvuetify.js

The return value from vue-query is ObjectRefImpl, not the actual data

Greetings to the Vue.js community! As a newcomer to Vue.js, I am seeking guidance on fetching data using vue-query, Vue.js 3, and the composition API. The data returned to me is ObjectRefImpl, but when I try to print the values, I encounter the error: "Pro ...

javascriptvue.jsvuejs3fetch-apivue-composition-api

Exploring the capabilities of argon2-browser in a cutting-edge setup with vite

After spending several hours attempting to implement the argon2-browser library in a Vue app with Vite, I have been encountering a persistent error. Despite following the documentation closely, I keep receiving the following message: This require call is ...

javascripttypescriptvue.jsvitewebassembly

Tips for troubleshooting and debugging a Vue.js application using the Chrome browser

Recently, I decided to implement Vue.js as a templating tool for my Meteor app. However, when attempting to debug the code on Chrome browser, I encountered an issue where I couldn't locate the debugger pointer. It appears that debugging isn't fun ...

vue.jsmeteor

Exploring the MEVN Stack's Integration with Image Uploading

After successfully implementing an image upload system on my website, I encountered difficulty in linking to the uploaded images. The root directory of my project includes a client folder for vuejs app and a server folder for backend logic. When users upl ...

node.jsimageexpressvue.jsfile-upload

Utilize Vue.js to transmit HTTP requests with specified headers and parameters

I'm trying to figure out how to create a LinkedIn login component, but I'm having trouble finding information about headers and parameters. Can someone help me understand how to send a GET or POST request with parameters and headers? Here's ...

javascriptvue.jsaxioslinkedin-api

React to the Vue: Only activate the event if the key is pressed twice consecutively

In my application, I am creating a unique feature where users can trigger a window to appear by inputting the symbol @ (shift + 50). This will allow them to access predefined variables... <textarea @keyup.shift.50="showWindow"></textarea> My ...

javascriptvue.jsvuejs2

Is there a way to search for multiple items using just one search term?

On my app, there is a search bar that currently only looks up data for one specific attribute. For example, if I type in "Hammer," it only searches for Tool names. Now, I need to expand the search functionality to accommodate different types of strings. F ...

javascriptnode.jsvue.js

What is the best way to update datatables in Laravel vuejs with fresh data?

Currently, I am utilizing datatables 1.10.19 within vue js and encountering an issue with refreshing the table post inserting new data into the database. Despite trying methods like clear, destroy, and draw, none seem to be effective in achieving the des ...

vue.js

Is it possible to alter the video dynamically according to the state in Vuex?

I am working on a small web application that mimics the appearance of FaceTime. My goal is to switch between video elements by clicking a "Next" button, which will update a value in Vuex and swap out the video accordingly. I initially attempted this appr ...

javascriptvue.jshtml5-videonuxt.js

Guide to Updating Store State with API Data

My goal is to update my component state with data retrieved from an API using a getter in the store. Within the mounted() lifecycle hook, I call the getProducts() getter which is defined as: export const getters = { async getProducts() { axios.ge ...

javascriptvue.jsnuxt.jsstore

Exploring the versatility of Vue.js through props and scoped slots

Coming from a React background, I am used to being able to easily alter children components before they render. However, after spending hours reading the VueJS documentation and searching forums, I have not been able to find a straightforward way to do thi ...

typescriptvue.js

What is the best way to check a configuration setting in vue.config.js from srcmain.ts?

I am updating my vue application to include code that will automatically redirect from HTTP to HTTPS when accessing the page. (I understand that configuring this in the webserver is a better practice, but it doesn't hurt to be extra cautious) if (loc ...

node.jsvue.jsconfigurationvue-cli

Vue mistakenly displays the template tag instead of the intended content

Learning Vue.js has been quite a challenge for me. Despite trying out five tutorials already, I am still struggling to get anything working. It seems like the template tagging is being displayed instead of the actual content in the following code: < ...

vue.js

Troubleshooting Vue component reactivity problems with async server requests

Providing some background information: Within my Vue application, I have a view called Articles. Upon mounting this component to the DOM, I use the axios library to fetch all posts from the database through Laravel controllers and API routes. In the articl ...

vue.jsvuejs2axiosvue-component

Rendering a Vue select list before receiving data from a Meteor callback

I am currently facing an issue with populating my events array from a meteor call so that it appears in a select list. The 'get.upcoming' Meteor function returns an array of JSON objects, but it seems like the select list is being rendered before ...

javascriptmeteorcallbackvue.jsvuejs2

Issue with CSRF Token discrepancy between cookies and HTML

Is there a proper way to retrieve the CSRF Token? In my Vue SPA, I am using Axios for login. I have converted everything to Vue components except for the Routes generated by `php artisan ui:auth`, so now I cannot use `@csrf` on my forms and have to send t ...

laravelvue.jsaxioscsrf-token