Now you can just use simple JavaScript to use custom font on your site. Just upload your font-file to this link, download the embed font file also download the typeface.js and then use following HTML format to apply the font to the page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
Here are a few things to keep in mind:
<html>
<head>
<!-- load any external stylesheets first -->
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- then load the typeface.js library and typeface.js fonts -->
<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- go ahead and specify typeface.js fonts with CSS -->
<div class="typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>
</body>
</html>
Here are a few things to keep in mind:
| • | By default typeface.js will render text for heading elements (h1, h2, etc.) when those elements' styles reference typeface.js fonts. Remember that heading styles are bold by default, so you'll either need to add font-weight: normal to you heading styles, or load the bold version of the font if that's what you're after. |
| • | Any other HTML element referencing a typeface.js font needs to have typeface-js in its list of class names. If you have an element that already has a class name, for example, |
| • | You'll have to load external stylesheets before loading typeface.js. Otherwise, Firefox 3 might not have applied the styles when typeface.js tries to draw the text. |
| • | Unfortunately, specifying the font-stretch property will only work with inline CSS and not from any stylesheet. |
| • | In some circumstances in IE7 you may see a couple of milliseconds' delay before the browser shows typeface.js text after the page is rendered, producing a "flicker" effect. One way to get around this is to manually put a call to _typeface_js.initialize() just before your closing</body> tag. |
| • | If you're willing to forego selectable text, you can get a performance boost by disabling this functionality. After loading typeface.js, you can set a configuration option to disable selectable text like this:<script>_typeface_js.configure({ disableSelection: true })</script> |
No comments:
Post a Comment