I wrote a small article about the "Problems with downloadable font files" in early 1998 and it was published on SELFHTML.
At that time, webfonts were also called "dynamic font" or "downloadable font".
SELFHTML was the most popular and comprehensive reference for HTML, CSS, JavaScript and XML in the German-speaking countries. There was also a forum where technical questions could be asked and answered by users.
In 1998, webfonts were totally new and it required a lot of effort to integrate them into a website. Also, there was no high speed internet for private users in Germany at that time. Also special attention was needed to integrate them into your website because of slow download speed.
- I wrote this original article in 1998 in German and translated this article now automatically with DeepL into English.
- The hyperlinks in my article to TrueDoc (truedoc.com), Netscape (netscape.com) and Microsoft (microsoft.com) are broken because the companies or sites no longer exist. The hyperlinks point to snapshots (late 1998 to early 1999) on archive.org.
- The links to the SELFHTML (version from 1998) mirror in my article open in Google Translate (German to English).
Follow the German article translated in English:
Problems with downloadable font files
Based on a posting by:
André Laugks
You can read about the different approaches taken by Microsoft and by Netscape in the section Downloadable Fonts. There are several ways to accommodate the differences between the two browsers.
1. Possibility: Load Active X Control in Internet Explorer
The company TrueDoc provides an ActiveX control with which pfr font files can be displayed in Internet Explorer. In the header of your document, a link to an external JavaScript file and pfr font files according to HTML syntax or according to CSS syntax is included. The external JavaScript file contains a browser query. If your document is loaded in Internet Explorer, an ActivX control is loaded from the TrueDoc server. The external JavaScript file and the ActiveX control are freely available on the TrueDoc server. Detailed information about the ActiveX control, external JavaScript file and copyright can be found on the TrueDoc homepage.
http://www.truedoc.com/webpages/FAQs/activex_faq.html
FAQ about the TrueDoc ActiveX Control
http://www.truedoc.com/webpages/intro/howto_ie.htm
Using pfr font files in IE 4
This method has the advantage that you do not have to burn a eot font file. This simplifies the management of font files within your project. In practice, the Active X Control is used most often.
2.1 Option: Load browser query and font file dynamically
If you decide to use a pfr and eot font file, you can use a browser query to determine whether your page is loaded in Netscape Navigator or Internet Explorer. You can easily and reliably query Internet Explorer 4.0 and above via document.all and Netscape Navigator 4.01 and above via document.layers. Depending on the browser, a JavaScript dynamically writes the CSS syntax into the header of your page.
<html>
<head>
<script language="JavaScript">
<!--
document.writeln('<style type="text/css"><!--')
document.writeln('@font-face {');
document.writeln('font-family:Chianti XBd BT;');
if(document.layers) {
document.writeln('src:url(http://www.meine.com/fonts/chianti.pfr); }');
}
if(document.all) {
document.writeln('src:url(http://www.meine.com/fonts/chianti.eot); }');
}
document.writeln('//--></style>')
//-->
</script>
</head>
<body>
<p style="font-family:Chianti XBd BT">Text in sample font</p>
</body>
</html>
2.2 Load separate CSS file
You also have the option of using a browser query to load a separate CSS file containing the CSS syntax.
You should test this procedure extensively in Netscape Navigator, as it often has problems with the dynamic loading of separate CSS and JavaScript files.
<html>
<head>
<script language="JavaScript">
<!--
if(document.layers) {
document.writeln('<link rel="stylesheet" type="text/css" href="nn.css">');
}
if(document.all) {
document.writeln('<link rel="stylesheet" type="text/css" href="ie.css">')
}
//-->
</script>
</head>
<body>
<p style="font-family:Chianti XBd BT">Text in sample font</p>
</body>
</html>
/* separate CSS file for Netscape Navigator - nn.css */
@font-face {
font-family:Chianti XBd BT;
src:url(http://www.meine.com/fonts/chianti.pfr);
}
/* separate CSS file for Internet Explorer - ie.css */
@font-face {
font-family:Chianti XBd BT;
src:url(http://www.meine.com/fonts/chianti.eot);
}
"Risks and side effects" of downloadable fonts
Due to browser differences and the lack of support for downloadable font files by older browsers or by Opera and due to bandwidths, downloadable font files are unfortunately also fraught with risks and side effects!
- Netscape Navigator up to version 4.01, Internet Explorer up to version 4.0 and Opera do not support downloadable font files.
- a font file can be up to 150kB in size, this can result in a long download time
- the ActiveX control is 69kB in size, this may result in a long download time
- ActiveX controls may be disabled in the visitor's Internet Explorer, so the
pfrfile will not load in Internet Explorer. - JavaScript and CSS might be disabled in the visitor's browser
- unloaded font files may mess up the layout or design of the page, the intended effect will not be achieved
- the font is only displayed when the font file is completely loaded, before that the alternatively specified font is displayed
Mitigating risks and side effects of downloadable font files
If you do decide to use downloadable font files, there are a few things you should consider:
- define alternative fonts:
<p style="font-family: "Chianti XBd BT", arial;">text in sample font</p> - for browsers that do not support downloadable fonts, possibly provide an alternative page.
- before burning the font file, remove the characters you do not need
Further links to downloadable font files
http://www.truedoc.com/webpages/availpfrs/avail_pfrs.htm
Available PFRs - large selection of ready-burned pfr files
http://www.truedoc.com/webpages/getstart/get_start.htm
Get started - Tutorial on how to include pfr files in Document
http://www.microsoft.com/typography/web/embedding/weft/olddefault.htm
Tutorial on creating eot font files with the tool Microsoft WEFT
http://www.microsoft.com/typography/web/embedding/weft2/default.htm
Tutorial for creating eot font files with the tool Microsoft WEFT 2
http://developer.netscape.com:80/viewsource/goodman_fonts.html
Article by Danny Goodman on the use of downloadable fonts
Top comments (1)
Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