Category Archives: HTML/ CSS

Embedding Fonts Different Methods

If your a front end web developer you might have received a design of a website that has some uncommon font. Normally fonts like Arial, Times New Roman are commonly present in all browsers/Operating systems, that websites designed with those fonts are rendered more or less same in all browsers. But for websites that has custom fonts or fonts that are not available in a normal users computer the web page will get rendered differently depending on the availability of fonts in the client computer or device.

Some really artisitic and creative web designs requires us to use the specific font the website was designed with. So how to do this? Let the user download the fonts required to view the website properly? hmmm not practical… Develop the entire website in Flash? hmmm seo nightmare :-/

Method to embed fonts on a website so that it may be rendered properly at the client.

Method – Embedding the font files in the website. Using @font-face

What you need,

.ttf or .otf font file. these will work on firefox and other modern browsers.

.eot file for internet explorer -> you can convert .ttf files to .eot using online font file converters like http://fontface.codeandmore.com/ and http://www.kirsle.net/wizards/ttf2eot.cgi

after you get those two files put them in your website directory and at the top of your css file add the following code to define the font-face

/* custom fonts */

@font-face {
font-family: gillsans; /* this could be any name but for clarity use the font name */
src: url(“fonts/gillsans.eot”) /* path of EOT file for IE */
}

@font-face {
font-family: gillsans;
src: url(“fonts/gillsans.ttf”) /* path of  TTF file for CSS3 browsers */
}

Make sure to put the .eot file code first.

Then when you want to apply the font just use like following,

p {

font-family: gillsans; /* font family should be what you defined earlier */

}

This method will work on IE and other browsers but is sometimes difficult due to convert difficulties of font files from .ttf and .otf to .eot format.

 

Advertisements

Prevent Skype Highlighting on your website

If you have skype installed on your computer you will see that phone numbers on a website are highlighted,

Skype Highlighting

This is all good and useful if your a web user, but this could be a nightmare situation if your a web developer, as this could create havoc with your layouts.

To prevent skype highlighting from showing and messing up your carefully created design you can add the following style rules to your css file,

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;}

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container, span[class^=”skype_pnh_print_container”] {display:inline !important;}

Jquery Fancy Box – Issue in IE – How to fix?

I used jquery fancy box for displaying the contact box in the ocean dental web site and when I tested it using chrome, safari and firefox it was working without any issue. But when I tested using IE 7/ 8 it was not showing up properly. the fancy box has become smaller than the content on the page.

After trying to fix the issue by trying various css tricks and editing the stylesheets used by fancy box.

I found that the page that I am calling fancy box must have a specific doc type. after applying what is given in fancy box site it started working without any issue. If your like me and if you have just integrated fancy box by copieng from the demo you might also get this error, so to fix this use the following doc type on the page that your calling fancy box.

<code>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”en” lang=”en”>

</code>

 

Hope this will help. 🙂