How to embed font to all page with nuxt js - vue.js

I just embed google font to the global setting in nuxt.config.js
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
But how to apply this font to every page .

New answer
Use #nuxt/google-fonts package: https://google-fonts.nuxtjs.org
It's trivial to use and supports a bunch of options including downloading the fonts.
Old answer
If you want to include the font within your app so you're serving it
Download the font from: https://fonts.google.com/specimen/Roboto?selection.family=Roboto (Open the drawer and download the .zip file).
Unpack the contents of the .zip into ./assets/fonts/* (create it if it does not exist).
Create ./assets/fonts/roboto.css and place the following in it:
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
(You can find this CSS by going to https://fonts.googleapis.com/css?family=Roboto).
Then change nuxt.config.js to include the CSS file in the css property:
module.exports = {
/*
** Global CSS
*/
css: [
'~/assets/fonts/roboto.css'
]
}
Then you apply font-family: 'Roboto', sans-serif; to your text elements.
Using the font on every page
Create a ./assets/css/styles.css file with the following in it:
body
{
font-family: 'Roboto', sans-serif;
}
Then as above include the CSS file in the nuxt.config.js:
module.exports = {
css: [
'~/assets/fonts/roboto.css',
'~/assets/css/styles.css'
]
}
Same applies for any asset like other fonts, icons, framework css etc.

QUICK
In your nuxt.config.js fi
head: {
...
...
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Lato:400,700'
}
]
}
And in your layouts/default.vue or any other layout file that you are using add the style tag
<style scoped>
#app {
font-family: 'Lato', sans-serif;
}
</style>

It is simple like this
Go to Google fonts and select your font style e.g Montserrat
Got to nuxt.config.js and add your font url as shown here
export default {
head: {
meta: [],
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat&display=swap"'}
]
}
Go to your nuxt project -> layouts directory -> default.vue file and add class named app ( or whatever name you want) in v-app tag as shown here
<v-app dark class="app">
--your app goes here --
</v-app>
In the same file style option add the following lines in the class body you defined above
<style>
.app{
font-family: 'Montserrat', sans-serif;
}
</style>
Make sure class is defined in v-app tag and use <style> and not <style scoped> to take effect of whole project

Update your CSS with the following rule:
body {
font-family: 'Roboto', sans-serif;
}
If you don't have CSS stylesheet setup yet, create a new file in assets directory named i.e. main.css. Inside it put the code above and save it. Then edit nuxt.config.js adding this piece of code after head object:
css: [
'#/assets/main.css'
],

I tried many ways to add a custom font to a nuxt + vuetify project but no one worked correctly.
Finally I created a global.scss in assets folder file and addressed it in nuxt.config.js:
css: ['~assets/global.scss'],
and in global.scss file:
#font-face {
font-family: 'my-custom-font';
src: local('my-custom-font'), url('path/to/font') format('truetype');
}
.v-application {
font-family: 'my-custom-font' !important;
}
// or
#app {
font-family: 'my-custom-font';
}
This worked correctly.

you can do these steps:
1__define your font in as a custom varriable in a seprated file in your assests directory,for example variables.scss, like this:
$body-font-family: Roboto;
#import '~vuetify/src/styles/styles.sass';
2__then in the nuxt.config.js,you should add a stylesheet link in the head, like this:
head: {
link: [
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Oswald|Libre+Baskerville&display=swap' }
]
},
3__then it is neccessary to enable treeshaking in the vuetify and set your customvariables,like this:
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true
},

Related

#nuxtjs/google-fonts ignoring other weights, works only for 400

I am using google font Nuxt module to use 2 fonts in my website.
I set it correctly but it does not work and downloads only 1 font, the one it finds first in the "Families" object and does not download all weights, but only the lowest.
buildModules: [
['#nuxtjs/google-fonts',],
],
googleFonts: {
families: {
Montserrat: {
wght: [400, 600, 700],
},
'Work+Sans': {
wght: [400, 600, 700],
},
},
subsets: ['latin'],
display: 'swap',
prefetch: false,
preconnect: false,
preload: false,
download: true,
base64: false,
},
And this is what the folder assets/css/fonts.css looks like
/* cyrillic-ext */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~assets/fonts/Montserrat-400-cyrillic-ext1.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~assets/fonts/Montserrat-400-cyrillic2.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~assets/fonts/Montserrat-400-vietnamese3.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~assets/fonts/Montserrat-400-latin-ext4.woff2') format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~assets/fonts/Montserrat-400-latin5.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
PS: more info on #font-face.
I've updated my previous answer by adding a solution on how to fix those weight issues based on this related github issue.
Mainly, use the following in your package.json
"#nuxtjs/google-fonts": "^3.0.0-1",
That successfully fixes the issue on your project too.

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;
}

Vuetify how to override sass variable for pagination component

