CODEWITHSUNDEEP
javascriptcssangularjsfrontend
Connor O'Doherty
Connor O'Doherty

Reputation: 385

Changes to CSS style sheet are not reflected in Angular.js button. Is JS overriding CSS?

I am attempting to change the font and border layout of my Angular/HTML element. However, changes in my style sheet have no impact on thedisplay.

The code for the first section is: 

                                <div class="wizard-p">
                                    Are there specific industries you are particularly interested in advising? (check
                                    all that apply):
                                    <button type="button" class="btn btn-default" data-bs-select data-html="1" data-multiple="1"
                                    data-animation="am-flip-x" data-ng-model="advisor.industries"
                                    data-ng-change="validity.category=validate_advisor(3, advisor)"
                                    data-ng-options="industry for industry in industry_list">
                                        Action
                                        <span class="caret"></span>
                                    </button>
                                </div>

                            </div>

Every class that contains a font specification has been set to: BrandonGrotesque-Regular, "Helvetica Neue", Helvetica, Arial, sans-serif;

However, it is still rendering in times new roman. Is Javascript overwriting this font specification?

Upvotes: 0

Views: 655

Answers (1)

J148
J148

Reputation: 576

Inline HTML almost always overrides CSS, and JS sets styles by writing to the inline HTML. I would start by checking your HTML and any style setting in your JS.

In this case, however, it does not appear that BrandonGrotesque-Regular or Helvetica Neue are websafe fonts. Therefore, the text should be rendering in Helvetica, which is the first websafe font on your specification and looks very close to TNR. A more or less complete list of websafe fonts may be found here

You may also embed your own fonts in the CSS like this:

@font-face {
    font-family: "Copperplate Gothic Bold";
    src: url("/font/COPRGTB.TTF");
}

and then calling it:

font-family: 'Copperplate Gothic Bold';

Upvotes: 0

Related Questions