How to use Font Face :
The Web Font
Loader is a JavaScript library that gives you more control over font loading
than the Google Web Fonts API provides. The Web Font Loader also lets you use
multiple web-font providers. It was co-developed by Google and Type kit.
Simple Method : (From our system local font)
@font-face {
font-family: 'Awesome Font';
src: url('awesome-font.ttf');
}
@font-face {
font-family:
'Awesome Font';
src:
url('awesome-font.eot'); /* IE9 Compat Modes */
src:
url('awesome-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('awesome-font.woff') format('woff'), /* Modern Browsers */
url('awesome-font.ttf')
format('truetype'), /* Safari, Android, iOS */
url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Web Method : (From internet web font)
Full information you will get from
here:
<script type="text/javascript" src="http://use.typekit.com/typekitid.js"
></script>
<script type="text/javascript">
try{Typekit.load();}catch(e){
}
</script>
<style type="text/css">
.wf-loading h1 {
visibility: hidden;
}
.wf-active {
/* styles to use when web fonts are active */
}
.wf-inactive {
/* styles to use when web fonts are inactive */
}
</style>
Web Method : (From Google web font)
Full information you will get from
here:
<html>
<head>
<script
type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tangerine',
'Cantarell' ] }
};
(function() {
var wf =
document.createElement('script');
wf.src = ('https:' ==
document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s =
document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
(OR )
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['yourfontname'],
urls: ['http://paulirish.com/ yourfontname.css']
}
});
</script>
<style
type="text/css">
.wf-loading p {
font-family: serif
}
.wf-inactive p {
font-family: serif
}
.wf-active p {
font-family: 'Tangerine', serif
}
.wf-loading h1 {
font-family: serif;
font-weight: 400;
font-size: 16px
}
.wf-inactive h1 {
font-family: serif;
font-weight: 400;
font-size: 16px
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-weight: 400;
font-size: 16px
}
</style>
</head>
<body>
<h1>This is using
Cantarell</h1>
<p>This is using Tangerine!</p>
</body>
</html>
No comments:
Post a Comment