Is there a CSS list of the fonts in iOS?

Question

eyesofjeremy Author

Level 1

4 points

Is there a CSS list of the fonts in iOS?

I was reviewing the list of fonts installed on iOS—how did I never notice these before?

iOS 6 has a large list.

iOS 7 has an even bigger list.

A lot of these are very solid and I'd love to specify them in CSS font stacks.

E.g.:

body {

font-family: "Avenir Next Condensed Medium", Calibri, "Gill Sans", sans-serif;

}

In CSS, of course, you have to spell out the exact name of the font, though. And not every font in the list has the same ACTUAL name as the one we use.

So when I specify "Avenir Next Condensed Medium" for a web page, and look at it on my phone, it's there—woohoo!

But when I specify "Avenir Next Ultra Light Italic", it's not. Boo.

So, is there a copy of this list somewhere that actually lists the names which could actually be used in CSS?

Thanks,

Jeremy

ps— I promise not to use Papyrus Condensed.

iPhone 5s, null

Posted on Jul 23, 2015 9:37 AM

Reply

Answer 1

etresoft

Level 8

46,330 points

Jul 23, 2015 1:23 PM in response to eyesofjeremy

Hello eyesofjeremy,

I think all of these fonts are installed on OS X. You can use the Font Book app to inspect them. If you do that for Avenir Next Ultra Light Italic, you should get:

Avenir Next Ultra Light Italic

Avenir Next Ultra Light Italic

PostScript name AvenirNext-UltraLightItalic

Full name Avenir Next Ultra Light Italic

Family Avenir Next

Style Ultra Light Italic

Kind OpenType TrueType

Language Afrikaans, Albanian, Asu, Basque, Bemba, Bena, Bosnian, Catalan, Chiga, Congo Swahili, Cornish, Croatian, Czech, Danish, Dutch, Embu, English, Esperanto, Estonian, Faroese, Filipino, Finnish, French, Galician, German, Gusii, Hungarian, Icelandic, Indonesian, Irish, Italian, Kabuverdianu, Kalenjin, Kamba, Kikuyu, Kinyarwanda, Latvian, Lithuanian, Luo, Luyia, Machame, Makhuwa-Meetto, Makonde, Malagasy, Malay, Maltese, Manx, Meru, Morisyen, North Ndebele, Norwegian Bokmål, Norwegian Nynorsk, Nyankole, Oromo, Polish, Portuguese, Romanian, Romansh, Rombo, Rundi, Rwa, Samburu, Sango, Sangu, Sena, Shambala, Shona, Slovak, Slovenian, Soga, Somali, Spanish, Swahili, Swedish, Swiss German, Taita, Teso, Turkish, Vunjo, Zulu

Script Latin

Version 8.0d5e5

Location /System/Library/Fonts/Avenir Next.ttc

Unique name Avenir Next Ultra Light Italic; 8.0d5e5; 2012-08-06

Manufacturer Linotype GmbH

Designer Adrian Frutiger, Akira Kobayashi

Trademark Avenir is a trademark of Linotype GmbH registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions.

Description Adrian Frutiger designed Avenir in 1988, after years of having an interest in sans serif typefaces. In an interview with Linotype, he said he felt an obligation to design a linear sans in the tradition of Erbar and Futura, but to also make use of the experience and stylistic developments of the twentieth century. The word Avenir means 'future' in French and hints that the typeface owes some of its interpretation to Futura. But unlike Futura, Avenir is not purely geometric; it has vertical strokes that are thicker than the horizontals, an "o" that is not a perfect circle, and shortened ascenders. These nuances aid in legibility and give Avenir a harmonious and sensible appearance for both texts and headlines. In 2004 Adrian Frutiger and the type director of Linotype GmbH Akira Kobayashi reworked the Avenir and created the Avenir Next for the Platinum Collection. It includes new small caps, newly designed true italics, and a complete new range of condensed weights. Avenir Next is a versatile sans serif family, ready for large and complex projects from books to signage to advertising.

Enabled Yes

Duplicate No

Copy protected No

Glyph count 1,189

That should tell you what you missing. The actual "font-family" name is just "Avenir Next". The "Ultra Light Italic" portion is the font-weight and font-style, respectively. So try something like this:

font-family: "Avenir Next", Avenir, Arial, sans-serif;

font-weight: 100;

font-style: italic

Reply

Answer 2

Rysz

Level 8

44,391 points

Jul 23, 2015 1:32 PM in response to eyesofjeremy

This site attempts to keep up to date with pre-installed iOS fonts. I'm not aware of a similar website for OS X.

And, Yes, the font names that are displayed and the actual font file names are sometimes different. To ake it even more complicated, OS X equivalents may look different and have different names. Such is the case for the new system font San Francisco.

Reply