@font-face question Options

[Lee Batchelor]

Hi all,

I used the following @font-face lines in my CSS sheet:

@font-face {font-family: "Antiqua"; src: url(Fonts/Antiqua.ttf);}
@font-face {font-family: "Papyrus"; src: url(Fonts/Papyrus.ttf);}

further down in my CSS sheet I used the font in these lines:

.ph {position: absolute; margin-left: 300px; width: 645px; height: 100px; background-color: #115421; top: 0px; font-family: "Antiqua"; font-size: 4.7em; color: #ffffff;}
.past {position: absolute; margin-left: 300px; width: 340px; height: 90px; background-color: #115421; top: 110px; font-family: "Papyrus"; font-size: 3.3em; color: #ffffff;}

The two fonts have identical names in the the Fonts folder. When I upload the CSS sheet to the internet, the fonts show perfectly on PC and iPad but not Android. In the Android, the Antiqua font works but not the Papyrus one.
Edit
I just read that Androids don't support all True Type fonts. Is this likely the cause?
I ran the CSS sheet through the W3C validator and it came back as passed, with the green banner.

This post has been edited by Lee Batchelor: Feb 15 2023, 11:11 AM

[Lee Batchelor]

It's okay guys. I've verified that Android devices do not support the Papyrus font. As an alternative, I used Parchment MF. It works and is very close.

Thanks...

[pandy]

That sounds fishy. If web fonts are supported the actual font you use shouldn't matter. The format it comes in may matter. But if I understand this table right all recent Android browsers should support both web fonts in general and also TTF.

https://caniuse.com/?search=web%20font

[Jason Knight]

TTF fonts include an option in the file to restrict their use to "web only" or "not for distribution". The latter setting could be interfering. It could also be that just plain old formats like TTF have compatibility issues.

I would assume that being a Microsoft proprietary font, Papyrus is restricted from web distribution.

Really though this is 2023 not 1997. You should be using WOFF and WOFF2, NOT .ttf, eot, or SVG. On my own sites I've abandoned all those other formats as widespread adoption of regular WOFF is now over a decade old. Even IE9 supports WOFF.

Doesn't hurt WOFF makes smaller files, and WOFF2 makes WAY smaller files... Take Antiqua-Regular, a 76k .TTF that's 33k as WOFF and 26k as WOFF2!

I probably violated copyright law by stripping out any such nonsense from those fonts, and converted them to said formats. Here's a demo:

https://cutcodedown.com/for_others/leeBatchelor/test.html

The directory is wide open for easy access to the gooey bits and pieces:
https://cutcodedown.com/for_others/leeBatchelor/

And you'll find a .rar in there containing the whole shebang, including my little font tester demo. I made font.screen.css a separate file so as to make it easier to see "just the font" parts.

Beware again though that despite these fonts being free from Microsoft, that doesn't mean you get to share their files willy-nilly. The licensing on them for web use is a bit... douchy. I have batted those restrictions aside, but make no guarantees how that will work out for you.

Also, are you REALLY sure you want to use Papyrus?

https://www.youtube.com/watch?v=jVhlJNJopOQ

This post has been edited by Jason Knight: Feb 15 2023, 10:09 PM