I'd like to use the new San Francisco font on a site. I've tried:
font: 'San Francisco', Helvetica, Arial, san-serif;
to no avail. I have tried the answers to this question, but #font-face is not the solution here.
Apple's new system font is not publicly exposed. Apple has started abstracting system font names:
The motivation for this abstraction is so the operating system can make better choices on which face to use at a given weight. Apple is also working on font features, such as selectable “6″ and “9″ glyphs or non-monospaced numbers. It’s my guess that they’d like to bring these features to the web, as well.
Safari and Firefox use SF for -apple-system; Chrome recognizes BlinkMacSystemFont:
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
There are also other variations:
font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body
You can demo these at the following fiddle; most are not supported yet: http://jsfiddle.net/v94gw9nx/
I got my info from Craig Hockenberry's article which has a lot of great info about using the font:
http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/
Also, some great info on the Surfin' Safari blog about using abstracted system fonts: https://www.webkit.org/blog/3709/using-the-system-font-in-web-content/
And apparently Apple is working with the W3C to standardize using a generic "system" font name in CSS. https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
Download the SF font .otf files for your own personal use: https://developer.apple.com/fonts/
None of the current answers including the accepted one will use Apple's San Francisco font on systems that don't have it installed as the system font. Since the question isn't "how do I use the OS X system font on a webpage" the correct solution is to use web fonts:
#font-face {
font-family: "San Francisco";
font-weight: 400;
src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}
Source
Last time tested: March 2018
To address the question
How to use Apple's new San Francisco font on a webpage
font-family: -apple-system, system-ui, BlinkMacSystemFont;
or (even shorter):
font-family: -apple-system, BlinkMacSystemFont;
should suffice.
If you want to default to system font on multiple platforms, though, I'd suggest:
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
-apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
system-ui — default UI font on a given platform.
BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
"Segoe UI" — Windows (Vista+) and Windows Phone.
Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
Ubuntu — all versions of Ubuntu.
The idea is borrowed from the following issue on github.
You can look up fonts for other OS or older versions of them in this article on css-tricks.
-apple-system allows you to pick San Francisco in Safari. BlinkMacSystemFont is the corresponding alternative for Chrome.
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
Roboto or Helvetica Neue could be inserted as fallbacks even before sans-serif.
https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a (how or previously http://furbo.org/2015/07/09/i-left-my-system-fonts-in-san-francisco/ do a great job explaining the details.
If the user is running El Capitan or higher, it will work in Chrome with
font-family: 'BlinkMacSystemFont';
This is an update to this rather old question. I wanted to use the new SF Pro fonts on a website and found no fonts CDN, besides the above noted (applesocial.s3.amazonaws.com).
Clearly, this isn't an official content repository approved by Apple. Actually, I did not find ANY official fonts repository serving Apple fonts, ready to be used by web developers.
And there's a reason - if you read the license agreement that comes with downloading the new SF Pro and other fonts from https://developer.apple.com/fonts/ - it states in the first few paragraphs very clearly:
[...]you may use the Apple Font solely for creating mock-ups of user
interfaces to be used in software products running on Apple’s iOS,
macOS or tvOS operating systems, as applicable. The foregoing right
includes the right to show the Apple Font in screen shots, images,
mock-ups or other depictions, digital and/or print, of such software
products running solely on iOS, macOS or tvOS.[...]
And:
Except as expressly provided for herein, you may not use the Apple
Font to, create, develop, display or otherwise distribute any
documentation, artwork, website content or any other work product.
Further:
Except as otherwise expressly permitted [...] (i) only one user may use the Apple Font at a time, and (ii) you may not make the Apple Font available over a network where it could be run or used by multiple computers at the same time.
No more questions for me. Apple clearly does not want their Fonts shared across the web outside their products.
You can not use Apple System Font served directly from a database. It's against the License, but you can use this for Mac Systems higher than High Sierra
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
Or you can use this:
font-family: 'BlinkMacSystemFont';
Apple is abstracting the system fonts going forward. This facility uses new generic family name -apple-system. So something like below should get you what you want.
body
{
font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
}
try this out:
font-family: 'SF Pro Text',-apple-system,BlinkMacSystemFont,Roboto,'Segoe UI',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
It worked for me. ;)
Do upvote if it works.
Last tested in 2015
Use this answer only if the other methods don't work.
Original answer:
Works on Mac OS Chrome/Safari
body { font-family: '.SFNSDisplay-Regular', sans-serif; }
Basically, this is what worked for me:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
P.S. This works on all systems.
Related
When I learned CSS over a decade ago, the standard (and only) way to use the "default fonts" (whatever that means) was:
font-family: serif;
font-family: sans-serif;
Then, last year, Apple added a custom syntax for their new system font, and Blink did something similar if I remember correctly.
Can someone who's more up-to-date with CSS summarize how my font-family property should look like when I just want the default sans-serif or serif font? (I specifically don't want webfonts.)
The CSS Fonts Module Level 4 draft introduces new generic font families
For most languages and scripts, existing generics can be mapped to
something comparable to that script. That’s useful for the web so that
generics like serif and sans-serif map to something reasonable
independent of the language of the content. But typographic traditions
vary widely across the world and many scripts have a variety of common
typeface designs that don’t map cleanly into these existing generics.
In situations where a similar typeface is used across a wide variety
of platforms, it’s useful to extend the set of predefined CSS generic
font families to cover these type styles.
If you want to get "the font that feels the least out-of-place on the target platfom", that would be system-ui:
system-ui font family representing the default UI font on a
given platform
Here is a css snippet to default to system font, on most platforms (OSX, iOS, Windows, Windows Phone, Android):
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
-apple-system — San Francisco in Safari (on Mac OS X and iOS); Neue Helvetica and Lucida Grande on older versions of Mac OS X.
system-ui — default UI font on a given platform.
BlinkMacSystemFont — equivalent of -apple-system, for Chrome on Mac OS X.
"Segoe UI" — Windows (Vista+) and Windows Phone.
Roboto — Android (Ice Cream Sandwich (4.0)+) and Chrome OS.
Snippet itself, borrowed from the following issue on github.
You can look up fonts for other OS or older versions of them in this article on css-tricks.
I am working on making my own text editor for my website. This text editor is based upon Microsoft Word 2010 with a similar layout and features. I am currently working on the drop down list for the types of font which you can choose and I would like to know if there is a anywhere on the web safe fonts of which you can use.
Serif Fonts
Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif
"Times New Roman", Times, serif
Sans-Serif Fonts
Arial, Helvetica, sans-serif
"Arial Black", Gadget, sans-serif
"Comic Sans MS", cursive, sans-serif
Impact, Charcoal, sans-serif
"Lucida Sans Unicode", "Lucida Grande", sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif
View this page by clicking here.
The above content is a preview of some fonts of which you can use, listed on w3schools.com. It lists fonts such as "Tahoma, Geneva, sans-serif", of which I do not know what part of this, is the actual font name. On my editor, I would simply like to display a list of most used fonts in a list "Arial, Arial Black, Arial Narrow" and so on. Some of these fonts will not be on safe web fonts and therefore I will have to import the font.
I would like to not only know if there is a better list of web-safe font types your able to have including their simplified name and how to import fonts. Also, regarding importing fonts, once I import them, will they show correctly on all applications/devices?
I would look at Google Web Fonts for something like this:
Google Web Fonts
Hope this helps
You can check which fonts work with which OS here and here.
These websites have the list of web safe fonts along with which OS it can be used with. It is always best and safe to choose fonts that can work on all types of OS.
As mentioned by #Stefen V., Google fonts are awesome. However, it has a drawback that it may effect the page load time (makes the page load slower than using web safe fonts).
The examples above which you have given are examples of font trees.
So "Georgia, serif" means use georgia if it's available and if it's not then use any 'serif' font that is available.
And "Arial, Helvetica, sans-serif" means use Arial if it's available, if it's not available use Helvetica and lastly if that's not available use ans sans-serif font that is available.
Google fonts as mentioned by Stefan V. is a good option although I'm not 100% sure you'll be able to integrate them with your editor. Anything is possible though so you may be able to.
You can either download the indivudual Google fonts to use on your website or just link to them hosted on Google's web servers.
How do I make it so Windows will always show Helvetica instead of Arial? Is this even possible? I know it automatically substitutes it, but is there any way to do this.
I know that I could use font squirrel but apparently that is illegal. Is there another solution?
You cannot. Even embedding a font would not force anything, since settings in the user’s system may prevent the use of downloadable fonts. Besides, embedding Helvetica is illegal, unless permitted by its copyright holder.
If you declare font-family: Helvetica, then Helvetica will be used only if the user’s system has Helvetica installed, and Windows systems usually don’t. Due to Windows settings, when Helvetica is not installed, Arial will be used instead.
Use this snippet to make sure your website is using Helvetica instead of Arial (if possible):
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
In addition there are many alternatives to Helvetica, if you need something free try Google WebFonts , they have at least a few fonts that look more or less like Helvetica: Actor, Asap, Cabin, Droid Sans, Lato, Open Sans, PT Sans, Varela.
As has already been said. If you are using an actual font and not an image of a font, you can not force a font onto a system legally.
What you should do is use a proper CSS font-stack as shown in other answers and the computer will use the first font that it comes to that it has on the system.
Always put Helvetica before Arial, so that when available it will be chosen first. Helvetica and Arial DO look very similar, but people who care can tell the difference.
http://www.ironicsans.com/helvarialquiz/
link is :
http://www.woolovers.com/silk-cotton/womens/sleeveless-silk-cotton-camisole.aspx
Left is iPhone display and right is PC. The fonts circled are having same css but have different display. A(pc)=B(pc) but A!=B. Any ideas?
As Jukka has said it is not a supported font on iOS so you have three options.
Choose a different font which is available on ALL (iOS, Android, MacOS, Windows etc.) platforms.
Host the font file on your web server and point to it with CSS #font-face.
Use an online font hosting service such as Google Webfonts
To point to a custom font with CSS use the code below and copy the Lucida Sans font file to your web server.
#font-face{
font-family: "Lucida Sans"; src:url('LucidaSans.ttf');
}
Note: Google Web Fonts does not have Lucida Sans available.
It seems that iPhone just hasn’t got a font named Lucida Sans and therefore uses another font. Cf. to What fonts do iPhone applications support?
My computer doesn't show the text using Lucisa Sans either, because the version of the font that I have is named Lucida Sans Unicode. All computers doesn't have a font named Helvetica either.
You should use a font stack will fallbacks all the way to the default font sans-serif defined in CSS. That way you know that one of the fonts specified will always be used, and it won't fall back to something completely different:
font-family: Lucida Sans, Lucida Sans Unicode, Helvetica, Arial, sans-serif;
See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family:
You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.
I went with the following fallback fonts:
font-family: "Lucida Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
I want to use Helvetica Neue Condensed Bold on my webpage but it doesn't seem to be working. I have tried this: http://jsfiddle.net/ndFTL/ but it does not work, it simply shows up as Helvetica Neue Bold.
I have Helvetica Neue Condensed Bold installed:
Could anyone please help me out?
After a lot of fiddling, got it working (only tested in Webkit) using:
font-family: "HelveticaNeue-CondensedBold";
font-stretch was dropped between CSS2 and 2.1, though is back in CSS3, but is only supported in IE9 (never thought I'd be able to say that about any CSS prop!)
This works because I'm using the postscript name (find the font in Font Book, hit cmd+I), which is non-standard behaviour. It's probably worth using:
font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";
As a fallback, else other browsers might default to serif if they can't work it out.
Demo: http://jsfiddle.net/ndFTL/12/
I had the same problem and trouble getting it to work on all browsers.
So this is the best font stack for Helvetica Neue Condensed Bold I could find:
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif; font-weight:600; font-stretch:condensed;
Even more stacks to find at:
http://rachaelmoore.name/posts/design/css/web-safe-helvetica-font-stack/
In case anyone is still looking for Helvetica Neue Condensed Bold, you essentially have two options.
fonts.com: License the real font as a webfont from fonts.com. Free (with a badge), $10/month for 250k pageviews and $100/month for 2.5M pageviews. You can download the font to your desktop with the most expensive plan (but if you're on a Mac you already have it).
myfonts.com / fontspring.com: Buy a pretty close alternative like Nimbus Sans Novus D from MyFont ($160 for unlimited pageviews), or Franklin Gothic FS Demi Condensed, from fontspring.com (about $21.95, flat one time fee with unlimited pageviews). In both cases you also get to download the font for your desktop so you can use it in Photoshop for comps.
A very cheap compromise is to buy Franklin from fontspring and then use "HelveticaNeue-CondensedBold" as the preferred font in your CSS.
h2 {"HelveticaNeue-CondensedBold", "FranklinGothicFSDemiCondensed", Arial, sans-serif;}
Then if a Mac user loads your site they see Helvetica Neue, but if they're on another platform they see Franklin.
UPDATE: I discovered a much closer match to Helvetica Neue Condensed Bold is Nimbus Sans Novus D Condensed bold. In fact, it is also derived from Helvetica. You can get it at MyFonts.com for $20 (desktop) and $20 (web, 10k pageviews). Web with unlimited pageviews is $160. I have used this font throughout (i.e. NOT exploiting the Mac's built in "NimbusSansNovusDBoldCondensed" at all) because it leads to a design that is more uniform across browsers. Built in HN and Nimbus Sans are very similar in all respects but point size. Nimbus needs a few extra points to get an identical size match.
"Helvetica Neue Condensed Bold" get working with firefox:
.class {
font-family: "Helvetica Neue";
font-weight: bold;
font-stretch: condensed;
}
But it's fail with Opera.
You would have to turn your font into a web font as shown in these SO questions:
Non-Standard fonts in web?
How to add some non-standard font to a website?
However, you may run into copyright issues with this: Not every font allows distribution as a web font. Check your font license to see whether it is allowed.
One of the easiest free and legal ways to use web fonts is Google Web Fonts. However, sadly, they don't have Helvetica Neue in their portfolio.
One of the easiest non-free and legal ways is to purchase the font from a foundry that offers web licenses. I happen to know that the myFonts foundry does this; they even give you a full package with all the JavaScript and CSS pre-prepared. I'm sure other foundries do the same.
Edit: MyFonts have Helvetica neue in Stock, but apparently not with a web license. Check out this list of similar fonts of which some have a web license. Also, Ray Larabie has some nice fonts there, with web licenses, some of them are free.