Log in

View Full Version : Various Fonts


james438
03-16-2010, 03:18 AM
I am exploring different font styles with doctype strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

I don't how important doctype is though.

It seems that most of the doctypes that I try simply are not working in any browser. For example the following all look the same in Opera:

<style type="text/CSS">
.a13
{font-family: Westminster, Helvetica, sans-serif;font-size:24px;color:orange;
}
.a14
{font-family: Tristan, Helvetica, sans-serif;font-size:24px;color:orange;
}
.a15
{font-family: "News Gothic MT", Helvetica, sans-serif;font-size:24px;color:orange;
}
.a17
{font-family: Tahoma, Helvetica, sans-serif;font-size:24px;color:orange;
}
</style>
<span class='a15'>test</span>
Am I writing them out wrong? Do they need to be installed manually? Does anyone happen to know where I can find a list of fonts that Opera recognizes or maybe how to test them? I ask, because I am becoming unsure that I am testing them correctly.
jscheuer1
03-16-2010, 04:07 AM
They are all the same, almost. The size and color are all the same. The way the font-family property declaration works is that if you list two or more fonts, the first one listed that is installed and supported by the browser/OS combo viewing the page is the one that will be used. Most likely that's generic sans-serif for those you've listed, with the probable exception of tahoma, which is a sans-serif font. It differs from the generic sans-serif font (usually arial, configurable in the browser from available fonts) only (as far as I can tell) in the way certain letters are moved closer together. With a word like 'test' you probably won't notice the difference. Try the word 'wall'. In tahoma, at least generally, the two L's will be closer together than in generic sans-serif/arial.

All those other fonts aren't supported in a typical modern Windows/Opera install, so they will all default to arial (or whatever your configured generic sans-serif font is in Opera) in most cases.
james438
03-16-2010, 04:42 AM
Thanks. I'll look into installing those fonts. Other people most likely will not be able to see them, but I will. I was a little vague on how the font-family property worked. I was thinking (mistakenly) that possibly if the three I listed were not compatible they would not work at all.
BLiZZaRD
03-16-2010, 07:18 PM
There is always a default and it is based on what the end user has installed on their computer. If no font is described, the browser displays what is set as system default, usually it is Ariel or Times NR.

To help answer your original Q though, it is probably because you do not have those first on the list installed, but almost every computer (newer the better) has Helvetica installed. Even if they don't you most likely do, and since it is second on the lists, that is what you are seeing.

And no, Doc Type has nothing to do with the fonts seen by the browser. :)
james438
03-16-2010, 07:23 PM
What about meta stuff?


<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
I say this because of the charset part of it.
BLiZZaRD
03-16-2010, 07:52 PM
The meta content for character encoding is just that. It's purpose is to convert characters from bytes. It has no actual bearing on the font choices.

That is to say though that if you choose to use an Arabic font, for example, and have meta encoding for Western languages, then instead of Arabic display you will see question marks. However, the question marks will be in the font you have set in the CSS. :)
jscheuer1
03-17-2010, 02:06 AM
That's all to say pretty much what I was saying. But well put BLiZZaRD, clears up just about any lingering doubts, thanks. I would only take exception to the bit about Helvetica. Once common, the Helvetica font is no longer (As Far As I Know) found on common installations. Because it once proliferated though, it's still around a lot. This is because many folks brought it forward with upgrades and updates, even with new computers, and it may often creep in from other commonly used programs that install it. It is not however (AFAIK) common on new installs of Windows or any of the most commonly used browsers. This is not to say that's good, just that it (again AFAIK) is. Helvetica may or may not be common on other OS's.*

All that to one side (mostly, as I now stand on my soapbox), I think for the most part it's a good idea to design just with generic fonts:


serif
sans-serif
monospace


Though not ideal, if you have the most common generic fonts for these installed, as do the vast majority of folks, this will give you (respectively):


Times New Roman
Arial
Courier New


Anything beyond that (barring schemes that let you enforce fonts, even on systems that don't have them) is speculative. The obvious drawbacks are that some folks will not have these latter three as the defaults for the former three generic fonts, and that it's limiting. But, think about it. If you specify a font you have that others may not, even if you specify a fall back, it probably will not lay out the same. So it's a trade off. By adhering to the lowest common denominator you get fairly consistent layout for like 99% of viewers, and less decisions to make about fonts. You lose fancy text effects, but still have adequate variety for most situations.

That said, a really talented designer (at least as far as text layout goes) will be able to specify any font because they have laid out the text portions of their page in such a way as that differences in the size and/or aspect ratio of the font won't disrupt the rest of the layout.

*This bit about Helvetica is wrong.
BLiZZaRD
03-17-2010, 02:25 AM
Or we could all just use Flash and embed the fonts in the application shown on the page :)

this blog post (http://www.instantshift.com/2008/10/05/21-most-used-fonts-by-professional-designers/) does show (among others that I have read about this subject) that Helvetica is still the #1 font used and requested. I try not to use it, it is just a little too "boxy" for me. But it is very very popular. Odd since it is so hard to say and spell. LOL
jscheuer1
03-17-2010, 03:08 AM
Or we could all just use Flash and embed the fonts in the application shown on the page :)

Funny you should mention that, I was thinking about it because of the association in my mind between you and Flash. That's one of the schemes I was referring to for enforcing fonts. Obviously though, most folks wouldn't want their entire site dependent upon Flash.


