Typophile

Embedding fonts in web pages?

seekay

Did some searches, Im actually baffled as to which search terms to use...

How would I embed unconventional fonts into a web page, much like the headings on this forum are? I want to use various Opentype fonts in web page that are selectable, and spiderable by search engines like Google. Even if the viewer doesnt have the font installed on their system, I want them to be able to see it. Is this possible?

You should google search "sIFR". It is the only way to really do what you want if the font is very unique.

SiFR is the only generally usable way today that works with most browsers.

There are movements afoot to allow HTML/CSS to either refer to regular desktop fonts on web servers (supported by Safari and perhaps Chrome) or to EOT fonts on web servers (supported by Internet Explorer).

T

I don't understand how this works.

Does the web page require to be displayed in a certain font in order to be viewed by the viewer. Then, a freely distributed font is downloaded to be then installed by the user. After the font is installed, only then the web page can be viewed?

Or does this process occur automatically?

Hmm, okay, for all you Flash people: How does sIFR compare to using Flash document featuring:

- Dynamic text
- Embedded characters
- Configured as selectable
- Configured to be rendered as HTML

I just used this method to create text on a webpage that behaves much like regular text. Apparently Google (and others, including Yahoo!) are now indexing .swf files.

SiFR is a very smart tool. Your html source-code is not flash but just xhtml:

From the sIFR website:

Your (X)HTML document starts off with its standard styles. Then, once sIFR determines it will run, your html and body tags are classed with “.sIFR-hasFlash”. This is done in order to accomplish two things: 1) to hide your browser text as the method is running, and 2) to create “decoy” styles for the text you are replacing. Decoy styles are never seen by the user. They are meant to adjust the space the browser text takes up before the measurement and replacement occurs.

http://www.mikeindustries.com/blog/sifr/

So, there is no need for the search-engine to index flashfiles...

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
http://www.sprachkasse.de/blog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

SiFR is an amazing hack. But it is a hack. There are serious performance issues for doing large amounts of text with it. Even some fo the co-inventors of SiFR have said publicly that they just see it as a stop-gap until something more reasonable is implemented.

@Go: Yes, it's all automatic, when it is supported.

T

On Flash, i think the best way is to embed the characters that you're going to use! Of course... for Dynamic texts and so. For static text there is no need for embed... so... the really best way... is to avoid! ehehe maybe adobe and the html developers and so will find a way to embed the font on the website without performance issues!

Joel Santos // yrmk
sound & visual

SiFR is flash, generated by a javascript-solution that works fine for headlines. There is also image-based generated solutions with php etc. but this is also just working for headlines and shorter texts.
For longer texts I don't think there is no other way to go than flash, if you want a bit more typographic and anti-aliasing control than in html based text. To get text in flash avalible for search engines, the best way I think is to add the text as a comment in the html document that holds the flash file.

"How does sIFR compare to using Flash document featuring:"

sIFR, for many, is less annoying and more accessible/usable that doing the entire site in flash.

Captured from web.archive.org on 20 Jul 2012. view this capture