Being able to use Google Fonts CDN #257

Closed
eliashdezr opened this Issue Dec 15, 2016 · 4 comments

Projects

None yet

2 participants

@eliashdezr

Currently I'm having issues with Azure and the fonts with some 404 errors:
fonts

Since the fonts referenced in the final CSS output use the "hash" included, using CDN fonts would not work either. Would be nice to have the option to not use the npm package roboto-fontface, saving with that space in the bundle too.

@rstoenescu
Collaborator

Fonts were added mainly for Cordova apps as using a CDN can break your app when you're offline. However, it's a good idea to be able to use CDN when building a website, so will make this possible soon.
Thanks for opening this!

@rstoenescu rstoenescu added a commit that referenced this issue Dec 18, 2016
@rstoenescu rstoenescu feat: #257 Being able to use Google Fonts CDN
In your /src/themes/app.mat.styl and /src/themes/app.ios.styl add this definition
before importing Quasar's Stylus:

$quasar-dont-import-fonts = true
7fb4c85
@rstoenescu rstoenescu added this to the v0.11 milestone Dec 18, 2016
@rstoenescu
Collaborator

In your /src/themes/app.mat.styl and /src/themes/app.ios.styl add this definition before importing Quasar's Stylus:

$quasar-dont-import-fonts = true

Will be available in next Quasar version.

@rstoenescu rstoenescu closed this Dec 18, 2016
@eliashdezr

@rstoenescu
I added the variable to both files and the output is still using the local fonts. Should I remove the npm package for roboto fonts?

This is the CSS output when using quasar build mat

@font-face {
    font-family: Roboto;
    font-weight: 200;
    src: url(fonts/Roboto-Thin.90d3804.woff) format("woff")
}
@font-face {
    font-family: Roboto;
    font-weight: 300;
    src: url(fonts/Roboto-Light.37fbbba.woff) format("woff")
}
@font-face {
    font-family: Roboto;
    font-weight: 400;
    src: url(fonts/Roboto-Regular.081b11e.woff) format("woff")
}
@font-face {
    font-family: Roboto;
    font-weight: 500;
    src: url(fonts/Roboto-Medium.303ded6.woff) format("woff")
}
@font-face {
    font-family: Roboto;
    font-weight: 700;
    src: url(fonts/Roboto-Bold.ad140ff.woff) format("woff")
}
@rstoenescu
Collaborator

@eliashdezr

  1. Have you specified $quasar-dont-import-fonts = true BEFORE the Quasar import statement?
  2. Are you using at least Quasar v0.11?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment