How to change the default font of the application?

0
Hello all, Hope everyone is doing ok in these tough times! I have a question regarding fonts. In our application, we planned to use Roboto google font instead of the default Open Sans. How do I make this change? The changes that I had done are: changed in _custom_variables.scss file “https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700” to “https://fonts.googleapis.com/css?family=Roboto:300,400,500,700” in the $font-family-import property and also changed $font-family-base to “Roboto”. Is there anything else to be changed to achieve this font change? The above change alone does not seem to suffice, I still get Open sans font in the application. Please let me know of any more changes. I was wondering if the above changes are to be done in the _variables.scss file of the core folder too…   Stay safe! - Kamala  
asked
3 answers
0

After you made the change to the SASS (.scss) file, did you also compile the SASS into CSS using Calypso or another SASS compiler tool? That step is critical to making sure your theme changes are actually used by the application.

answered
0

Firstly, I’d like to thank both of you for taking time out and answering my query.

 

I used Calypso and compiled the sass file too. The main.css has the following line too:

/@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

 

But still the font on the page is open sans. What am I missing? :(

(When I opened the link to main.css on page source it shows Open Sans which is why it still has not changed to Roboto)

answered
0

Make another obvious change to your style like setting the background color to green. Just to make sure that the css-changes have reached your website.

answered