completely replace Roboto with another font (v1)?

ssuess

I have been reading the docs here (https://v1.quasar-framework.org/style/typography) and although I see the section on adding custom fonts, is there not a way to simply replace the default Roboto in all cases with another font (I am thinking of Open Sans)?

ssuess

Not sure if this is kosher, but it SEEMS to work by simply editing /npm_modules/@quasar/extras/roboto-font/roboto-font.css and replacing the src: url declaration in each css rule to point to my font versions that I moved into the same web-font folder as the roboto versions. I don’t have exactly the same weights, but it seems to work and is easy without having to change anything else. Hopefully nothing will break because of this, but I will test and report back if something does.

jeffatpf

(1) add this to the <head> section of index.template.html

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">

(3) and add this class to app.styl

*:not(i)
{
font-family: ‘PT Sans’, sans-serif;
}

There are many other ways to do this but this approach works great for me.

rstoenescu

Simply remove roboto-font from extras section in quasar.conf.js

ssuess

@rstoenescu thanks, but I didn’t want to remove it and then have to recreate every place it was used, I just wanted to replace it with another font and keep all the same settings for all the same weights, locations, etc.

Lou Rectoret

This post is deleted!

Lou Rectoret

@ssuess said in completely replace Roboto with another font (v1)?:

@rstoenescu thanks, but I didn’t want to remove it and then have to recreate every place it was used, I just wanted to replace it with another font and keep all the same settings for all the same weights, locations, etc.

@ssuess Totally agree here!

Mandinga

Hello suess. Changing the default quasar font with one from google fonts is easy. I explain step by step:

Go to quasar config and delete or comment
extras: [// ‘roboto-font’,],

This will automatically quasar not add a robot in the build.

Go to google fonts, and choose a font (let’s see the example of Open Sans)
Now go to customize and choose the weights.
Go back to embed and copy the following from “standard”:

In Quasar, go to index.template.html and paste the above in the “head” (where the other “links” are located)
Finally, go to your main “Layout” and paste the content of “Specify in CSS” in body class (Google Fonts):

font-family: ‘Open Sans’, sans-serif;

In my case, that I use SASS, it would look like this:

Ready! It will replace all your Roboto fonts with Open Sans without having to change anything.
(Remember to add the weights of the new font if you used codes like ‘text-weight-light’.

Sorry for my english.

JeremyR

There is an even simpler, more modular, way of replacing the default font family than @Mandinga above:

As @Mandinga suggests, remove the ‘roboto-font’ from the quasar.config.js file (unless you intend to still use it as a secondary font).
Either select a font from Google Fonts for import, or download a font family .WOFF file to include.

Similar to the documentation ( https://quasar.dev/style/typography#Add-custom-fonts ), you should import the font-family, but it should go into the ‘src/css/quasar.variables.*’ file. Then, change one or more of the default styling variables. I’m going to assume Sass for examples below:

// Example: Import Open Sans with multiple weights
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap')

// Set the default font-family
$typography-font-family : 'Open Sans', sans-serif !default

// Fix font-weight values to match the imported font family weights
$text-weights: (thin: 300, light: 400, regular: 600, medium: 700, bold: 800, bolder: 800) !default
$button-font-weight: 600 // or 400 if you prefer thinner

iamyohanarias

Thank you @JeremyR I did it and works fine! But, how can I do this with a Monserrat font that I downloaded and has 19 files??

PrinceMackaroo

@iamyohanarias for local files what I did is, in the quasar.variables.styl:

@import '~src/css/rubikfont.styl';

// Set the default font-family
$typography-font-family = 'Rubik';

// Fix font-weight values to match the imported font family weights
$text-weights= '(thin: 300, light: 400, regular: 600, medium: 700, bold: 800, bolder: 800) !default'
$button-font-weight= '600' // or 400 if you prefer thinner

in which the

@import '~src/css/rubikfont.styl';

contains the generated code from the google api helper https://google-webfonts-helper.herokuapp.com/fonts/rubik?subsets=latin :

rubikfont.styl

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('~assets/theme/fonts/rubik/rubik-v11-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('~assets/theme/fonts/rubik/rubik-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-300.woff') format('woff'), /* Modern Browsers */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-300.svg#Rubik') format('svg'); /* Legacy iOS */
}

/*
.
. 
.
OTHER RUBIK FONT VARIATIONS HERE
.
.
*/

/* rubik-500 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src: url('~assets/theme/fonts/rubik/rubik-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('~assets/theme/fonts/rubik/rubik-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('~assets/theme/fonts/rubik/rubik-v11-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */
}

then it worked, make sure the font files you downloaded from the googleapi helper site are stored in the “assets” folder and not anywhere else. current my quasar version is v1.14.6.

No More Posting New Topics!

completely replace Roboto with another font (v1)?