Fonts on the Web

A list of Web Safe Fonts and importing fonts?

I would look at Google Web Fonts for something like this:

Google Web Fonts

Hope this helps

Web Safe fonts - What exactly does that mean?

A web safe font is one that is installed on the majority of systems. (A font doesn't become safe just because someone installs it, it is safe if it is reasonable to assume that it will be available).

Support in browsers for the fonts is implicit.

Is there a modern list of web-safe fonts?

You can find from here http://cssfontstack.com/
include the different system match.

Japanese standard web fonts

Web-font for Japanese, though there are few providers exist, is not really practical as you found the size of the font data is too big to download. Usually Japanese font has 8,000-16,000 glyph so making new fonts means you need to make at least 8,000 glyph, which is pretty heavy task. As a result of it, there are very few variations in Japanese fonts, and Japanese users also care about fonts less than Latin-character users.

Most Japanese websites use default font sets provided on Windows or Mac. The latest ones are Meiryo and Hiragino Kaku Gothic Pro. For older versions such like Windows XP, it is good to add former default fonts MS Gothic(or MS Mincho)/Osaka.

Some old browsers could not understand those font names in English, some others do not recognize the names in Japanese, so it is safe to write both in Japanese and English.

Meiryo and Hiragino's order is, because Mac users may have Meiryo from MS-Office, and Hiragino is more familiar and matching well on Mac, better by starting Hiragino series.

So the current recommended practice is like this,

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

how to copy font-family from a webpage

The problem with the font you intend to use is that it will not be installed on every user's device, which is why the fallback font (Arial) is specified in the website you checked.

You need to use web fonts if you wish to use a font that is not available on the user's device. Here's an example CSS code to do that:

@font-face {
  font-family: 'Futura Today Bold';
  src: url('http://path/to/futuratodaybold.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('http://path/to/futuratodaybold.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

After including the above lines in your CSS code, the font can be applied by the CSS rule font-family:'Futura Today Bold' in your stylesheet.

Also note that as Christina pointed out in a comment, you should not use fonts that you do not have licensing rights to use.

Answering your other question as to how to find out which font is currently being applied, you can use your browser's developer tools to find that out. Here's a screenshot of how it can be done in Firefox.

Source.

Fastest way to load a web font for a website?

The fastest way to do it is not to do it at all ;)
In your case the best options is to load it from google cdn and hoping your users already have it cashed from previous visit of a page using it.

---

Related Topics