Hi, i have just spent some time searching for a list of supported html / css fonts on google and i am very surprised that i cannot locate a table / list of the fonts.
Can anyone suggest any sites that will demo this, thanks in advance for your help…
Should have done more searches, lots of lists out here.
Here are two of them:
[font=verdana]HTML and CSS don’t have anything to do with “supporting fonts”. You can specify any font you like, and if the person reading the web page has that font installed on their computer then it will be displayed*. If you list a ‘stack’ of fonts, the first one that the person has installed will be used. Additionally, you can use “web fonts” which enables you to either use pre-set fonts on existing websites (such as Google Fonts) or to convert and upload your own+, and then all modern desktop browsers will download and render that font.
If you want to know which fonts are “web safe” (ie which fonts you can reasonably expect all users to have installed) then logic_earth has given you a good couple of links there. But it’s worth noting that you can quite happily use fonts that are not web safe, as long as you don’t mind if not quite everyone sees it in your preferred font (but that, surely, is better than no-one seeing it in your preferred font!).
* except that some browsers won’t render graphical fonts such as Wingdings.
+ subject to licensing restrictions.[/font]
If you are using a font on your site that not many people are likely to have on their computer, you can also supply the font along with the web site via CSS @font-face. If you visit a site like FontSquirrel, they have a lot of font packages that are ready for the web—meaning that you can upload them and link to them in your CSS file. That way, you can be pretty sure most people will see the desired font.
Thanks for all of your responses… can i ask why they are grouped in certain categories, for instance:
font-family: Arial, Helvetica, sans-serif;
font-family: ‘Courier New’, Courier, monospace;
What are they in certain groups, how come it’s not font-family: Arial, ‘Courier New’, sans-serif, monospace;
[font=verdana]The whole idea of a “font stack” is to give a first preference, second preference, third preference and back up choice of font to be used.
The last one should always be a “catch all” generic style – usually serif, sans-serif or monospace – which means the browser will use its default font for that style if none of the listed fonts are available.
If you choose your preferred font, you’re going to want any of the alternatives (to be used if your preferred font isn’t available, remember) to be as close to it as possible. If your preferred font is Arial then it would be odd to choose Courier New or a generic serif font as substitutes, because they look completely different, and that will affect the look and feel of your website significantly.[/font]
Thanks Stevie D, that was explained very well.
I now understand that they are grouped into “similar” fonts.
I hope you don’t mind, but can I ask a few further questions on this:
Q1 - not that I will BUT will they still work if you mixed different fonts up a stack (silly question)
Q2 - is there a limit on the amount of fonts you can list in a stack
Q3 - you mentioned, “catch font” - what does this mean, does every browser have a default font… can you explain this a little further please
Yes. The browser will pick through them one by one until it finds a font it has in its system. The browser doesn’t care about how the fonts look. The reason for grouping similar fonts is that you have better control of how the page will look. For example, some fonts are larger than others, and some have greater line heights than others. Your site may not look so good if it is rendered with a larger font than you planned for in your design (although that shouldn’t matter too much if the site is well designed).
Q2 - is there a limit on the amount of fonts you can list in a stack
No. In then end, only one font will ever be used by the browser.
Q3 - you mentioned, “catch font” - what does this mean, does every browser have a default font… can you explain this a little further please
If you didn’t specify a font at all, the browser will just choose one itself. That’s the browser’s default font for rendering pages. It will have a default serif font and a default sans-serif font. So even if you don’t declare a font, it’s worth at least specifying serif or sans-serif as your preference.
Thanks for all your help guys, much appreciated… I didn’t know the whole Serif VS San Serif structure… it all makes sense to me now, thanks for your help