I’m sure this has been discussed throughout the interwebs already but it’s a pretty neat trick I learned and thought I’d like to share it.

Normally, when visitors visit a website they see the typical fonts available on their computer.  In css, you would specify a few different fonts in the case that the first or second isn’t available on the visitors machine (e.g.  font-family: Arial, Times New Roman, Serif;). The conventional way of using custom fonts is to create an image using the custom font and slapping it on a page.  Another way was using flash (e.g. Sifr) to embed the custom font.  SEO does not like this. SEO wants you to have as much text on a page as possible, and to be ranked higher on the search engines, having images or flash in place of the text isn’t really an option. This goes especially, if you plan on using custom fonts on the site. CSS has a way for you to use completely custom fonts on a website.  The attribute they provide for this functionality is @font-face. But, before you jump your guns and use it, there a few steps to follow so that it works correctly on all browsers.

There are 2 ways you can implement @font-face.  (1) Use a URL to use a specific font, or (2) you can download the font and use it on the same server as the site, which I will explain here. First, you download whatever font you wish, possibly from a site that distributes free fonts.  Also, make sure the font you download is legally eligible for web embedding, so please honor any EULAs of the font.  Now, with the font you just downloaded, you must convert it to a few different formats for the purposes of browser compatibility.  Some may already be good for all browsers but I follow this step for good measure.  For this, I use fontsquirrel.com.  FontSquirrel has a @font-face generator that will create the necessary font files to solve the issue of browser compatibility.  It will also create the necessary CSS file with the included @font-face attribute which you can copy over to the main CSS file.  With the generated files you have from FontSquirrel, upload them to a folder on the server that is hosting the site and remember to list the correct path to the font in the CSS.

Then in the main CSS file of the site, copy over the @font-face attributes generated from the FontSquirrel.  It should look something like this:

@font-face {
font-family: 'BaroqueScriptRegular';
src: url('baroquescript-webfont.eot');
src: local('?'), url('baroquescript-webfont.woff') format('woff'), url('baroquescript-webfont.ttf') format('truetype'), url('baroquescript-webfont.svg#webfontJvLgwFfB') format('svg');
font-weight: normal;
font-style: normal;
}

Now you can use the font in the CSS ‘font-family’ attribute just like so:

div {
font-family:’ BaroqueScriptRegular';
}

The second way is to find a font hosting site and, similar to the above @font-face example, you just add the URL of the font:

@font-face {
font-family: 'SomeFont';
url(‘http://www.somefontsite/SomeFont.svg’) format('svg');
font-weight: normal;
font-style: normal;
}

And use it the same way as mentioned above.

The only issues I can think of this is that there is a quick flicker as the font loads up onto the page.  Other than that and EULA restrictions mentioned earlier, this is a great alternative to using custom fonts on a website.

Everyone did a great job with the limited time that was given.  It is amazing what can get done when a team is all working towards the same goal.

Here are the  submissions from the teams in no particular order. There were 4 html/css/js solutions and one mobile/droid. Click on the images to play(except the droid version, link coming soon to add to your phone).

The winners will be announced this Friday at the company meeting. Don’t forget to vote for your favorite at the bottom of the post.

Team Purple (Rachelle, Sean, Chris, Laura, Adam)

Team Blue (Alissa,Julian,Mathew Jones,Krebs,Chad)

Team Green(Noah,Charlie,Zoe,David)

Team Red (Ryan,Sarah,Dustin,Shane)

Team White (Brian,Mike,Larry,Jon)

Please vote for your favorite.

As a developer working on web applications for the past 12 years I have always had to deal with the questions like “I did not see the change on my browser, was the code updated?”.  The quick response was to clear your browser cache and cookies and restart (maybe only worked about 50% of the time). After several years of going through this process I realized that the “normal” users probably do not know how to do that or what that means.  It would also be strange to have a message on your site after each code push saying “We have updated our site, please clear your browser cache for optimal experience”.  

A very basic way to avoid this issues is to create a new file path which will force the browser to download a new file.  You could rename your files for each code push  styles1-0.css and styles 1-1.css but this can be a pain to maintain. 

The way I have been doing this the last few years is to have the application automatically update the file paths every time the files have actually changed.  This way I do not have to worry about manually setting version with each code push.

Below is a .NET function that will return last modified data stamp of the physical file.  This date stamp becomes the version and gets tacked on at the end of the file with a query string.  I use built in .NET caching so the requests do not have to hit the file each time it loads.

public static string GetIncludeFileVersion(string file)
{
    //check if file exists and get date
    string version = "1.0";
    try
    {
        if (HttpContext.Current != null)
        {
            //always force cache
            if (HttpContext.Current.Cache[file] == null)
            {

                if (File.Exists(HttpContext.Current.Server.MapPath(file)))
                {
                    FileInfo fileInfo = new FileInfo(HttpContext.Current.Server.MapPath(file));
                    if (fileInfo != null)
                    {
                        version = fileInfo.LastWriteTime.ToString("MMddyyyhhss");
                        HttpContext.Current.Cache.Insert(file, version, null,
                        DateTime.Now.AddHours(1), TimeSpan.Zero);
                    }
                }
            }
            else
            {
                version = HttpContext.Current.Cache[file].ToString();
            }

        }
        
    }
    catch (Exception ex)
    {
     //silent for now
    }

    return version;

}

In the ASPX or ASCX or Front end files use the code below for all of your CSS/JS/Images and other include references. You may have to put this into a control depending on how your master/aspx files are setup.

<link type="text/css" href="/library/css/styles.css?<%=Ratchet.Framework.Helper.GetIncludeFileVersion("/library/css/styles.css")%>" rel="stylesheet" />

When your pages render you should see a timestamp version of it. something like

<link type="text/css" href="/library/css/styles.css?102120101114" rel="stylesheet" />