Custom Fonts.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Custom Fonts.

Post by JellyFish »

Is there a way to use fonts on the server rather then being limited to the fonts on the clients computer?

Is it possible to use something like:

Code: Select all

#selector {
font-family: url("on/my/server.ttf");
}
Is there a way to do this with php or is using images the only workaround?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

I believe your only option is images for custom fonts.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Code: Select all

@font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
}
http://www.w3.org/TR/REC-CSS2/fonts.html#referencing
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

VladSun wrote:

Code: Select all

@font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
}
http://www.w3.org/TR/REC-CSS2/fonts.html#referencing
Does this work in every browser? Is it reliable, recommended? Why don't more sites use this if it's so easy?

Could I use true type font files?
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post by VladSun »

Most of your questions have their answers in the link I posted above.
I don't knwo whether it is supported by all browsers (but it is CSS2).
I think that it is not used by most of the www sites because of:
1. total page download time increases
2. there is a lack of OS support for some font formats.
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
nykoelle
Forum Newbie
Posts: 22
Joined: Fri Aug 10, 2007 9:05 am
Location: New York

Post by nykoelle »

I'm fairly certain that you have to use an image or a custom installed font. However you may not need to use a custom font, there are plenty of system ways to change the way fonts work with css.

body { font-family: Verdana, sans-serif; }

The first value in that statement is the first value the browser recognizes. Then, if it can't find that value, it goes to the next. It's usually practiced to put the actual font name first, then a generic name next. Options for the generic name are:

serif (like, Times)
sans-serif (like, Arial)
cursive (like, Comic Sans)
fantasy (like, Western) (kinda cursive like)
monospace (like, Courier New)

To specify a font name that has a space, such as "lucida console", you have to enclose it in quotes. You could get away with using this if you can find a list of fonts that are installed on most operating systems. I know Windows comes prepackaged with a lot of fonts, you could do something like

body { font-family: Georgia, Bookman, Garamond, serif; } or even add more to the queue, I'm not sure if there's a limit on that or not. My experience is that every browser supports that way to refer to fonts, and there's a pretty big array of fonts you can choose from. Personally, this is how I'd go about it. Maybe install a font and have that as the primary then choose some system fonts as the backup? you could even apply different letterspacing and whatnot make it more polished looking.

(oh and hi, I'm new :D )
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

nykoelle wrote:(oh and hi, I'm new :D )
Hello. Welcome to tHE deveLLopers network. :D
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Custom Fonts.

Post by Chalks »

Sorry for necroing, but this thread has some of the exact questions that I'm trying to get answered in it. feyd, as usual, has a _great_ solution in the above post, as sifr will do exactly what I'm looking for for small snippets of text (headlines and whatnot). However, it should not be used for a large amount of text (so says their website). So, for a large body of text I could use @font-face, but I'm not sure how significant the server hit would be. Does it depend on the amount of text, or on the size of the font file? I can't find much information about it anywhere. Seems hardly anyone uses it (so I imagine it's a bad idea).

If it is _definately not_ recommended to use @font-face, is there a list somewhere of fonts that are prepacked with win XP, Vista, and the common Mac OS versions (I have no idea what those are)? Even better, a list of fonts that are common to all of them?

Thanks. :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: Custom Fonts.

Post by matthijs »

User avatar
Chalks
Forum Contributor
Posts: 447
Joined: Thu Jul 12, 2007 7:55 am
Location: Indiana

Re: Custom Fonts.

Post by Chalks »

matthijs wrote:Bookmarks to the rescue
Sweet, that last link is exactly what I was looking for, thank you! :D
Post Reply