As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am searching for a list of fonts I can use in CSS. Since these fonts may be copyrighted, which fonts should I use that are available across Windows (as of XP), Mac OS X and, say, Ubuntu 8.04?
I don't want to rely solely on the newer OSs.
A great bonus would be if the same fonts existed on mobile devices.
See this list of browser safe fonts.
It's Windows+Mac centric, but still applies. They do include a linux distribution screenshot, as well.
Here's some required reading:
Safe Web Fonts
Common Fonts
Also some related questions on StackOverflow:
What is the most readable, appealing font?
Font (typeface) selection for the Web?
All about choosing the right font for a website
The only 100% safe way to declare fonts is to use generics as fall backs.
The generics are:
'serif' (e.g. Times)
'sans-serif' (e.g. Helvetica)
'cursive' (e.g. Zapf-Chancery)
'fantasy' (e.g. Western) (wtf?)
'monospace' (e.g. Courier)
From the W3C
All five generic font families are
defined to exist in all CSS
implementations (they need not
necessarily map to five distinct
actual fonts). User agents should
provide reasonable default choices for
the generic font families, which
express the characteristics of each
family as well as possible within the
limits allowed by the underlying
technology.
Fonts such as Arial and Verdana which many web designers take for granted may not be present on Linux browsers (even firefox on centOS from experience). Apple has most of the Microsoft fonts but there are some which are absent.
Typetester!
Features:
compare fonts side by side;
choose from the list of safe fonts, win fonts or mac fonts;
all from the browser.
Just remember: Friends don't let friends use Comic Sans.
(Seriously, you've got good answers above already...).
Verdana is a good one.
CSS allows you to use any fonts installed on the system. font-family allows you to list many fonts. If the parser doesn't find the first one installed on the system, it moves onto the next one. That's why most font-family definitions cascade down to sans-serif or serif. If the browser doesn't have any of your fonts, it uses the default serif, sans-serif, or monospaced font, etc.
If you're a sucker for typography, unfortunately until CSS3 fonts take off you're going to have to live with serving up all the good fonts to your Mac users, since Mac OS X has a far greater selection of great fonts installed than Windows. I get a little depressed when I load up my sites on Windows and I'm greeted with a pile of rigid, aliased fonts.
Here's a guide...
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As for mobile, all I can say is good luck! My daughter got my Blackberry from me for five minutes and changed my background, ringtone, and now all my fonts are cartoon fonts.
Here's a list of iPhone fonts, but it maybe slightly out-of-date. http://daringfireball.net/misc/2007/07/iphone-osx-fonts
You could use sIFR for headers and not worry about web-safe fonts at all. Take a look at the example page. It's pretty awesome.
Arial is my "safe" font that I use all the time.
But I've been using Trebuchet a lot lately. It's common enough that practically everybody is going to have it. It's used all over the place at StackOverflow, FeedBurner, and a lot of other popular sites these days.
But, just in case the user doesn't have it, I'd use CSS like this (just like StackOverflow has it)...
font-family:Trebuchet MS,Helvetica,sans-serif;
I'd recommend using web fonts if you desire layout consistency and complete control over the fonts rendered for your site. Here are some web font services to check out:
WebINK - No longer offered
Google Web Fonts
TypeKit
Fonts.com
All of these services provide thousands of high-quality fonts. Google fonts are totally free. WebINK and TypeKit both require a subscription model. I've never used fonts.com but they probably have a similar model.
Here's a nice article about typefaces for the web.
A lot of fonts are available from modern browsers. However, keep it simple and a little large. Also, use contrasting colors for easier reading.
While having such a list is certainly useful, you should also take advantage of the fallback mechanism of CSS. For example, you can list Consolas, Courier New, monospace in your font-family attribute and get the best possible match on that device.
The last item on each font-family list should be a neutral one such as "sans serif", "serif", "monospace", etc.
This way, your designers can use fonts they think best, as long as there's a reasonable downlevel experience.
See, for example w3.org's guidance
You're pretty save with Helvetica/Arial (yes, I know there's a difference!) or Verdana for sans-serif or Georgia or Times for serif. In your css you can just put a list in your preferred order. You should always end in a generic font-family to cover all your bases.
My sites usually look something like this:
font-family: Helvetica, Arial, sans-serif;
font-family: Georgia, serif;
If you want to get cute and fancy with your typography, you should look into SIFR, which uses flash to embed special fonts.
Related
Many popular websites (including Stack Overflow, GitHub, Medium and Wordpress) have adopted the usage of the system font stack.
What is the system font stack?
Why should I use the system font stack?
What should the system font stack look like?
There are many different sites with different versions of the system font stack, but it is not obvious which one is most up-to-date and has the most compatibility with modern devices:
systemfontstack.com
CSS Tricks: System Font Stack
Related questions:
Does specifying “Roboto” in a “system font stack” actually do anything?
How to specify the system’s default serif and sans-serif font-family?
What is the system font stack?
The CSS font-family property takes a list of fonts and uses the first one which is available to the browser.
A (not the) system font stack is a list of fonts which are:
likely to be installed on lots of computers (with the goal being to have at least one font in the stack available on every computer that might view the website)
similar in appearance so the design is consistent (e.g. similar letter widths, etc)
As I said, this is a "a" not "the" matter. A list of system fonts similar to Ariel is going to be different to one similar to Times New Roman.
Why should I use the system font stack?
To get a consistent appearance across different devices without the bandwidth or time implications of loading a font file from the Internet.
What should the system font stack look like?
That's a matter of opinion.
While it is backed up by science (people do research on the availability of fonts across devices), which fonts you want to use and decide are similar enough for your purposes isn't cut and dry.
1. What is the system font stack?
This generic font family lets text render with the default user interface font on the platform on which the UA is running. A cross-platform UA should use different fonts on its different supported platforms.
W3C CSS Fonts Module 4: system-ui
2. Why should I use the system font stack?
The purpose of system-ui is to allow web content to integrate with the look and feel of the native OS.
W3C CSS Fonts Module 4: system-ui
3. What should the system font stack look like?
If you don't need legacy browser support (mainly IE), system-ui covers all modern browsers except Firefox. For Firefox, you can still use -apple-system for macOS and iOS with something like font-family: system-ui -apply-system;.
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.
I'm using Dreamweaver for many years which gives some suggestions to put font-families in CSS.
Is it not a font-stack? What is new in the term "CSS Font Stack"
What I know is, that one defines multiple font families to keep the typography consistent if any font is not available in system.
You are correct - You define multiple fonts and the browser will simply choose the first one in the list that you have on your system.
A font stack allows you to define multiple fonts to essentially provide a better experience for users.
Using the CSS font-family property, you can define multiple fonts, like so:
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
This reads from left to right, if the user does not have Arial then font-family will fallback on Liberation all the way down to the most basic sans-serif (select any sans-serif font if the aforementioned fonts are not found).
font stack, is just a list of fonts (of font families), if the first is not available to the browser, then the second is used etc..
your picture shows 6 font stacks, you could choose from
there's nothing new, this has been the standard way to set fonts for some years now.
You are correct in your thinking. The pulldown menu has 'Web Safe' font stacks to choose from. If you use any of them your text should render fairly consistently on all devices and on all browsers.
The trend now is to use Google Fonts or some other imported or loaded fonts and thereby control what is rendered. Even then it is recommended to also include one or more alternative standard fonts in a font stack in case your visitors cannot load Google Fonts or the other choices you provide.
I have a design and Myriad Pro is required. This isn't a problem. The issue is that in Photoshop they have used 'Bold Condensed'. I am not sure what this is called, I think it is one of the varients of Myriad Pro. What is the best way to emulate this on a website?
Thanks.
FontSquirrel is your best resource. Their "#font-face generator" creates code that will work with all the modern browsers.
What they do is well-explained but behind the scenes it's pretty complicated. You can read up on the CSS aspects on Paul Irish's blog.
Edit
I just realized that nobody has answered your real question...
1.) Myriad Pro is a family of fonts, implemented as a collection of files, with names like Myriad Pro.otf, Myriad Pro Bold.otf, and so forth. (The actual names are OS-specific.) Myriad Pro Bold Condensed is one of those files. I don't know if it comes with the standard package or whether it costs extra.
2.) You cannot "emulate" this. You can either use the actual font on your webpage (via the #font-face embedding method described above), or create a graphic. The designers probably expect you to create graphics, because designers [tirade deleted] when it comes to implementation.
3.) As has been pointed out, embedding supposedly requires an appropriate license, and I don't know if you can get such a license for this particular face. ("Supposedly", because [tirade deleted], but I'm not a lawyer.)
The 100% guaranteed way is to render it to an image.
CSS3 supports font-face but this will not give you wide support.
#font-face
{
font-family: 'Myriad Pro';
src: url('Myriad-Pro.ttf');
}
You will also need to check legal agreements to see if they allow embedding this font in your pages.
You could also try Shaun Inman's sIFR3, although CSS3 is likely to be the better alternative.
However, see license first. In many cases you can not use #font-face.
Here is post on adobe about myriad license for web.
http://forums.adobe.com/message/3654436