Typography in Web Design: Using @font-face

Here's a tutorial on typography in web design and how to use the '@font-face' css rule WELL.

!!! UPDATE !!!

Courtesy of Paul Irish, here's the best syntax to use with @font-face for best performance in all browsers:

************************************

@font-face {
font-family: 'Name_Of_Your_Font';




/* Above we specify the font name to call later */
src:
url('/fonts/yourfont.eot?') format('eot'),
url('/fonts/yourfont.otf') format('opentype');
/* above we show where the font is for Internet Explorer users in eot format, then show where it is for all other browsers in otf format. Internet explorer does not support otf. */
}

************************************
NOTE: yes that '?' after the .eot file url is supposed to be there, not a typo.

I've added comments to show you. The thing is, internet explorer does not support otf or ttf fonts. So convert to eot using same converter, and put it in the same directory, then fill in the blanks! :D

Category:

Howto & Style

Tags:

• use
• any
• font
• with
• your
• website
• html
• css
• font-face
• face
• @font-face
• google
• fonts
• typography
• delicious
• free
• otf

[dazuza95]

do you put this in CSS or in the webpages code and where do you put it? is it under the style tag?

[TechnicallyDevious]

@dazuza95 Don't use style tags or the style="" HTML property. Both will work fine, but on large projects, the code gets convoluted and you can't tell what is affecting what. To keep things organized, I recommend one style.css file that loads on every page with the necessary CSS. If you ned page-specific styles, add another CSS file such as homepage.css and add your custom CSS theme. Them combine them when you're done with the site.

That's how to organize CSS files.

[TechnicallyDevious]

@dazuza95 Also, to include external css, use the LINK tag.

[MrCreationFlow]

omg! i dont mind of insulting or offencing but i tought for my age i knew alot about web but you sound like 13 and you are way way bether than meh "-,- shiiiit!

[TechnicallyDevious]

@MrCreationFlow No offense taken. I am pretty young for a web designer, but it's a really fascinating universe.

[mrnormalnormal]

/watch?v=zGxqH0biqj4

[TechnicallyDevious]

@mrnormalnormal Server error?

[dazuza95]

@TechnicallyDevious cool cheers.

[lukeoca]

Thanks for the video, just what I was looking for, ty pal

[casperisdaman]

@TechnicallyDevious thanks for the response! i had no idea that was the case

[TechnicallyDevious]

@casperisdaman Cross-browser compatibility man. If you use my syntax, it will work in every browser with @font-face support. If the browser can handle true-type, true-type will load, if it can't, it can fall back on open type. Though true type is preferable, some browsers are old-school. :D