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.