css @font-face not working

mfoley · 05-17-2024, 11:50 AM

I've been using a @font-face style for years without problem. Now it suddenly doesn't work. Dunno why. Possibly some upgrade to something. A simplified page is:

Code:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: MICRW2;
src: local("/tmp/trash/micr-W2.ttf");               
}
</style>
</head>
<body>  

<div style="font-family: MICRW2; font-size: 10pt">
<000010198< :044002174:640240500000011797<
</div>

</body>
</html>

This simply displays the literal "<000010198< :044002174:640240500000011797<" on the page, no MICR font. This html is in the directory /tmp/trash and I've also tried various combinations of:

Code:

src: url("/tmp/trash/micr-W2.ttf");
src: url("micr-W2.ttf");
src: url("http://www.novatec-inc.com/pub/micr-W2.ttf");

Nothing works. I've tried with FireFox, Edge and Chrome.

What am I missing?

NevemTeve · 05-20-2024, 01:29 AM

This one worked for me:

Code:

<style>
@font-face {
  font-family: MICRW2;
  src: url("file://localhost/C|/temp/micr-W2.ttf");
}

On the other hand, neither of these made it possible to use font via remote-url:

Code:

  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta http-equiv="Content-Security-Policy" content="*">

Maybe because it is a static file. Or because it is http not https.

(Note: CORS (Origins, Options, preflight requests, Security-Policy, HSTS etc) is way above my understanding, but surely it is good for something.)

Fearless Fred · 05-22-2024, 05:37 PM

because of your less than symbol, "<000010198< :044002174:640240500000011797<" is being rendered literally as its an 'unclosed opening tag'

Try using the html entity for the less than symbol, < instead of the unclosed 'opening brackets' as the html parser is seeing it on the page;

<000010198< :044002174:640240500000011797<