Before the invention of the CSS3 the only way to embed font is the flash. But we know that the limitation of the embedding font in flash is that application made in flash doesn’t support on Apple IOS or mobile operating systems.
It’s right time for the designer to use the powerful features of embedding font in the website with CSS3 technology. There are many some ways to embed font in web page and many free online embedding font web tools or font face generator tools available to generate the font package that support the font in a cross browser. Here are i am writing that how we can embed the font in a web page.
To use the font for an HTML element, then we need to use the @font-face rule of power full features of CSS3 that supported in many modern browser. CSS property font-family of HTML is used to defined the font name which we want to embed ans src property used to defined the path of the font to be embed.
Example Embed Custom Fonts in Website
<style>
@font-face
{
font-family: myfont;
src: url(‘(fontfile.eot’) format(’embedded-opentype’),
url(‘(fontfile.woff’) format(‘woff’),
url(‘(fontfile.ttf’) format(‘truetype’),
url(‘(fontfile.svg#(fontfile’) format(‘svg’);
}div,h2
{
font-family:myfont;
}
</style>
After seen some line of code i know you think its complex code and that how we can get all those files like .woff, .ttf, .svg, .eot and why this all files required. So i want to know that ttf does not supported to Internet Explorer.
To over come this issue we have embedded the .eot file that is supported in the Internet Explorer. SVG is supported on the Safari grater than 3.0 browser and also supported in modern chrome and Firefox browser.
<div>This is the example of embedding font</div>
<h2>Font Embbeded in H2 Tag</h2>
Above example display the text with embedded font myfont name and the myfont file is defined as fontfile.ttf or any extension as defined in above code embedding area of the font.
I know that you have learn the how to embed custom font in a website but in your mind that how you will get all font file of different extension which supports the different browser. To get all those file you need to check the following link.
