homepage Welcome to WebmasterWorld Guest from 54.227.25.58
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
What is the best way for using Custom fonts in headings?
sIFR / @font-face / anything else
mihai2u




msg:1217986
 11:03 pm on Apr 13, 2006 (gmt 0)

Hello

I've been wondering what is the best solution for using custom fonts on webpages.

I've been using 'till now sIFR (Scalable Inman Flash Replacement), but it's limited to the browsers that have flash player installed.
The sIFR is not good enough for replacing great amounts of text (like all the paragraphs on a site).

Any suggestions?

Mihai

P.S. I know that 99.99% of my traffic comes from FF, Opera an IE on Windows only... so this are the only target browsers i'm after.

 

doodlebee




msg:1217987
 1:03 am on Apr 14, 2006 (gmt 0)

Do you mean a non-standard font? Something people don't have, usually?

Images for headings. Don't attempt to replace the fonts in paragraphs - you'll never succeed. The end user *has* to have the font installed on their computer to see your font choice. If it's not there, then they won't see it, and your second choice (or their default) is what will show no matter what you do - unless you replace everything with images - which is a nightmare on so many levels.

Mr Bo Jangles




msg:1217988
 2:00 am on Apr 14, 2006 (gmt 0)

So, I understand the reason for the answer, but supplementary and related question if I may.
I want to use more images (that incude message text) on my important pages(for various reasons, relating to nice design), which means that I'm left to resorting to 'alt' text to duplicate what the image says - but I'll be largely missing out on the SEO benefits I've read of <h1> & <h2> tag text headings.
So is it a case of I just can't have 'my cake and eat it too'?

bedlam




msg:1217989
 3:42 am on Apr 14, 2006 (gmt 0)

So is it a case of I just can't have 'my cake and eat it too'?

Nope ;-)

You need to explore some other image replacement techniques [google.com]. There are quite a few methods now, so I'll just summarize: most image replacement techniques use css to hide the text of an element--such as an h1 or h2--and display a background image behind where the text would usually be seen...

-b

milanmk




msg:1217990
 6:14 am on Apr 14, 2006 (gmt 0)

Don't attempt to replace the fonts in paragraphs - you'll never succeed.

I respectfully disagree. You can show your own font throught the page with the help of CSS.

<style TYPE="text/css">
@font-face {
font-family: TestFontName;
font-style: normal;
font-weight: normal;
src: url(http://domain.com/TestFontName.eot);
}
</style>

Milan

Mr Bo Jangles




msg:1217991
 6:19 am on Apr 14, 2006 (gmt 0)

Ah, 'bedlam' I see - clever!
OK, CSSForum, make way, make way, here I come.

doodlebee




msg:1217992
 3:18 pm on Apr 14, 2006 (gmt 0)

Milan -

i think I see where you're going with that: If the font is installed on your server, then the idea is that you call the font through the CSS and it'll display on the page...

however, the font must be *installed* on the end user's computer (usually, if you provide a link, it'll have you download the font - but in the case of this CSS example, I can't imagine it'd do anything at all, except to ignore it). So, I'm wondering if this will actually work. Do you have an example of this actually functioning? I've never heard of such a thing. If it works, though - what a cool idea!

milanmk




msg:1217993
 3:31 pm on Apr 14, 2006 (gmt 0)

doodlebee, yes it is possible to render your custom font on the fly and here is the live example.

However, i have only tested this site in IE and it works fine. If you wish to use the CSS code then you should check it with other browsers too.

Milan

[edited by: SuzyUK at 12:16 pm (utc) on April 19, 2006]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

mihai2u




msg:1217994
 8:45 pm on Apr 14, 2006 (gmt 0)

Well... I've used the sIFR and it's the best solution I found.

There's nothing to beat it. I don't have access to a Mac, but I wish to know if it is accesible to those users, too.

I used flash replacement for the H1 Heading at the top.

Thanks for your oppinions, guys... Hope the internet will evolve and this kind of replacement will be much more accesible.

Cheers,
Mihai

[edited by: jatar_k at 2:54 pm (utc) on April 15, 2006]
[edit reason] no urls thanks [/edit]

boitmanis




msg:1217995
 5:35 pm on Apr 15, 2006 (gmt 0)

good site <snip>

[edited by: trillianjedi at 6:11 pm (utc) on April 15, 2006]
[edit reason] TOS [/edit]

doodlebee




msg:1217996
 1:42 pm on Apr 16, 2006 (gmt 0)

Milan -

Yes, it works in IE - but I use Mozilla. And I se enothing but a bunch of jibberish on the screen. (You also have at the top that "if you see junk on the screen, click here to download the font and install it")

I think with the issue in question, it's not a feasible option. I know, for one, I don't download anything from sites I don't know - and someone would be hard-pressed to get me to download something and install it on my computer, just so I could read it. I'd just pass over the page completly.

