Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Change roboto font to arial (global)

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

Comments

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

  • That change nothing
  • edited February 27
    *{font-family: "Arial" !important;}
  • LNLN
    edited March 4
    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 https://userstyles.org/styles/130954/global-font-changer
  • edited March 9 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?
    image
  • *: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 13 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 21 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 21 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: https://userstyles.org/styles/141278/change-roboto-to-arial

    @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
    */
    

    https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

    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.

Sign In or Register to comment.