Angular Global Font Size Management

I want to manage the font size codes of my Angular project from a single file like style.css (I opened a new file named "font.css" and defined it in the angular.json file) However, my codes do not work. When I write the similar codes to each component css file, there is no problem, but the rest is as I said.

h1 {
font-size: clamp(32px, 1.5vw, 48px) !important;
}

h2 {
font-size: clamp(23px, 1.5vw, 32px) !important;
}

h3 {
font-size: clamp(25px, 1.5vw, 32px) !important;
}

h4 {
font-size: clamp(20px, 1.5vw, 25px) !important;
}

h5 {
font-size: clamp(16px, 1.5vw, 20px) !important;
}

h6 {
font-size: clamp(12px, 1.5vw, 16px) !important;
}

button,
input,
select,
textarea,
label,
a,
p,
span,
li,
th,
td,
small,
strong,
em,
b,
i {
font-size: clamp(12px, 1.5vw, 16px) !important;
}

input:laceholder,
textarea:laceholder {
font-size: clamp(12px, 1.5vw, 16px) !important;
}

::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container,
::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
font-size: clamp(12px, 1.5vw, 16px) !important;
}

Continue reading...