This is what I have:
body {
font-family: Frutiger, "Frutiger Linotype",
"Frutiger LT Std", Univers, Calibri, "Myriad Pro",
Myriad, "DejaVu Sans Condensed", "Liberation Sans",
"Nimbus Sans L", "Helvetica Neue", Helvetica, Arial,
sans-serif;
}
That's a whopping 14 fonts! Does using long font stacks like this one have a significant effect on page load time or performance, or is it always a good idea to include as many fonts as needed?
Interestingly, the font stack seems to be from here: http://www.sitepoint.com/eight-definitive-font-stacks-2/ (modified to remove Gill Sans, which makes sense because that font really doesn't fit this group).
It's overkill in a sense (unless you just really, really hate Arial), but knowing a lot of these fonts, I can see the logical assumptions the creator had in mind (not to say that I would do this). Frutiger and Univers are very uncommon, but are nice designer fonts. Calibri is a font shipped since Office 2007 and Myriad Pro has been shipped with Acrobat Reader for ages, so you're covered on Windows machines. There are three Linux fonts (DejaVu Sans, Liberation Sans, Nimbus Sans) to cover your bases there. As I mentioned, Gill Sans was eliminated here, but that font ships with Macs. So does Helvetica Neue.
So, to share in the consensus, it's probably not hurting anything, but unless you want to test it extensively, all you're doing is adding page weight and a lot of unknown variables to your design.
I say it is overkill unless you plan to break it down like I do:
/* Web Safe Font Stacks */
.head {font-family: Georgia,'Times New Roman',serif}
.para {font-family: Verdana,Arial,sans-serif}
.mono {font-family:'Courier New',Courier,monospace}
.fant {font-family: Papyrus,Impact,fantasy}
.curs {font-family:'Apple Chancery','Lucida Calligraphy',cursive}
You are welcome to use this example code in your CSS.
Related
I recently updated my body tag CSS from
font-family: Arial, Helvetica, san-serif;
to
font-family: Arial;
b.c. I assume that all modern browsers support Arial.
Is this O.K. ?
My understanding is that Helvetica & san-serif are only fallback fonts if Arial does not exist.
Font support is related to the user system, not browser. Arial is a pretty-standard font, available in all major Operational Systems.
Also, "sans-serif" is not a fallback font as you stated, but the typographic style of the font you intended to use.
Looking at your code:
font-family: Arial, Helvetica, san-serif;
It means: try use Arial first. If not available, Helvetica. If none of them is possible, then use any the default sans-serif font designated by the system.
For your specific case for extra security try using "Arial, sans serif" because in a worst-case scenario the browser will not mess your layout with a Serif font, which is the default font-family style applied.
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.
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/
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.