Notice: The devs are no longer actively involved in the forum, so any bug reports regarding the Stylish extension or this website should be sent to them directly at
Changing your Avatar.
The only way to currently change a forum avatar is through The email address used for your account must be one of the email addresses that is registered to your Gravatar account.

Change roboto font to arial (global)

I need style for change roboto fonts to arial (but only roboto other fonts leave without change)


  • did you try this: <br /> @font-face { font-family: "Arial" !important; }<br />

  • That change nothing
  • edited February 2017
    *{font-family: "Arial" !important;}
  • LNLN
    edited March 2017
    I don't think you can change as like that way since can't select specific font type with css.
    hope you try mine though, it changes default font to the others
  • edited March 2017 Firefox
    * {font-family: "Arial"}
    is working well but with !important its breaking icons.

    So I want to disable this original code that is overwriting my style:
    * {font-family: 'Roboto','Arial','Helvetica',sans-serif!important;}

    Here !important is overwriting, but on style
    div, span, applet, object {font-family: "Arial" !important}
    is now working like here, why?
  • *:not([class*="ico"]):not(i){font-family: "Arial" !important;}

    Compatible with breaking icons
  • Dude, that is perfect! :D
  • Its still breaking some of symbols, any idea?
    200 x 208 - 1K
  • myfmyf
    edited April 2017 Chrome

    It seems pretty straightforward, like trespassersW started to suggest, by re-declaring the font family:

    @font-face {
      font-family: 'Roboto';
      src: local('Arial');

    From quick test it works, try it.

    Some pages might use alternative name for Roboto font family -- in this case it will be necessary to duplicate the rule and copy the font-family name -- but if loaded from Google Fonts it will be really called Roboto.

    Seems like a nasty trick asking for funny exploitation; Helvetica->Arial, or Georgia -> Comic Sans MS. This forum uses Lucida Grande, so declaring

    @font-face {
      font-family: 'Lucida Grande';
      src: local('Impact');

    makes this pages pretty bold :]

  • edited April 2017 Chrome
    I doesnt work for all roboto fonts styles.

    @font-face { font-family: 'Roboto'; src: local('Arial'); }
    Working with font:
    Roboto - regular

    Not working with:
    Roboto - 500 (I have to add font-weight: 500 to make work that font..)
    Roboto - Bold

    So its work only with regular
    Any idea how to make for all font styles?

    And how I can add more fonts?

    @font-face {
    font-family: 'Roboto' , 'Open Sans'; not working ;<
    src: local('Arial');


    Its still breaking some of symbols, any idea?

    Thats the solution ;D
    *:not([class*="ico"]):not([class*="ic-"]):not([class*="fonti-"]):not(i){font-family: "Arial" !important}

  • myfmyf
    edited April 2017 Chrome

    Ah, ok, thought that not declaring weight and styles makes the rule match everything, not just defaults. One learns something every day :]

    Try updated version:

    @font-face {
      font-family: 'Roboto';
      font-style: normal; /* | italic | oblique*/
      font-weight: 100; /* .. 900 */
      src: local(Arial);
      unicode-range: U+0000-FFFF; /* not sure about this, but seems also necessary */
        omitting font-stretch, font-variant and font-feature-settings,
        hopefully we will not face them in the wild
      covering all possible combinations would be quite astronomical:
      3(styles) × 9(weights) × 9(stretches) × myriad of variants and features combinations
      = 243 × variants and features combinations

    font-family rule in @font-face block can hold just single name, so font-family: 'Roboto' , 'Open Sans'; really cannot work: you must have two blocks, one for Roboto and other for Open Sans.

  • edited December 2017 Chrome
    Something happen, and its not working properly right now: After chrome update

    @font-face {font-family: 'Roboto Slab'; font-style: normal; font-weight: 700; src: local(Arial);}
    I want to keep it bold. But it doesent anymore.
    826 x 530 - 198K
  • What page are you using for your testing?

    Overriding all of the @font-face declarations can require a lot of rules, but the approach should work unless Chrome is doing something new and strange.

    Example not tested in Chrome:
  • edited December 2017 Chrome
    Jefferson said:

    What page are you using for your testing?
    But doesnt matter what page, happens everywhere, already downgraded to chrome 61 and that solved problem

  • It's useful to have a page.

    For Firefox 57, you need to specify Arial Bold. That didn't work in Chrome 63. No idea what's going on.
    @font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: local('Arial Bold');
Sign In or Register to comment.