Server Side Fonts

Forum Moderators: not2easy

Message Too Old, No Replies

Server Side Fonts

Sutin

2:40 am on Dec 24, 2006 (gmt 0)

I am trying to implement server-side fonts, which are in a CSS book I have, as well as the standard. However, I cannot get them to function. In my domain, I have a directory www.domain.com/fonts/ which contains the font files "cmsy10.pfb" and "cmsy10.ttf". In the css I have


span.curly { font-family: "cmsy10" ; src: url("http://www.domain.com/font/cmsy10") format("truetype", "type-1") }

I have tried various permutations of this (ie, with and without the "truetype") with Konqueror, Opera, Firefox, and Safari. The font only displays correctly in Konqueror, which already has this particular font locally, so it isn't getting it server-side either, most likely.

Any suggestions appreciated.

Brian

mattcg

12:08 pm on Dec 24, 2006 (gmt 0)

Hey sutin, you're going about it the wrong way: first import the font then reference it:


@font-face { 
 font-family: cmsy10; 
 src: url(http://www.domain.com/font/cmsy10.ttf); 
} p { 
 font-family: cmsy10, "Times New Roman", Times, serif; 
}

This should work in Firefox, Opera and IE.

Sutin

8:34 pm on Dec 24, 2006 (gmt 0)

Thanks for the reply. I am definitely getting closer, I think, but I still have not gotten it to work. My test page looks like


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en-US">  <head> 
 <title>Title</title> 
 <style type="text/css"> 
 <!-- 
  @font-face    /* curly font */ 
  { 
  font-family: "cmsy10" ; 
  src: url( "http://www.domain.com/font/cmsy10" ) ; 
  format( "truetype", "type-1" ) ; 
  } 
  span.curly { font-family: "cmsy10" ; } 
 --> 
 </style> 
 </head> 
 <body> 
 <p> 
  <span class="curly">THESE-LETTERS-SHOULD-BE-ALL-CURLY</span>. 
  <br> 
  THESE LETTERS ARE NOT. 
 </p> 
 </body> 
</html>

I have tried with and without the .tif, with and without the format statement, and a few other variations. It still doesn't work right.
Your syntax doesn't appear in by O'Reilly "Definitive Guide". A suggestion for a good book on CSS would be invaluable.

Brian

encyclo

9:45 pm on Dec 24, 2006 (gmt 0)

Welcome to WebmasterWorld [webmasterworld.com] Sutin!

This should work in Firefox, Opera and IE.

Should, maybe - but in reality

@font-face

lacks support in all major browsers except for limited support for .eot files in IE5.5+. Gecko (Firefox etc.) has no support, and the

@font-face

syntax has now been removed entirely in the proposed CSS 2.1 revision.

There are several things which killed font-embedding, but the biggest reason is that the font foundries jealously guard their rights. Loading the .ttf onto your website and offering it for download will most often be a copyright infringement in itself.

The best solution for using alternative fonts for headings etc. is one of the various sIFR methods, which entails dynamically switching standard text with Flash containing the required characters.

jessejump

3:05 pm on Dec 25, 2006 (gmt 0)

Directory name on server - fonts
In CSS - font
?

Sutin

1:01 am on Dec 26, 2006 (gmt 0)

No support was what I was afraid of. What I am trying to do is embed mathematical symbols into text, using open fonts. Oh, well.

mattcg

10:00 am on Dec 26, 2006 (gmt 0)

In that case, you can use a server-side MathML renderer to produce inline images of equations.

engadven

5:43 pm on Dec 29, 2006 (gmt 0)

Or another crude but simple way is www.straight2web.net/fonts which is a free utility that lets you type in graphic font images.

Robin_reala

2:49 pm on Dec 30, 2006 (gmt 0)

You�re going about this the wrong way - you shouldn�t be looking for a font that has mappings from standard characters to symbols (e.g. �a� to the greek lowercase alpha in Microsoft�s Symbol font). You should instead be using a Unicode character reference in conjunction with a (mostly) Unicode-complete font. These are available for most systems these days: Arial Unicode MS for Windows or Lucida Sans Unicode for Mac are examples. Ideally these would be set as the default fallback font for most systems but it�s no biggy to tack them on to the end of your font fallback list. Actually, I believe IE has some problems with this; can anyone else remember what these are?

Once you�ve added your Unicode font it�s just a case of finding out which characters are what and embedding them into your document. There�s a page on unicode.org [unicode.org] that should help you. Once you�ve found out your reference you can either embed it using a direct copy+paste of the character, work out some way of typing it directly (e.g. on my Mac I�ve got a Unicode hex input) or use an entity reference (e.g. α or α). Make sure you�re serving your page as UTF-8 (well, technically any of the UTF encodings) if you�re going to embed the character directly instead of using a reference.

[edited by: Robin_reala at 2:52 pm (utc) on Dec. 30, 2006]

DamonHD

2:59 pm on Dec 30, 2006 (gmt 0)

As a side-note I doubt that there's any problem with using the Computer Modern fonts mentioned by the OP in terms of copyright; I don't *know* their status but I'll bet Knuth has put them in the public domain or something close.

As a further note, I'd regarding importing a font as a potential security risk, which is possibly one more reason why support is patchy and going away.

Yes, I think that using Unicode symbols and/or a bit of GIF output from TeX or similar is probably the way to go, though something vectorised rather that rasterised (eg SVG rather than GIF) might scale a bit better with the text around it.

Rgds

Damon

[edited by: DamonHD at 3:01 pm (utc) on Dec. 30, 2006]