font-face support in CSS3

Started by bigzee, 05-02-2010, 21:45:42

Previous topic - Next topic

bigzeeTopic starter

One of the great things about css3 for me is the inclusion and added support for the @font-face tag which previously only worked in IE. No more SIFR and other complex font/text replacement methods needed!

This could be the future for more interesting font usage which previously was limited to only a couple of commonly used and popular fonts!!!

What do you guys think ?  ;D enjoying it's use and availability as much as me!!
  •  


mangoface

I recently had a problem with "Lucida Sans" not working for me in IE 8.0. It works in every damn browser as standard and even older versions of IE, but for IE8 it stopped working. I used the font-face tag in my css and it worked like a charm. I've recently started to use other fonts too, and it's really cool experimenting with all that's available. Thumbs up for font-face!
  •  


cookiemonster

Ah glad someone mentioned this, I heard about this but hadn't had a chance to really use it. Will take a look and let you boys know what i think. Certainly sounds better than the other SIFR and Javascript solutions.
  •  

thelazytrader

#3
The @font-face rule in CSS3 allows you to use custom fonts on your web pages, providing more control over the typography and aesthetics of your website. Before CSS3, web designers were limited to a small set of commonly available fonts, but with @font-face, you can now include and use custom fonts that may not be installed on the user's device.

Here's a general overview of how @font-face works:

1. Font Formats: You need to specify the font format for different browsers to ensure compatibility. Common formats include TrueType (.ttf), OpenType (.otf), Web Open Font Format (.woff), and more.

2. Font Declaration: Start by declaring the font using the @font-face rule in your CSS file. You'll need to provide a font-family name, font source location (URL or local file path), and specify the font format for different browsers.

3. Font Usage: Once the font is declared, you can use it like any other font in your CSS styles. Simply refer to the font-family name in your relevant CSS selectors, such as headings or paragraphs.

It's important to note that when using custom fonts, you should consider performance and accessibility. Custom fonts can add extra load time to your web pages, so it's recommended to optimize them as much as possible. Additionally, ensure you have proper fallback fonts specified in case the custom font fails to load or isn't supported by the user's browser.

Overall, @font-face support in CSS3 opens up new possibilities for web typography, allowing for more creative and unique designs while maintaining browser compatibility.