I am having some issue while modifying the existing sass variables inside my vue application.
I have gone through a few SO questions where there are good amount of information on overriding the existing sass variables but nothing seems be working for me. I am pretty sure I am doing some thing wrong.
I have implemented a custom pagination control which works fine but I want to override the sass variables for it so that the size of pagination control button would be little smaller than the default button size.
This is my webpack.config.js
//webapack.config.js
module.exports = {
module: {
rules: [
// SASS has different line endings than SCSS
// and cannot use semicolons in the markup
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
// This is the path to your variables
data: "#import '#/scss/variables.scss'"
},
// Requires sass-loader#^8.0.0
options: {
// This is the path to your variables
prependData: "#import '#/scss/variables.scss'"
},
},
],
},
// SCSS has different line endings than SASS
// and needs a semicolon after the import.
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader#^7.0.0
options: {
// This is the path to your variables
data: "#import '#/scss/variables.scss';"
},
// Requires sass-loader#^8.0.0
options: {
// This is the path to your variables
prependData: "#import '#/scss/variables.scss';"
},
},
],
},
],
},
}
Following is the variables.scss inside src/scss directory, I use it to override the font-family and stuff.
// src/scss/variables.scss
#import url("https://fonts.googleapis.com/css?family=Hind+Siliguri:400,500,600,700&display=swap");
$body-font-family: "Hind Siliguri", sans-serif !important;
$typoOptions: display-4, display-3, display-2, display-1, headline, title,
subtitle-1, subtitle-2, body-1, body-2, caption, overline;
#app {
font-family: $body-font-family, sans-serif !important;
#each $typoOption in $typoOptions {
.#{$typoOption} {
font-family: $body-font-family, sans-serif !important;
}
}
}
// $pagination-item-font-size: 2px !important;
// $pagination-item-height: 10px !important;
// $pagination-item-margin: 1px !important;
// $pagination-item-min-width: 10px !important;
// $pagination-item-padding: 0 10px !important;
// $pagination-more-height: x !important;
// $pagination-navigation-height: 10px !important;
// $pagination-navigation-width: 10px !important;
#import "~vuetify/src/styles/styles.sass";
I want to override the sass variables given by vuetify but when I add them variables.scss (commented line on the above code), it doesn't work for some reason. Any help or pointer is much appreciated.
.v-pagination__item {
height: 25px;
min-width: 25px;
margin: 0px !important;
padding: 0px !important;
font-size: 14px;
}
try use this class, and for nav
.v-pagination__navigation
it work for me
I faced a similar problem with the total visible pages not being consistent. A work around is to create logic based upon data set size and update a reactive property for the column size.

Vue Cli 3 Local fonts not loading

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

How we can use #font-face in Less

In Less, it seems almost impossible to use #font-face selector. Less gives errors when I try to use
font-family: my_font
Here is how I try to use it:
#font-face {
font-family: my_font;
src: url('http://contest-bg.net/lg.ttf');
}
p {
font-family: my_font, "Lucida Grande", sans-serif;
}
There is simple escape in Less using ~"..." but can't come up with working code.
Had someone used it successfully?
Have you tried putting the font family name in single quotes? The following works just fine for me.
#font-face {
font-family: 'cblockbold';
src: url('assets/fonts/creabbb_-webfont.eot');
src: url('assets/fonts/creabbb_-webfont.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/creabbb_-webfont.woff') format('woff'),
url('assets/fonts/creabbb_-webfont.ttf') format('truetype'),
url('assets/fonts/creabbb_-webfont.svg#CreativeBlockBBBold') format('svg');
font-weight: normal;
font-style: normal;
}
To use font as a mixin, try:
.ffbasic() {
font-family: ff-basic-gothic-web-pro-1,ff-basic-gothic-web-pro-2, AppleGothic, "helvetica neue", Arial, sans-serif;
}
then within a style declaration:
.your-class {
font-size: 14px;
.ffbasic();
}
One other note to the voted answer above; make sure that your mixin does not have parenthesis so that it is parsed when compiled into CSS.
Full Example:
** In Your Variables LESS File:**
// Declare the path to your fonts that you can change in the variables less file
#path-fonts: '../fonts';
** In Your Mixins LESS File:**
.font-names
{
#font-face {
font-family: 'open-sans-light';
src: url('#{path-fonts}/open-sans/OpenSans-Light-webfont.eot') format('enbedded-opentype'),
url('#{path-fonts}/open-sans/OpenSans-Light.ttf') format('truetype'),
url('#{path-fonts}/open-sans/OpenSans-Light-webfont.woff') format('woff'),
url('#{path-fonts}/open-sans/open-sans/OpenSans-Light-webfont.svg#open-sans-light') format('svg');
}
}
** In Your Nested Rules LESS File:**
#import 'your variables less file name';
#import 'your mixin less file name';
#font-face {
.font-names;
}
Note: That the ".font-names" definition does not have the () behind it.
I think it's because you are missing the font format. Which for ttf is truetype, if it's missing or incorrect the font might not be loaded.
#font-face {
font-family: "MyFont";
src: url("./my-font.ttf") format("truetype");
}
My LESS code:
#fontName: 'FontName';
#fontWeights: 'Light', 'Medium', 'SemiBold', 'Bold', 'ExtraBold';
#fontWeightsNum: 300, 400, 500, 600, 700;
.fontFace(#indexPrefix: 1) when (#indexPrefix =< length(#fontWeights)) {
#fontWeight: extract(#fontWeights, #indexPrefix);
#fontWeightNum: extract(#fontWeightsNum, #indexPrefix);
#fontFullName: "#{fontName}-#{fontWeight}";
#fileName: "../fonts/#{fontFullName}";
#font-face {
font-family: #fontName;
font-weight: #fontWeightNum;
font-style: normal;
font-display: swap;
src: local('#{fontFullName}'),
url('#{fileName}.woff2') format("woff2"),
url('#{fileName}.woff') format("woff");
}
.fontFace(#indexPrefix + 1);
}
.fontFace();
#f: '#{fontName}', "Helvetica Neue", sans-serif;
Get:
#font-face{
font-family:FontName;
font-weight:300;
font-style:normal;
font-display:swap;
src:local('FontName-Light'),
url(../fonts/FontName-Light.woff2) format("woff2"),
url(../fonts/FontName-Light.woff) format("woff")
}
x5
And you can use:
font: 300 16px #f;