Customizing Font Size in Angular Metronic 8
Hello dear devs! I trust this message finds you well. I've been delving into Angular Metronic and had a query regarding font customization. Specifically, I'm curious about adjusting the font size to align with my project's design specifications. Could you kindly guide me on how to modify the font size in Angular Metronic? Any assistance or advice you can offer would be greatly appreciated. Thank you in advance, and I'm eager to receive your insights. Best regards,
Replies (3)
To adjust font size in Angular Metronic, locate the _variables.scss file in the src/assets/sass folder. Modify the font size townscaper variables, such as $font-size-base or $font-size-sm, to fit your design needs. Rebuild the SCSS files with npm run build to apply the changes.
@scratch games
Identify the CSS styles associated with the elements whose font size you want to modify. This could be headings (h1, h2, etc.), paragraphs (p), or other specific class or ID selectors used in your Angular Metronic project.
Once you've identified the styles, you can add custom CSS to your project.
Hello,
I hope you're doing well! To customize the font size in Angular Metronic 8, you can follow these steps:
Locate the SCSS file responsible for styling. In Metronic, it's found here:
/src/assets/sass/layout/_variables.custom.scss
Open the _variables.custom.scss file and look for the variable controlling the font size. This variable is often named something like $app-general-root-font-size-desktop.
Adjust the value of the desired variable to the font size you want. For example:
$app-general-root-font-size-desktop: 16px; // Adjust the value according to your design specificationsSave the changes.
This file is linked to the main style file hierarchy as follows:
/src/assets/sass/style.scss > /src/assets/sass/_init.scss > /src/assets/sass/layout/_variables.custom.scss
If you have any further questions or need additional assistance, feel free to ask.
Best regards!