this blog post (http://www.instantshift.com/2008/10/05/21-most-used-fonts-by-professional-designers/) does show (among others that I have read about this subject) that Helvetica is still the #1 font used and requested. I try not to use it, it is just a little too "boxy" for me. But it is very very popular. Odd since it is so hard to say and spell. LOL

Ooops, I thought I had tested that, but upon reexamination, I see that my test was faulty. Helvetica is widely supported, but looks (in most cases) just like Arial. So this doesn't really change the overall thrust of either of our remarks, just all that stuff I said specifically about Helvetica.
BLiZZaRD
03-17-2010, 06:44 PM
Awww! John was thinking about me! :p

What is this test you speak of? Did you write a reach script for fonts?

That would be an interesting stat to add to my massive stat tracker... the default font used by a visitor... hmmm... may have to work on that. Think that is information we could capture by a visit? Like the browser and OS are?
simcomedia
03-18-2010, 12:10 AM
Instead of listing out all the font properties separately you may use the font shortcut to list them all in one line. To do this, you must list the properties in this order:

1. font-style
2. font-variant
3. font-weight
4. font-size
5. font-family

For an end result looking like: font: normal small-caps bold 24px "Times New Roman", Times, serif;. You don't have to include the properties you do not use.

In addition, line height may be specified within the font property. To do so, use /line-height directly after the font-size. Where line-height equals the percentage or absolute value. For example: font: normal small-caps bold 24px/1.5 "Times New Roman", Times, serif;.

The fact none of your fonts listed are 'web safe' fonts you'll need to use the @font-face statement, upload all the fonts to the server and include this:

@font-face {
font-family: "News Gothic MT";
src: url('http://www.yoursite.com/nameoffont__.TTF');
}

Plus, you may have to upload multiple versions of the font since IE looks for the .eot format.
jscheuer1
03-18-2010, 12:21 PM
Awww! John was thinking about me!

Well, it's nice to have an old friend 'back in town'.


What is this test you speak of? Did you write a reach script for fonts?

I'm not even sure what that is. All I did was play around with the css and observe how the page looked. At first I visually mistook Helvetica for Arial, that's all.


That would be an interesting stat to add to my massive stat tracker... the default font used by a visitor... hmmm... may have to work on that. Think that is information we could capture by a visit? Like the browser and OS are?

In javascript one may use my:

http://www.dynamicdrive.com/forums/blog.php?bt=180

to get the font-family as determined by the browser for an element that has no declared or inherited font-family rules set. Generally, this would have to be the body. But only if you set no font or font-family rule for it.

The usage for it would be:


var whatever = getStyle(null, 'font-family');

What you do with it after that is up to you.
BLiZZaRD
03-18-2010, 06:08 PM
a "reach script" is something that takes stats based on a parameter to see how many visitors use a certain item. For example, Flash 9 has a 98% reach, meaning it is installed on 98% of the computers connected to the internet.

I will have a look at that in a few days. Looks promising :)

P.S. Its good to be back!
jql999@yahoo.com
03-25-2010, 07:36 PM
Hi Guys,

This is an interesting site that has helped me a lot with font choices.

http://www.typetester.org/
Strouse
03-28-2010, 02:11 PM
http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

Now there is a way around in CSS that lets you use custom fonts, downloadable fonts on your website. You can download the font of your preference, let’s say cool_font.ttf, and upload it to your remote server where your blog or website is hosted.
james438
04-09-2010, 06:43 AM
Hi. After playing around with fonts and learning a bit more about the syntax I wrote a short article (http://www.animeviews.com/article.php?ID=46) on fonts. I am sure there are some errors on it, but the real benefit of it is that it lists all of the fonts from Opera 10.52 on its own line so that they can be compared and the visitor can easily view them on different browsers to see if their particular font is supported.

I tried looking for all of the Opera fonts available, but sadly my Googling could not find a list so I compiled my own. 199 in all.

I am not really sure how I should best format the samples though; color, font-size, etc.
jscheuer1
04-09-2010, 08:00 AM
I don't think there are any Opera fonts. Aren't the ones available in Opera, like any other given browser, a subset (often all) of the fonts installed for the OS?

For example I have Opera 10.51, I'm sure there's no big difference there and your:

QAZWSX Harlow Solid Italic

just looks like ordinary sans-serif to me.
james438
04-09-2010, 08:32 AM
Well, this is sort of a work in progress and I have already found a few typos. For example several "Arial" fonts were accidentally spelled "Ariel". There may be other errors as well, but I started this after having trouble finding lists of sample fonts or lists of the fonts that a given browser accesses. I am still not sure if the fonts are stored in the browser or on the PC or maybe one browser accesses the available fonts on the PC and another has them built in.

I am learning where to look however. In Opera, for example, go to Settings --> Preferences --> Web Pages and then select the default font you want. After viewing these lists of fonts in Opera 10.52, Firefox 3.6.2, and IE8 I counted 199, 127, and 146 available fonts respectively. The fonts look much nicer in IE 8 though. Maybe the browsers all look in the same place, but only accept certain ones...

Some of the fonts listed don't seem to show up in one browser or another. Harlow Solid Italic looks really good on my end and in all three browsers that I mentioned. I don't recall having installed it manually at some point, but I certainly may have and I just forgot. I do that sometimes. Some like "WST_czec" and "WST_Ital" and the like are nearly identical, but the underscore is very different between the different WST_* fonts.

UPDATE: I fixed maybe 10 more fonts. They all look pretty good to me in all three browsers. There are about 12 or less fonts that look radically different depending on the browser. "Modern" looks invisible in Firefox. "Wingdings" looks correct in IE8 only. "MS Outlook" looks very odd in IE 8. I need to get a hold of some other computers to see how this page shows up on browser and computers other than my own.
jscheuer1
04-09-2010, 02:36 PM
Still no Harlow Solid Italic here. I even made up a local page with just that font on it. No browser on my system shows it because my system doesn't have it installed. But you're right in a way, it appears that the browsers either have certain fonts that they have regardless of the system and/or that they pick and choose which system fonts to include. If the latter, this may be based upon (for some browsers) whether or not the system font is true type or not, that sort of thing.