@font-face and font file

I have read articles talking about @font-face.
I have tried many times but it failed.
And finally I’ve found out the problem is from the font file.
I have read a Japanese website and got the font file they use. It works.
I wonder why my file is not working. (I am using it on my Windows)

I’ve read that the font file using should be free licensed.
How to confirm if that is free licensed?
How about if I am using a non free licensed file?
Or it would simply show no effect?

Is there a file size limit for the font file?
The font file I can successfully used is under 2MB.
However, the font file I want to use is around 8MB.

Thanks a lot!:wink:

There are quite a few fonts that are free to use with @font-face. You can use font resources such as this, [URL=“http://www.theleagueofmoveabletype.com/”]this, and [URL=“http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding”]this.

Also note that it might be a good idea to reduce the filesize by eliminating characters you don’t need. To do this, you can download a free type tool such as FontForge’s outline font editor. It’s not the most sophisticated type tool, but perfectly sufficient for these kind of tasks, and it’s free.

How to work with the tool:

You run FontForge, open the font you want to edit. You’ll get the full list of characters displayed. You can select and delete every character you know you won’t need. You then save your font, rename the file and, voila! You have a font with a custom character set with a much smaller filesize.

If you have trouble creating fonts, you can use FontSquirrel’s @font-face generator. It’s pretty good and generates all font files you’ll need. You simply take the font you created, or any font file you like, upload it to the generator and optimise the settings to your preference and submit. You’ll be prompted a download with the files, ready to use for the web.

A good read on the topic:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

and:

and:

http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Actually, with all fonts you need what is called a royalty free license (if it’s a commercial font) or a license for distribution if it’s a free font. Every font usually comes with a license either on the makers website or with the foundry that hosts it. You need to check this information out before you attempt to put a font on the web using @font-face as you COULD be sued for copyright infringement (theft more specifically) by hosting something you have no right too on the Internet. If you don’t know whether you’re allowed to use that font then don’t use it, the criminal implications for you may be severe. I would go with an existing model like Typekit or Google’s API if you don’t know much about fonts or licenses, with free and paid systems that exist they get the necessary license agreements to use them.

There’s no formal file size limit but there’s a recommendation that you should not use any typeface over 500KB… why? because many people around the world still use dial-up and people using mobile devices like the iPhone or Android will end up with a MASSIVE phone bill for browsing to your website (as they literally get charged by the MB/GB). If you want a fast loading page that won’t make your visitors decide to go elsewhere, don’t touch anything that requires an 8MB download. :slight_smile:

File size doesn’t matter :).

You can go to any font downloading site, and most likely if it isn’t there then it’s not free :slight_smile:
Or you could simply contact the author on the matter

Here is a step by step tutorial
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/