completely replace Roboto with another font (v1)?



  • 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)?



  • 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.



  • (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.


  • Admin

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



  • @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.



  • This post is deleted!


  • @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!



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

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

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

    1. Go to google fonts, and choose a font (let’s see the example of Open Sans)

    2. Now go to customize and choose the weights.

    3. Go back to embed and copy the following from “standard”:

    <link href = “https://fonts.googleapis.com/css?family=Open+Sans&display=swap” rel = “stylesheet”>

    1. In Quasar, go to index.template.html and paste the above in the “head” (where the other “links” are located)

    2. 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:

    <style lang = “sass”>
    body
    font-family: ‘Open Sans’, sans-serif
    </style>

    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.



  • 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
    


  • 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??


Log in to reply