1.Download free fonts.
2
.www.fontsquirrel.com/webfontgenerator
3.Upload file(font file) which have been donwloaded.
4.Add fonts->select
Basic option and check the Agreement box.Then font conversion process in progress.
5.After conversion extract zip file on local drive.
6.Copy
.eot,.svg,.ttf,.woff files from extracted file and paste it in the font folder (already available in the local disk).
7.Copy content(change url path as per the need in the content) from stylesheet.css from extracted file and paste it inside the common style sheet of the website where user wants the font style to be displayed.
stylesheet.css(extracted file)
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on May 15, 2014 */
@font-face {
font-family: 'canterbold';
src: url('canter_bold.eot');
src: url('canter_bold.eot?#iefix') format('embedded-opentype'),
url('canter_bold.woff') format('woff'),
url('canter_bold.ttf') format('truetype'),
url('canter_bold.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
change the url path
@font-face {
font-family: 'canterbold';
src: url('
../fonts/canter_bold.eot');
src: url('
../fonts/canter_bold.eot?#iefix') format('embedded-opentype'),
url('
../fonts/canter_bold.woff') format('woff'),
url('
../fonts/canter_bold.ttf') format('truetype'),
url(
'../fonts/canter_bold.svg#canterbold') format('svg');
font-weight: normal;
font-style: normal;
}
8. Use the name of the font where the website needs font style.
example:
p {
color: #272727;
font: 13px/20px canterbold;
padding: 5px;
}
