Thursday, December 1, 2011

Set Different Fonts for Your Website Using CSS

Website development bears good results if it is done carefully keeping all the essential points in mind. CSS is a great and advanced language that helps in designing light web pages. When it comes to a visually appealing and user friendly website, there are many factors that decide how attractive and user friendly a website would be. Fonts also play an important role in enhancing the look of a site. Therefore, it is imperative to select right fonts for your site. CSS is a great language using which you can set different fonts for your website.

CSS can be perfect choice in case your website needs to have an unusual font. However, you should also keep in mind some downsides related to the use of this language. Read further and you will find out how embedded fonts can be of great help.

First of all, you need to remember that a font is not a browser resource. It is an operating system resource. If you install an unusual font on your PC then it becomes easy to design a web page and include that font. However, what you need to consider is this- you can see the font as it is installed there on your operating system. But what about your visitors? What if they do not have it installed? In such a case, their browser will display their default font instead.

From a designer's perspective, this is a big loophole. A designer wants pages to display as he intends them to, but the fact is that one can not control an individual; browser's display. Even if you lay out the page with a font utmost care, you are still at the mercy of the browser used by users. Now this where the role and significance of embedded fonts come into picture. With embedded fonts, you simply need not have to worry  about browsers displaying a default font. Instead, it is your font that gets downloaded along with the page.

In order to apply the font by name to your page, you can use either the <FONT FACE> tag or the FONT-FAMILY property in CSS1. There are three steps in total included in the process of embedding a font. These are

1. Locate the font and use it: It is very easy to find fonts. Simply type 'free fonts' or any other relevant keyword in a search engine and you will get good results. After finding the right font, you can download it and can use it in your page design. However, make sure that you research well. This is because many designers do not let their fonts to be embedded. Be careful in order to avoid any copyright issues.

2. Creation of an embedded font file: To embed a font file  using the font you installed locally on your hard drive, you need to use a third-party application. This can be a time consuming process as Netscape and Explorer both use different formats. To embed fonts, you can use any one of the two available formats. These are- portable font resources, and embeddable open type. Once you are done with embedding the font file, you can attach it to a CSS.

3. Attaching the font to the style sheet:
Depending on the type of file you created for embedding font file, you need to proceed accordingly. The process of attaching a TrueDoc file is different from attaching an OpenType file. One thing to be noted here is that OpenType files are accessed by the user's operating system. Thus the user can download and use fonts on their own systems.


Post a Comment