EMBEDDING FONTS

Recently I was doing a bit more research on how to embed custom fonts into my websites and I came across several intersting links.

The first one was an article written by a freelance web developer, John Raasch. He lists and describes all the pros and cons regarding various methods of embedding custom fonts: http://jonraasch.com/blog/embedding-custom-fonts. At the end he sums up his prefered method of embedding and gives the reasons for his choice.

The second article I came across is similar to the one above, detailing the various embedding methods: http://pcandweb.com/tutorials/how-to-embed-custom-fonts-on-webpage.html

And thirdly, I found this site: http://typekit.com/. They provide a service whereby you pay a monthly subscription to use their library of fonts, and by inserting specific coding supplied by Typekit your custom font will apprear on your website. However, when I browsed through their font library I noticed that the custom fonts took a moment or 2 to load before they appeared.

Personally, I decided to give the @font-face class a try, which is detailed in the first 2 links. I found it to be pretty easy to implement and it worked across the following browsers: Firefox, IE, Safari and Chrome. The following tutorial was very useful in detailing the @font-face implementation step by step: http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/

Below is how you can make use of the @font-face class to embed your custom font:

STEP 1: SELECT YOUR FONT
Due to licensing concerns, it is best to use a free font. A site that I make use of often is: http://www.dafont.com.

STEP 2: CONVERTING YOUR FONT
Different browsers support different font formats, therefore you will need create different font files in order to get cross browser support. Below is a list of the font formats supported by different web browsers.

The tutuoral I mentioned above makes use of the Font Squirrel @font-face Kit Generator. It allows you to upload your font file, select your output formats and download a folder with all of your converted font files. A demo page will also be downloaded to your computer once Font Squirrel has finished converting your fonts.

STEP 3: INSERTING THE CSS

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

h1 {
	font-family: 'YourFontName', Helvetica, Arial, sans-serif;
}

                    

If you decide to try the @font-face class for your website, please read through the above links carefully as they detail the pros and cons and potential font licensing issues regarding this method.

VALIDATING FLASH

I came across the challenge of trying to validate flash in XHTML. The problem with trying to validate the code that Macromedia Flash spits out is that the <embed> tag is not valid HTML. Upon removing the <embed> tag, however, I found that this worked fine in Firefox but not in IE. In IE the flash wouldn't load.

I eventually came across a website that provided the solution by specifying which code to show depending on which browser was being used and this worked like a charm. Not only did the flash code validate but it also worked perfectly in both Firefox and IE.

[cick here] to view the webpage that provided the flash validation solution.

Below is the sample code for the flash validation solution:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="120">
<param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
			
<!--[if !IE]> <-->			
<object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
width="300" height="120" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
					

FIREFOX CSS IMAGE ROLLOVER FIX

When creating rollover images using divs and CSS, I used to create 2 images - one for the "up state" and one for the "over state". However, I found that in Firefox when you initially rollover the image the "over state" image doesn't appear and only appears when you return to that page.

Here is a simple example of what this CSS code would look like:

a.rolloverButton:link {
  display: block; 
  width: 100px; 
  height: 20px; 
  background-image: url(images/button_up.gif);
  background-repeat: no-repeat;
}
a.rolloverButton:hover {
  display: block;
  background-image: url(images/button_down.gif); 
  background-repeat: no-repeat;
 }

The solution to this glitch is quite simple. All you need to do is create one single image file displaying both images instead of having 2 separate images. Then when you refer to the image in your CSS class, simply state the position that the image should appear within your <div> tag. See the example code below:

a.rolloverButton:link {
  display: block; 
  width: 100px; 
  height: 20px; 
  background-image: url(images/button_image.gif);
  background-repeat: no-repeat;
  backgroun-position:top;
}
a.rolloverButton:hover {
  display: block;
  background-image: url(images/button_image.gif); 
  background-repeat: no-repeat;
  backgroun-position:bottom;
 }
	

IE CSS # (HASH) FIX

It's no secret that IE sometimes displays CSS styles a little differently than other browsers. Something that might look perfect in Firefox mysteriously looks out of place in IE. One way to get around this would be to give IE it's own style instructions in the CSS. In order to differentiate which CSS styles need to apply to IE only, all you need to do is put a '#' symbol infront of the style.

Here is an example:

.randomBlock {
  padding: 10px;
  #padding: 5px;
 }