How to change the 'Font-Family' of an Angular application that applies to each element used throughout the application?
Example: In CSS:
p {
font-family: Calibri, sans-serif
}<p>Calibri</p>
<label>Default</label>
Asked
Active
Viewed 6,641 times
3
Sakthivel A R
- 575
- 8
- 24
-
1Not sure I understand your question...you want to set a global font-family? Then do it in a global stylesheet and add it to `body`. – Dom Sep 02 '20 at 09:00
-
1Yes. How to do? – Sakthivel A R Sep 02 '20 at 14:10
2 Answers
2
If you are using a third-party library you need to use ng-deep that gives you access to manipulates DOM elements.
In SCSS:
::ng-deep body {
font-family: 'Calibri', sans-serif;
}
if you don't have third party library, just use body tag.
In CSS:
body {
font-family: 'Calibri', sans-serif;
}
envereren
- 118
- 3
-
-
you may find your answer here. try **root** as mentioned. [link](https://stackoverflow.com/questions/15831657/creating-css-global-variables-stylesheet-theme-management) – envereren Sep 03 '20 at 12:12
-
@envereren I had the same requirement and root did not help. When I used * it worked, fyi – ananth Aug 31 '21 at 12:02
0
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
Example:
.testfont{
font-family: 'Comic Sans MS', sans-serif;
}<div class="testfont"> abcdefg (changed by class)</div>
<div class="default"> abcdefg (default cause not changed)</div>Care: The style only applies to the class(es) you apply it to.
To apply it to each element use it in body:
body{
font-family: 'Comic Sans MS', sans-serif;
}<div class="testfont"> abcdefg (changed by body)</div>
<div class="default"> abcdefg (changed by body :D)</div>
xKean
- 94
- 6