HT202771: iOS 7: Font list

Learn about iOS 7: Font list
eyesofjeremy

Q: 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:43 AM

Close

Q: Is there a CSS list of the fonts in iOS?

  • All replies
  • Helpful answers

  • by etresoft,

    etresoft etresoft Jul 23, 2015 1:23 PM in response to eyesofjeremy
    Level 7 (29,298 points)
    Mac OS X
    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

      Copyright  Copyright © 2004 - 2007 Linotype GmbH, www.linotype.com. All rights reserved.

      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

  • by Rysz,

    Rysz Rysz Jul 23, 2015 1:32 PM in response to eyesofjeremy
    Level 7 (20,838 points)
    iPhone
    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.

  • by Tom Gewecke,

    Tom Gewecke Tom Gewecke Jul 23, 2015 6:35 PM in response to Rysz
    Level 9 (79,385 points)
    Jul 23, 2015 6:35 PM in response to Rysz

    Rysz wrote:

     

    This site attempts to keep up to date with pre-installed iOS fonts.

     

    http://iosfonts.com/

     

    For OS X, this page may be useful:

     

    https://en.wikipedia.org/wiki/List_of_typefaces_included_with_OS_X

  • by Rysz,

    Rysz Rysz Jul 23, 2015 7:11 PM in response to Tom Gewecke
    Level 7 (20,838 points)
    iPhone
    Jul 23, 2015 7:11 PM in response to Tom Gewecke

    Thanks. I'm definitely saving this link.