Quasar + VueJS applications generated by Radsystems look great already. But if you’re like me who want to add a little more flavor to the look-n-feel of the application by using Google Fonts for the body of the entire application, then here are the simple steps.
Publish application at least once
Make sure you’ve published the application at least once.
Open project in your favorite code editor
Open the folder where Radsystems has generated the project files (frontend and api) in your favorite code editor. I’m using VS Code because it has got a wonderful support for Vue and Quasar code development through a set of very useful plugins.
Open quasar config file
First, we will disable the current default font, that is roboto from the quasar config file. For that, go to the frontend folder and open quasar.conf.js in the code editor.
Comment-out the roboto-font
Locate extras section and add // before the roboto-font to disable roboto font. Save the file after making this change.
Get your favorite Google Font
Go to Google Fonts and select the font you want to use as the default font for your application. Please do not be extravagant while selecting styles. Usually, I select only Normal for the entire application, which is sufficient. Now, copy the @import without tags, exactly as shown in the screenshot below.
Copy - Paste the font @import to quasar sass
Now, come back to code editor and open "frontend/src/css/quasar.variables.sass file in code editor. Paste the Google Font @import line below the large comment block and above the first code line, as seen in the screenshot below.
Get Font-Family from Google Fonts
Go back to Google Fonts website, and select the font-family name from the Google Fonts code snippet. We just need the font family name, nothing else. Please see the screenshot below.
Add Sass variable to Quasar variables
Now, we will use one of the standard quasar sass variables to define the font for the entire application… Add the following code below the @import line we just copied.
// Set the default font-family
$typography-font-family : 'Montserrat', sans-serif !default
Here, I’m using Montserrat, you select ‘Montserrat’, sans-serif part from the code line above and replace it with the font-family name you copied from Google fonts website. Save the file after making these changes.
Republish the app
Usually Quasar Live Load will detect the changes and will auto-load the updated version of the application. If you don’t see the changes, press CTRL F5 on Windows PC to flush the cache of your browser and refresh the page to see the changes.
Notes:
The changes in the code above will apply the selected font to the entire application, including all Quasar components. If you don’t want to apply the font to the entire application, you can add the Google Font to “Page CSS” and then write component-specific CSS code to change the font of one specific component.
Also, note that adding Google Font will add overheads to the page load. So, please do not overload the application with too many Google Fonts and too many font styles, or else it may affect the page load time of your application.
