I am using Vuejs with vuetify components i have customize my website to have two languages with Internationalization (i18n). the problem is i also want to change my font when i change to my second language bur don't know how to do that.
style
.font{
font-family: 'b nazanin';
/*i want to use this font after i change my language*/
}
<template>
<button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)"v-on:click="font">
<flag :iso="entry.flag" ></flag>
{{entry.title}}
</button>
<h1 v-bind:style="{font}">{{ $t('titleInHome') }}</h1>
</template>
can anyone please help me in this case thank you all
You can do it with style binding.
HTML Template:
<html>
<body>
<div id="app">
<h1 :style="styles">Apply font here</h1> <br>
<button v-for="entry in langs" @click="changeFont(entry.title)" :key="entry.title">
{{ entry.title }}
</button>
</div>
</body>
</html>
Script:
new Vue({
el:"#app",
data:{
styleObj:{
color :'blue',
border: '2px blue dotted',
backgroundColor:'gray',
fontFamily:'Time New Roman'
},
langs:[
{ title :'Vue.js'},
{ title:'React'},
{ title:'Angular'}
]
},
methods:{
changeFont(lang){
let fontFamily = null;
if(lang == "Vue.js"){
fontFamily = "Arial";
}
else if(lang == "React"){
fontFamily = "Verdana";
}
else{
fontFamily = "Calibri";
}
this.styleObj.fontFamily = fontFamily;
}
}
});