So yes, it works in IE - but not in Firefox, Opera, Netscape and I haven't checked on my Mac yet - but I'm guessing since it doesn't work on these three standards-compatible browsers, the *only* place it's going to work on is IE. Personally, as a development professional, I "fix" IE after designing for standards-compliant browwsers, and I don't know of a single client I've had that would have it any other way.

So to Mahai - again, unless you want to deal with only IE users (which is a very sad choice, indeed), then the only way you're going to get a custom font viewab;e is to provide a download link and have the end user install it on their system - or do everything in graphics - neither is a preferable option. The best would be to pick a standard font, and use the custom for graphics that you would like to draw attention to - like the header and such.

milanmk




msg:1217997
 5:11 am on Apr 17, 2006 (gmt 0)

Does Mozilla support CSS2? If so then it should render custom fonts as specified by Font Descriptions and @font-face [w3.org].

Maybe all the browsers will start supporting it once CSS3 Web Fonts [w3.org] will be implemented.

Milan

spyder_tek




msg:1217998
 7:10 am on Apr 17, 2006 (gmt 0)

Don't forget...

There's also a security setting in IE that allows the user to disable font downloads.

So, this may have an impact on accessibility.

milanmk




msg:1217999
 12:19 pm on Apr 17, 2006 (gmt 0)

There's also a security setting in IE that allows the user to disable font downloads.

Well, there are end numbers of customization options for a user to disable pictures, js, css, flash, fonts, etc. If you spend most of your time in tweaking your pages to support all those settings then you hardly get any time to write contents for your website.

Just take care of the default settings for most of the browsers, design your site that way, and do not bother about how a user can disable that favorite aspect of your website.

Milan

mihai2u




msg:1218000
 9:48 pm on Apr 18, 2006 (gmt 0)

Try this:

[google.ro...]

mihai2u




msg:1218001
 8:55 am on Apr 19, 2006 (gmt 0)

Sry for that previous post... my internet connection is to blame.

Try this:
[google.ro...]

Try it on Mac / Unix systems (with flash player installed), on any browsers, and if you find any "missbehaviours", pls let me know.

I'm new in using this tehnology and wanna find out if it is crossplatform. If it is, I will use it as much as I can... because I hate headings-image-replacement.

Hope that will help you, as much as it will help me.

Cheers all,
Mihai

doodlebee




msg:1218002
 1:38 pm on Apr 19, 2006 (gmt 0)


Does Mozilla support CSS2?

Seriously? If that's a serious question, I can answer that waith a "heck yes - it supports it better than IE does, in fact."

But simply because something *supports* it doesn't mean you can just name any old font that you feel you want to and it'll display on someone else's browser. The bottom line is, if the font isn't on the viewing computer, then it won't be shown (you show your understanding of that simply by the website you posted - it even says at the top "if you see a bunch of garbled text, then download the font here.")

milanmk




msg:1218003
 3:00 pm on Apr 19, 2006 (gmt 0)

Seriously? If that's a serious question, I can answer that waith a "heck yes - it supports it better than IE does, in fact."

Maybe. I dont know because i dont use it. And i have mention this in msg #8.

if the font isn't on the viewing computer, then it won't be shown

It does, at least in IE.

Moreover, that site is not mine! All my websites are in English language. That was just an example for you.

Milan

doodlebee




msg:1218004
 7:22 pm on Apr 19, 2006 (gmt 0)


Maybe. I dont know because i dont use it.

Ooo..that's too bad. It's really better to design sites in standards-compatible browsers (like Mozilla - but there's other options - like Opera, Konqueror, Safari...) and then "fix" IE later. IE's a seriously whacked browser to base your designs on, and it's so much easier to design it correctly by standards and fix IE (truly - I've cut my billable time by quite a bit by doing this) than to design for IE and try to break all other browsers to get it to look right for everyone else.


Moreover, that site is not mine!

Sorry! Didn't know that :)

Jabzebedwa




msg:1218005
 11:43 am on Apr 20, 2006 (gmt 0)

In the past I have used a font embedding tool by MS called WEFT with great success. My use of it pre-dates Firefox, so I don't know how it would render now in that browser. Recently I considered using WEFT again, but see that they have not done any development of it since 2003, so I wondered if CSS had replaced the need for the tool. I see from this thread that CSS has not replaced the need for such a tool.

Has anyone out there used the tool for embedding fonts recently? And if so, how does it render in Firefox?

To avoid putting the URL of WEFT here and causing work for the moderators, just go to Microsoft's site and search "weft".

mihai2u




msg:1218006
 10:26 pm on Apr 20, 2006 (gmt 0)

Hello everybody

I've done a little researching and found this:
[google.ro...]

I took screenshots of a page using sIFR and found out that it successfully displays on almost every known browser (except netscape 4, which is not is use anymore) on every platform (linux/mac/win).

I wish this thread to be used by more and more sIFR users. I've succeded putting my first flash text replacement in as much as an hour :) so.. everybody could do it.

Good Luck!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved