CODEWITHSUNDEEP
cssangular
Sakthivel A R
Sakthivel A R

Reputation: 585

Font-Family Change throughout the all pages in Angular application

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>

Upvotes: 3

Views: 8437

Answers (2)

envereren
envereren

Reputation: 118

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;
}

Upvotes: 2

xKean
xKean

Reputation: 94

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>

Upvotes: 0

Related Questions