...

View Full Version : is there a cross-browser way to display a custom font?



canadianjameson
12-30-2005, 11:17 PM
Hey all.

I'm doing a webpage for a friend who is an artist, and she has a particular font she wishes the text of the web page to be displayed in.

what code would I use to make a font avaliable for users, and have it used to display the text?

also, since i would like it to be cross browser, if there are different syntaxes for the different browsers... toss them all over and i'll use JS to determine which browser and use that code accordingly.

Thanks,
Jay

_Aerospace_Eng_
12-31-2005, 12:03 AM
SIFR (http://www.mikeindustries.com/sifr/)
The above is probably your only possible solution.

harbingerOTV
12-31-2005, 01:23 AM
http://www.alistapart.com/articles/dynatext

I haven't tried it but it seems to be that if the user doesn't have javascript or images turned on than the effect won't happen but it will write the text as normal. Since it also says that the element can be id's and classes, it shuold be real easy to modify for your needs. Just slapping the 'filter' to apply to your <p class="content"> or whatever.

rmedek
12-31-2005, 03:01 AM
I've tried them both and I have to say that SIFR is the clear winner. I hope she's not set on using it for body text, though— that'll slow your pages down to a crawl, and most likely break most browsers.

I think really you should just sit her down for a good old-fashioned "the web is not print" story, or build the site in Flash.

canadianjameson
12-31-2005, 06:10 AM
*Shudders* eurgh... total flash site, i think i'm going to have nightmares.

k, so the font is out because she would want all the text on the site to be in the same font, especially the body text.

the only option left is to make her choose a web-ready font. can someone provide me a url to a page with examples of all of the web fonts? i havent been lucky finding one on google but it has to exist. knowing her she'll want to choose.

rmedek
12-31-2005, 06:38 AM
Web fonts are just essentially fonts you are certain are installed on any computer. In other words, any font can be displayed as text in an html page, as long as it's installed. It's more of a cross-platform thing rather than a cross-browser thing.

Here's your page: http://www.accordmarketing.com/tid/archive/websafefonts.html

A major factor in the attractiveness of a web font is how it's laid out. Check out ALA (http://alistapart.com) for some beautiful typography (IMO).

canadianjameson
12-31-2005, 07:29 AM
so if I wanted to use the font Trebuchet, as described in the list you provided... the exact code be <font face="Trebuchet MS">, right?

and can I be guaranteed that all users would see that?

rmedek
12-31-2005, 07:39 AM
so if I wanted to use the font Trebuchet, as described in the list you provided... the exact code be <font face="Trebuchet MS">, right?

FOR THE HOLY LOVE OF GOD, MAN… you should know better than that. The <font> tag?! :D

Use stylesheets:


body {
font-family: "trebuchet ms", verdana, arial, sans-serif;
}

The browser will try the first one first. If it doesn't have that installed, it tries the next, and so on until it's at "sans-serif" which just means the browser's default sans-serif font.

Using that, you could always try any fancy font you want:


body {
font-family: "fancy pants font", "trebuchet ms", arial, sans-serif;
}

If the browser doesn't have "fancy pants" installed it'll try Trebuchet next and then arial, etc., etc.

I usually do something like this for my fonts:


body {
font: 69%/1.8em "lucida grande", verdana, arial, sans-serif;
}

Which put text at 69% of 1em, with a 1.8em line-spacing, and tries Lucida Grande first for my Mac friends.

Check out all of the font commands here: http://www.w3schools.com/css/css_reference.asp#font

canadianjameson
12-31-2005, 07:41 AM
hhaha i love it, i was just about to ask you what was wrong with this code:

BODY {
font-family: Trebuchet MS 12px;
}

lol

great minds i guess.

question: I'm going to use as much CSS as I can on this page... but should I only use it for re-occuring properties, or every single property?

also, should I still be using tables, or are DIV's really the way to go?

canadianjameson
12-31-2005, 07:46 AM
its odd, the font size wont work...

body {
font-family: "trebuchet ms", verdana, arial, sans-serif;
font-size: 10px;}

rmedek
12-31-2005, 07:49 AM
It depends on if you are serious about this whole web thing, really. If it's a one-off, personal site I say do whatever's easier.

But really, separation of style and content is where it's at. It's not about divs versus tables or re-occuring versus one-time properties—it's about keeping the different elements of your website separate so they don't get in the way of each other.

When I coded with tables, I was a 92-pound weakling. Since I switched, I've gotten in better shape and I'm more attractive. Smarter, too, I'm pretty sure. The ladies love it. :D

Make sure the font-size is affecting the right things. Are you putting the text in a <p> tag? then you'll need to do this:


body {
font-family: "trebuchet ms", sans-serif;
}

p {
font-size: 10px;
}

My earlier example above uses percentages, so I don't need to declare a specific size on <p> elements or anything else, unless I want something other than the default em size.

canadianjameson
12-31-2005, 07:52 AM
i asked about the DIV's because i'm intimidated by the positioning of them.

i once had a webpage completly perfect on my screen and I went to show it off at a friends house... he had a different resolution than me and EVERYTHING was out of place, overlapping, etc.

:(

*crawls under sheets*

thats what I'm really scared of... its designing a page with either absolute or % widths & heights, and then it looking screwy on other peoples comps. its like beer goggles for coding

rmedek
12-31-2005, 07:59 AM
thats what I'm really scared of... its designing a page with either absolute or % widths & heights, and then it looking screwy on other peoples comps. its like beer goggles for coding
Well, sure, but just like beer goggles, it's a mighty good time up to that point.

CSS just takes practice and a different train of thought, I've found. I'm certainly no expert, either… One of the tricks I've picked up is to design for change right away rather than at the end. For example, I tend to overcode things like headers and navigation knowing I can change them later if I want, or that a different screen resolution might stick them somewhere else.

canadianjameson
12-31-2005, 08:03 AM
another hesistation of mine is as follows, and you may be able to alleviate my fears about this as well as about the DIV positioning on a page with regards to different screen resolutions and aesthetics.

If I dont specify a font size and the user has their "text-size" option at anything other than what I have on mine, wont it screw up my text & object allignment, therefore ruining any effect I have triend to create by placing text and objects where they are?

canadianjameson
12-31-2005, 08:07 AM
I tend to overcode things like headers and navigation knowing I can change them later if I want, or that a different screen resolution might stick them somewhere else.

what do you mean? do you mean you can actually specify that "if this resolution, place here". ? how does overcodding help prevent resolution mishaps?

i'll be back on early tomorrow morning. thanks for the help to date.

do you know of a short, clear, and concise tutorial on proper DIV placements to avoid these issues?

_Aerospace_Eng_
12-31-2005, 10:30 PM
It depends on the type of layout you are trying to achieve. A bad thing about people who are just starting out using divs (layers as DW would call them) is they "think" they are doing it the right way but absolute positioning is NOT the way to go. This will give you problems as you have already discovered on your friends resolution. As for the font thing, if you don't declare one then your layout would be fine as long as you don't set heights to anything. Sure set a height to a div that isn't going to have text in it but if its going to have text don't set a height. The user knows that the layout will change if their font-size gets bigger. I coded an example for someone recently using images to create a bordered look. You can resize your text as much as your want, and it will be fine. Setting a font-size in pixels or pts won't let Internet Explorer users resize the text, however any other browser will so use ems. I find that 0.85em or 0.9em seems to be good as a body font. You can embed a font into a page but its IE only, its called WEFT and not even sure if it works anymore. Since that isn't a cross browser solution I wouldn't recommend it. This site (http://bonrouge.com/3c-hf-fluid-lc.php) has many basic layouts that will help you because many of these layouts are quite common. His site has a lot of other useful CSS stuff.

canadianjameson
01-02-2006, 05:28 AM
thanks, i bookmarked it.

i noticed in one CSS explanation they used
html {height:100%;}

i've never seen this before. why is this used?

_Aerospace_Eng_
01-03-2006, 09:10 AM
In order to set a div to a min-height or height of 100% its containing elements need to be set to a height of 100% notice that the body was also set to 100% height. In FF and some other browsers like Opera, the html tag is an element. IE considers it not to be. If you are in quirks mode meaning no doctype or having a partial doctype, somehow the html and body are set to 100% height by default.

canadianjameson
01-03-2006, 07:34 PM
i get it now :D

as you seem to know what you're doing, maybe you could offer me a quick helping hand here: http://www.codingforums.com/showthread.php?t=76029

the last two posts are somewhat pressing and the guy who was helping seems to have dissapeared



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum