Web Design Forums

o0JoeCool0o · 06-08-2008, 21:37

As a web developer, I have commonly had designers request that I build them websites that incorporate custom fonts into their designs. I’ve tried talking them out of it, though I’ve finally come to accept that most designers typically have some method behind that madness and know far better than I what looks good. Still, this doesn’t change the fact that my options are limited to me. I have had to use sIFR to enable my web pages with custom fonts and was not at all happy with the ease of installation, its invasive nature or the fact that it relied on flash.

A friend and I discussed some possible alternatives to sIFR and came up with a technique that combined server-side generated images with a universal JavaScript replacement script. (yeap been done before I know but read on) We called it NiRF, which stands for Native Image Rendered Fonts. Currently, we have released two different versions of our open source code: one in .NET and the other in PHP.

We have found other dynamic text replacement scripts out there, but they all seemed to be presented as a proof of concept, not a solution to the problem we outlined, or just weren't that simple to implement.

Ours literally requires a single JavaScript file included to dynamically swap out all text with an SEO compatible css background image (or an actual image based on your preference). We are dedicated to building a standard method of using custom fonts and building a community around NiRF to make dynamic text replacement easy, done right and have a better chance of expanding into new realms with further plugins and cool text options.

We are relatively new and wanted to get our idea out there and available as fast as possible. We decided the best way to get it up quickly so everyone can use it; was to make the site a dotnetnuke site as I am a .NET developer. That limited us in some standards design areas. The menu, for example, use tables in their markup (*yack*). So before you start yelling about tables and layout on the site, keep in mind that we've modified everything we could to divs and css.

Really, we would love some feedback and to hear your thoughts about the project itself.

Also we have been scratching our heads trying to find a good font to use on the site that goes with it, if you can suggest a font that shows off NiRF's capabilities but doesn't look "gash" please help! Were developers and not designers I'd feel much better getting your opinions.

anyway sorry for the super long post and thx a bunch.

The site is at NiRF (Native Image Rendered Fonts)

spiral · 07-08-2008, 08:48

Nice effort, I am using something similar in a site, and it was a pain to get it to work. The disadvantages I see over sIFR is that the text then cannot be selected/copied and there can't be any link rollovers.

Safari 3.1 came out with css font embedding capabilities, and rumors are other browsers will soon follow, so I'm not sure what the future of fonts on the web will really be...

Limbo · 07-08-2008, 09:50

Shocking selection of fonts though?

This is limited to licensing I suppose, so is not a lot of help - or did I miss something?

o0JoeCool0o · 07-08-2008, 12:58

Quote:

Originally Posted by spiral

Nice effort, I am using something similar in a site, and it was a pain to get it to work. The disadvantages I see over sIFR is that the text then cannot be selected/copied and there can't be any link rollovers.

Safari 3.1 came out with css font embedding capabilities, and rumors are other browsers will soon follow, so I'm not sure what the future of fonts on the web will really be...

I hope font embedding does actually come about that would be great. But there are still advantages to using NiRF like we will be able to implement text rotation dynamic gradient backgrounds etc.

Currently I am making NiRF read the css background-image attribute and overlay the fonted text on top of the image and spit it back. Essentially this will allow you to make dynamic tabs for instance, or whatever else you can think of, jsut by adding a background image. Also I love the hover effects topic you brought up, I think we can probably come up with something for hover effects using NiRF.

o0JoeCool0o · 07-08-2008, 13:00

Quote:

Originally Posted by Limbo

Shocking selection of fonts though?

This is limited to licensing I suppose, so is not a lot of help - or did I miss something?

All the fonts you see on getNiRF.com are FREE fonts I have scavenged from the web. If we ever make money from advertising or the premium service it will go towards buying commercial font packs that everyone will also be able to use without buying the font as you are not getting a copy of the font file we are just creating an image for you licensing should not be a problem.

Limbo · 07-08-2008, 13:06

Well as far as I'm concerned, that's that then - unless I could I include my own library of OT, PS and TT fonts then.

Surely it's a basic requirement. Hence the popularity of sIFR...

o0JoeCool0o · 07-08-2008, 13:14

Quote:

Originally Posted by Limbo

Well as far as I'm concerned, that's that then - unless I could I include my own library of OT, PS and TT fonts then.

Surely it's a basic requirement. Hence the popularity of sIFR...

you bet you can, just download whatever server software you like .NET or PHP and drop it in the Fonts folder. The catch is only TT fonts are supported.(microsoft limitation in GDI+) and from what I hear php has the same limitation. However I use fontlab studio to convert OT and PS fonts to TTF without issues. Also NiRF's premium service feature has an upload Font option if you do not want to host the server yourself.

Limbo · 07-08-2008, 13:31

Oooh.

OK then - this could be a decent alternative. Thanks for clearing that up.

Cheers, Limbo

chazthetic · 07-08-2008, 13:33

Honestly, I sincerely hope the font embed doesn't make it into browsers so we can avoid the at-home-think-I'm-professional designers putzing around with photoshop from making their entire reading copy some sort of grunge font or curlz or something equally awful.

o0JoeCool0o · 07-08-2008, 13:34

Quote:

Originally Posted by chazthetic

Honestly, I sincerely hope the font embed doesn't make it into browsers so we can avoid the at-home-think-I'm-professional designers putzing around with photoshop from making their entire reading copy some sort of grunge font or curlz or something equally awful.

Never saw it from that perspective lol, you make a good point.

o0JoeCool0o · 25-08-2008, 17:42

Just an update: you can now use custom fonts with the :Hover attribute. using a different font or a different color. As well you can now use background images with your custom font. Check it out Custom Font Generator
So to put a caption on an image all you would do is have a class like

.imageCaption
{
font-family: SuperCurlyFryFontofDoom
background-image: url(images/image1.jpg) no-repeat;
padding-top: 50px;
padding-right:50px;

}

Then in html

<div class="imageCaption">This is a caption on top of an image with a custom font</div>

Let me know what you think!

06-08-2008, 21:37	#1 (permalink)
o0JoeCool0o Ninja Join Date: Jul 2008 Posts: 46	DTR for Custom Fonts As a web developer, I have commonly had designers request that I build them websites that incorporate custom fonts into their designs. I’ve tried talking them out of it, though I’ve finally come to accept that most designers typically have some method behind that madness and know far better than I what looks good. Still, this doesn’t change the fact that my options are limited to me. I have had to use sIFR to enable my web pages with custom fonts and was not at all happy with the ease of installation, its invasive nature or the fact that it relied on flash. A friend and I discussed some possible alternatives to sIFR and came up with a technique that combined server-side generated images with a universal JavaScript replacement script. (yeap been done before I know but read on) We called it NiRF, which stands for Native Image Rendered Fonts. Currently, we have released two different versions of our open source code: one in .NET and the other in PHP. We have found other dynamic text replacement scripts out there, but they all seemed to be presented as a proof of concept, not a solution to the problem we outlined, or just weren't that simple to implement. Ours literally requires a single JavaScript file included to dynamically swap out all text with an SEO compatible css background image (or an actual image based on your preference). We are dedicated to building a standard method of using custom fonts and building a community around NiRF to make dynamic text replacement easy, done right and have a better chance of expanding into new realms with further plugins and cool text options. We are relatively new and wanted to get our idea out there and available as fast as possible. We decided the best way to get it up quickly so everyone can use it; was to make the site a dotnetnuke site as I am a .NET developer. That limited us in some standards design areas. The menu, for example, use tables in their markup (yack). So before you start yelling about tables and layout on the site, keep in mind that we've modified everything we could to divs and css. Really, we would love some feedback and to hear your thoughts about the project itself. Also we have been scratching our heads trying to find a good font to use on the site that goes with it, if you can suggest a font that shows off NiRF's capabilities but doesn't look "gash" please help! Were developers and not designers I'd feel much better getting your opinions. anyway sorry for the super long post and thx a bunch. The site is at NiRF (Native Image Rendered Fonts)

07-08-2008, 09:50	#3 (permalink)
Limbo Another turn. Join Date: Feb 2005 Posts: 5,980	Shocking selection of fonts though? This is limited to licensing I suppose, so is not a lot of help - or did I miss something? __________________ CSS Search Engine

07-08-2008, 13:06	#6 (permalink)
Limbo Another turn. Join Date: Feb 2005 Posts: 5,980	Well as far as I'm concerned, that's that then - unless I could I include my own library of OT, PS and TT fonts then. Surely it's a basic requirement. Hence the popularity of sIFR... __________________ CSS Search Engine

07-08-2008, 13:31	#8 (permalink)
Limbo Another turn. Join Date: Feb 2005 Posts: 5,980	Oooh. OK then - this could be a decent alternative. Thanks for clearing that up. Cheers, Limbo __________________ CSS Search Engine

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

07-08-2008, 08:48	#2 (permalink)
spiral dt newbie Join Date: May 2008 Posts: 83	Nice effort, I am using something similar in a site, and it was a pain to get it to work. The disadvantages I see over sIFR is that the text then cannot be selected/copied and there can't be any link rollovers. Safari 3.1 came out with css font embedding capabilities, and rumors are other browsers will soon follow, so I'm not sure what the future of fonts on the web will really be...

07-08-2008, 13:33	#9 (permalink)
chazthetic Fucking Awesome Join Date: Feb 2007 Location: Orlando, Fl Posts: 524	Honestly, I sincerely hope the font embed doesn't make it into browsers so we can avoid the at-home-think-I'm-professional designers putzing around with photoshop from making their entire reading copy some sort of grunge font or curlz or something equally awful.

25-08-2008, 17:42	#11 (permalink)
o0JoeCool0o Ninja Join Date: Jul 2008 Posts: 46	Just an update: you can now use custom fonts with the :Hover attribute. using a different font or a different color. As well you can now use background images with your custom font. Check it out Custom Font Generator So to put a caption on an image all you would do is have a class like .imageCaption { font-family: SuperCurlyFryFontofDoom background-image: url(images/image1.jpg) no-repeat; padding-top: 50px; padding-right:50px; } Then in html <div class="imageCaption">This is a caption on top of an image with a custom font</div> Let me know what you think!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)