Welcome To Web-Talks.com
The Webmaster Forum

joshchan214 · 06-26-2008, 08:51 AM

Hi all,
how do i use external fonts when coding? Meaning, can i use fonts other than times new romans, and arial and verdana? like comic sans or those downloaded from urbanfonts.com?

Thanks.

Aziz · 06-26-2008, 09:39 AM

you'll have to add the font to the website root folder
or a sub-folder (doesn't matter - but must be inside root)
and this content might help:

Quote:

@font-face

The @font-face at-rule is used for a variety of purposes, but essentially it is used to specify the correct behavior when a font is not available locally.

In general, the @font-face at-rule is used for this purpose. This follows a form similar to this @font-face {property: value; property: value}.

There may be any number of @font-face rules in a stylesheet.
Font selection properties
font-family

This specifies the name of a font that you are describing. For example, @font-face {font-family: Arial}. Multiple font families can be specified; e.g., @font-face {font-family: sans-serif, Arial}. It takes the same values as
font-style, font-size, font-weight, font-stretch, font-variant

This specifies the type of font that is being described.

They take the same values as their equivalent normal properties, except they can take a comma-separated list.

For font-style, font-size, font-stretch and font-weight, however, the 'all' value is also valid, which indicates that all values are matched.

However, values that relate to another value are not valid (e.g., smaller and bolder), and neither are the font size keywords 'large', 'small', etc.

E.g., font-weight: 100, 300, 500, 600, 700, 800, 900.

The initial value for font-size, font-weight and font-style is all. For font-variant and font-stretch it is normal.
Font retrieval properties

If it is important that a specific font is used in viewing your document, you should use the properties that specify its location and characteristics.
src

The src property specifies the location of a font: It follows this basic syntax: src: url(address1). Thus to be specify that you can find the 'foo' font at Get the 411 on Anyone with Free White Pages, People Search and Online Directory, you would use @font-face {font-family: foo; src: url(www.foo.com)}.

If you wish, you can specify the format of the font. E.g., @font-face {font-family: foo; src: url(Get the 411 on Anyone with Free White Pages, People Search and Online Directory) format("footype")}. To be specify several uris for browsers that support different font types, you separate them with commas. E.g., @font-face {font-family: foo; src: url(Get the 411 on Anyone with Free White Pages, People Search and Online Directory) format("footype"), src(foo2.com) format("foo4")}.

Note that the format must be in quotes.

Finally, you can specify the name of a local font to match. E.g., to specify that when an element is specified as being in Times, Times New Roman should be used, you would type:

@font-face {font-family: Times;
src: local("Times New Roman")}

Note again that the font name must be in quotes, even if it doesn't include whitespace.

Here's another example, which specifies the location of italic Foo.

@font-face {font-family: Foo;
src: url(http://www.foo.com);
font-style: italic}

Since font-size is initially all, the font will be used at all sizes; but will not be used for small-caps or stretched text, since font-variant and font-stretch are initally set to normal.

from RichInStyle.com CSS2 tutorial - @font-face

ardit · 06-27-2008, 10:45 AM

I needed to know this too

thanks aziz, rep given

Ikki · 06-27-2008, 04:40 PM

The @font-face is a long-awaited rule for web developers. However, I wouldn't recommend its use ATM as it isn't fully supported by many web browsers.

I made a small research about it and published a post at my blog. Hopefully this feature will be widely available on all browsers when CSS3 implementation is finally released.

joshchan214 · 06-28-2008, 01:01 AM

oh, then i better not use it till the its fully supported. thanks anyway.

06-26-2008, 08:51 AM	#1
joshchan214 Contributing Member Join Date: Apr 2008 Location: Perak, MY Posts: 1,097 My Mood: Credits: 23	how to use external fonts? Hi all, how do i use external fonts when coding? Meaning, can i use fonts other than times new romans, and arial and verdana? like comic sans or those downloaded from urbanfonts.com? Thanks. __________________ Corevor - portfolio + blog

06-27-2008, 10:45 AM	#3
ardit Pro Drop Kicker Join Date: Apr 2008 Location: Im 2-64 my home Posts: 813 Credits: 0	I needed to know this too thanks aziz, rep given __________________ All My Sites GTA Gamers \| Cool Directory \| Football Forums Hot Electronics \| Get-Firefox \| Make Easy Money I Hate Stupid SiteTalkZone The Ardit

06-27-2008, 04:40 PM	#4
Ikki Contributing Member Join Date: Apr 2008 Location: Caracas, VE Posts: 446 My Mood: Credits: 11	The @font-face is a long-awaited rule for web developers. However, I wouldn't recommend its use ATM as it isn't fully supported by many web browsers. I made a small research about it and published a post at my blog. Hopefully this feature will be widely available on all browsers when CSS3 implementation is finally released. __________________ Rauru.com \| Web Development Blog

06-28-2008, 01:01 AM	#5
joshchan214 Contributing Member Join Date: Apr 2008 Location: Perak, MY Posts: 1,097 My Mood: Credits: 23	oh, then i better not use it till the its fully supported. thanks anyway. __________________ Corevor - portfolio + blog

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Free Font Sites	Garala	Web Design and Graphics	0	04-08-2008 09:01 PM

Welcome To Web-Talks.com The Webmaster Forum

Welcome To Web-Talks.com
The Webmaster Forum