Tutorial 1: FAQ related to Website Font Issues (Windows, Mac. Ubuntu)
Today there are more than 250 million websites in the world and the
no. is rising continuously. The no. of web designers, web technologies,
web designs are also rising very rapidly. When making a web site we
always want that website should have a unique look and feel. So we want
to try a unique font which is not common. This article is somewhat
related to the same problem but it will also answer some basic questions
related to this topic.
1. Why my website look different in each Operating System (OS)?
Each Operating System have a default set of fonts Pre-installed in them. When we code our website we usually define a font family name using CSS to render the web pages in that family. The CSS code will look similar to this
p
{
font-family:"Times New Roman",Georgia,Serif;
}
The browser detects the fonts and renders the page in that font. If no font is defined or the given font is not present in Operating System then it uses browser default font which can vary with browser or OS.
2. Why my website font changes to default (Times New roman) when using different computer or OS?
There may be two cases
1. You used a font that is present in one OS and not in other
In this case you will be able to see your website rendered in given font on all computers using same OS as you but will change to Default font when seeing in other OS.
Link 1 Link 2
2. You installed a fancy font on your computer and used that
This is worse case compared to previous one. Only you will be able to see your fancy font. A detailed tutorial of how to use a custom font is given in http://webdesign.tutsplus.com
3. Same font look different in different Operating System
This will be less likely. There are some font that may look different in different OS but different should not be too much. If the change is drastic "do not use that font".
The reasons of this may be due to graphics rendering methods.
4. How do I use a custom font?
There are many techniques one can use for custom fonts like Using google Font API, Using CSS3, Image Conversion, Using Flash and Using PHP or javascript.
http://webdesign.tutsplus.com gives a detailed tutorial of techniques that renders new font in text format
Code Fusion gives five Image/Font replacement techniques
There are some websites that help to use flash for example http://www.sifrgenerator.com/
Using CSS3
1. Why my website look different in each Operating System (OS)?
Each Operating System have a default set of fonts Pre-installed in them. When we code our website we usually define a font family name using CSS to render the web pages in that family. The CSS code will look similar to this
p
{
font-family:"Times New Roman",Georgia,Serif;
}
The browser detects the fonts and renders the page in that font. If no font is defined or the given font is not present in Operating System then it uses browser default font which can vary with browser or OS.
2. Why my website font changes to default (Times New roman) when using different computer or OS?
There may be two cases
1. You used a font that is present in one OS and not in other
In this case you will be able to see your website rendered in given font on all computers using same OS as you but will change to Default font when seeing in other OS.
Link 1 Link 2
2. You installed a fancy font on your computer and used that
This is worse case compared to previous one. Only you will be able to see your fancy font. A detailed tutorial of how to use a custom font is given in http://webdesign.tutsplus.com
3. Same font look different in different Operating System
This will be less likely. There are some font that may look different in different OS but different should not be too much. If the change is drastic "do not use that font".
The reasons of this may be due to graphics rendering methods.
4. How do I use a custom font?
There are many techniques one can use for custom fonts like Using google Font API, Using CSS3, Image Conversion, Using Flash and Using PHP or javascript.
http://webdesign.tutsplus.com gives a detailed tutorial of techniques that renders new font in text format
Code Fusion gives five Image/Font replacement techniques
There are some websites that help to use flash for example http://www.sifrgenerator.com/
Using CSS3
@font-face { font-family: font; font-weight: bold; src: url('font-Bold.otf');
Comments
Post a Comment