0

The font Arial Black is available on the Mac and PC in general, but not on iOS.

Can a webpage use CSS or perhaps some tricks (such as adding a class "mobile" or "ios" to the <body> element), so that "Arial Black" is added for the webpage, preferably so that the Mac and PC don't have to load it but use the native Arial Black font?

nonopolarity
  • 130,775
  • 117
  • 415
  • 675
  • does [this](https://stackoverflow.com/a/9039885/8134014) answers your question ? – Burham B. Soliman Feb 12 '21 at 02:17
  • detecting iOS is easy... the hard part is how to make Arial Black and webfont work and not affect Mac and PC – nonopolarity Feb 12 '21 at 02:19
  • setting the font in CSS body { } using JS is not a good idea ? like if detected IOS set document.body.style.fontFamily – Burham B. Soliman Feb 12 '21 at 02:26
  • another tip [here](https://stackoverflow.com/a/43387109/8134014) – Burham B. Soliman Feb 12 '21 at 02:30
  • this maybe possible, although I wonder if on the Mac and PC, it will load the webfont anyways... and it that webfont is not as good looking as the Mac or PC native Arial Black, will the webfont replace it? Can I rename that webfont Arial Black as "Arial Black Mobile" or ArialBlack-Mobile" and therefore specify in CSS: `font: 36px "Arial Black", "ArialBalck-Mobile"` ? – nonopolarity Feb 12 '21 at 03:17
  • you can take a look [here](https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp) to read more about CSS font-face rule – Burham B. Soliman Feb 12 '21 at 03:20

1 Answers1

0

It's probably not safe to assume certain systems have or have not got a particular font loaded locally. And browser/system sniffing is very unreliable.

The CSS font-face rule allows you to give a list of places where a font may be and the browser will go down the list until it finds one it can use. So you can start with looking locally and if it's not there load it.

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

If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.

It gives this example:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Obviously you need to substitute whatever names and urls your particular font has on the various systems.

A Haworth
  • 7,433
  • 2
  • 4
  • 10