Custom fonts using CSS?

HTML & CSS
1

Hi
Actually I want to know how can I use custom fonts with CSS in my HTML page . Also if I would require some font conversion(I have fonts in .ttf files), please tell me where can I get them. Are there ne free font creator tools around. How can I convert to .pfr & .eot from .ttf.
:confused::cool:

2

Simple answer. You can’t. Yet.

The best thing to do is to specify your custom font and then more generic alternatives. For example:


body {
font-family:"My Cool Font",Verdana,Arial,Helvetica,sans-serif;
}
3

Or to make sure every user sees the font you want them to see, use a graphic. Not ideal, but there you go.

4

Don’t tell me that I can’t. This was implemented in CSS2 & the CSS3 is out on the web now.

Check the site http://www.indianastrology.com Click on the Hindi Link in the menu bar.

5

Just go to http://www.indianastrology.com/hindi/index.htm

6

Don’t tell me that I can’t. This was implemented in CSS2 & the CSS3 is out on the web now.

Please leave your attitude at the door on the way in. :slight_smile:

The fact remains that your link displays in my browser (Mozilla 1.3) as Times New Roman. The only way you can be certain your users are seeing the same font as you is to use a graphic!

And by the way, a lot of CSS2 is unsupported by browsers. CSS3 is almost completely unsupported.

The font given in the example link you posted (“Kruti Dev 010”) doesn’t exist on my system and so was not displayed on my system.

7

Here’s what I see on that page (IE6, Windows 2000):

8

It only happens that you can see it because that specific font is installed on your system, but since most users won’t the page just will be unreadable.
The best thing to do is check what fonts are packaged with common OSes (ie win, linux, mac) for your language, and either pick a common one or just use a list in the font-family attribute as mentionned before.

Or, again, you can use graphics. And by the way i didn’t even know there was a CSS3 lol.

Quentin

9

i didn’t even know there was a CSS3
It’s not finalised yet (some modules are barely started, others are now “candidate recommendations”), and support is mostly non-existent. There’s some really cool stuff in there, but it’s going to be a while before anyone can use it.

See http://www.w3.org/Style/CSS/current-work

10

Custom fonts are covered in our recently-released book, HTML Utopia: Designing Without Tables Using CSS. Internet Explorer for Windows is the only current browser to support downloadable fonts (Netscape 4 did, but that method is now obsolete).

The first step is to download the Microsoft Web Embedding Font Tool and use it to convert the TrueType font to an Embedded OpenType file (.eot).

Upload the file to your server, then use a @font-face CSS rule to assign a font family name to it:

@font-face {
  font-family: "My Font";
  src: url(http://www.mysite.com/fonts/myfont.eot);
}

Now you can use it:

p {
  font-family: "My Font", arial, sans-serif;
}
11

For additional interest the CSS 2.1 Working Draft has abandoned the idea of @font-face and they are probably considering the CSS 3 proposal of SVG, etc.

12

Fonts embedded with Microsoft’s WEFT tool only show to IE browsers, and the tool is easy to use, but quirky. Good luck actually getting your fonts to show on any browser of a user that doesn’t have your specified font on their system. WEFT is quirky for sure.

Another alternative is, for those that have a few spare bucks to waste on making sure all your fonts show up on everyone’s browser is to use this:

http://www.glyphgate.com/info/glyphgate.htm

Glyphgate is an extension of your webserver and is somewhat pricey.

very best,
Stephen

13

In case anyone stumbles upon this old thread as I have…

http://www.fontsquirrel.com/fontface/generator

With the above script I was able to use an awesome font for a myspace2.0 that I am putting together for a college.

Who uses myspace anymore you ask? I don’t know. I guess we at this college and the folks at Phoenix University. PU’s myspace is pretty impressive. Google that.