Take the 2-minute tour ×

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">
                                        <span class="caret"></span>


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?

share|improve this question

1 Answer 1

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';
share|improve this answer
Ok, thank you! I'm new to Angular and JS in general, and was wondering what part of the HTML would tell be what JS I was referencing. –  Connor O'Doherty Aug 12 at 0:51
Are you saying to call it in the CSS? Or in the html itself? –  Connor O'Doherty Aug 12 at 0:58
Both of the above code blocks should be in the CSS. –  J148 Aug 12 at 1:10
The font I have been using displays everywhere else on the site except for this section, so I'm not sure if that's the issue. Could you point me in the direction of where the JS might be that is manipulating this? Does HTML give any indication? –  Connor O'Doherty Aug 12 at 1:13
Hmm, interesting. If you are using Firfox, I would recommend using Firebug or the web console to inspect the HTML. This shows the updated version, not the source you wrote, which allows you to check the section's inline styles. If there are no inline styles, then the problem is with the CSS. Otherwise, it is likely that somewhere in your JS code, you are inadvertently changing font styles. –  J148 Aug 12 at 1:18

Your Answer


