Tuesday, September 19, 2006

[Fonts and different Browsers]

I am really trying to understand a few things about different fonts and how each Browser shows one font differently.

I recently changed a few font settings on my blog. I normally only work with Firefox and wanted the Blog Title, description title, post date and post title in one specific font - Papyrus. The rest I wanted in Verdana. In Firefox as I made these changes it looked exactly the way I imagined. However, in IE I had it did not! I had to tweak a bit here and there to make the fonts for IE acceptable but still not really the font I was looking for. It seems it does not recognize Papyrus as a font. I have left it with the fonts of my choice for now, so anyone interested can have a look at what I mean.

Now comes the weird part. In Safari it is displayed completely differently. Only the blog description is displayed in Papyrus.

I admit I work with tweaking the templates mostly by trial and error but am I doing something wrong here and if I am how can I get the fonts I want to be displayed universally across all browsers.

BTW: it is a real pain working with IE!!


This Post was written by MEETA from WHAT'S FOR LUNCH HONEY?

8 comments:

Anonymous said...

These are the fonts I recommend:
"Verdana, Geneva, Arial, Helvetica, sans-serif" OR "Georgia, Times New Roman, Times, serif" These are the ones most common to all computers.

I don't have Papyrus, so it will show the default font face instead.

If you want to use a different font face you'll could create it as an image. But I'd only recommend that for headings and small areas of text.

Kalyn Denny said...

I don't know enough to offer advice, but I agree that IE is terrible. And according to statcounter, consistently 85% of my readers use it. Why????

Anonymous said...

First, lets talk about Papyrus.

For the love of all things that are good and pure, don't use it!

I am (halfway) joking, use what you like on your own blog, but realize there are growing legions of people who snicker when they see yet another sign, menu, business card or other type treatment set in Papyrus. I make it a game every time I go into a store to 'count the papyrus'. If you try this game at a craft or art fair, you will lose count. There's a blog to track the overuse of it: http://www.iheartpapyrus.com and even the creator has a blog about his "omnipresent Papyrus font": http://nomiddleroad.blogspot.com.

Second, you can set your styles to 'cascade' down a list of alternative font styles until the computer rendering your page finds a font it has. Separate with commas:

font-family: Papyrus, Verdana, arial, helvetica, sans-serif;

So a computer without Papryus will render the font in verdana, if it has it, otherwise arial, and so on.

To use two-worded font names, put them in double quotes-
font-family: "Adobe Garamond", verdana, arial, helvetica, sans-serif;

As far as why IE or Safari isn't rendering the font, it has more to do with how the styles are applied on the page.

cookiecrumb said...

Paul: 'count the papyrus'
ha ha ha ha!
Thanks for a needed snicker.
OK, everybody, back to the real topic.
Sorry.

Meeta K. Wolff said...

Hi everyone.

Thank you for your help.
Littlem Thank you. I knew that these are the recommended fonts. I just was looking for something different. The tip with the image was great though. Looks like I will have to do that. I was trying to take the easy way out!!
Kalyn The majority of my readers come through IE too. I never quite understood that. It's awful and unintuitive .
Paul Papyrus, Papyrus. I really did not know it was so well used ;-) I just liked the idea as it was different. I think from now on I will be "counting the papyrus" too!! Thanks for your advice though.

Anonymous said...

If you're thinking about using images to display your type you could get fancier (and look really advanced) by using a CSS image replacement trick.

You create the fancy type as an image, and use your style sheet to replace text in your html. Having the text in your HTML lets search engines and other things that can't see images read your page.

There's several techniques, and some of them aren't completely accessible to all screen readers, so I won't attempt to go into detail, but you can start here:
http://www.stopdesign.com/articles/replace_text/

Anonymous said...

However, because of the high prices which these louis vuitton wallets
are sold for, an easy solution to this problem is by buying louis vuitton wallet
, such as louis vuitton replica handbags
are designed to look like the original.

123 said...

http://gdbug.info/user/voted/hardysed123/
http://givingthat.info/user/history/bootpoint/
http://givingthat.info/user/history/freeboots/
http://givingthat.info/user/history/replicawatchessales/
http://givingthat.info/user/history/tiffany123/
http://h69h.com/user/history/freeboots
http://haterheaven.com/user.php?login=wangchao46&view=history
http://headline.jp/user/history/wangchao46/
http://heycheap.com/user.php?login=wangchao46&view=history
http://hibban.com/user/history/wangchao46/