Comments (2)
Let me provide an example which may help to explain the problem in more detail...
This is the Google Fonts URL for Open Sans:
https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap
If you access this URL with a modern user agent string, then you will get woff2 files:
curl --user-agent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36' 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'
The URLs for the font files look like this:
https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2
However, if you try using an older user agent string, you will get different results:
curl --user-agent 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.1.2 Safari/603.3.8' 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'
Then the URLs for the font files look like this:
Now, if you try accessing that URL, the URL does in fact return a font file in woff format (the original woff format, not the newer woff2 format); however, the problem is that it's not clear how the client is supposed to know that it's a woff file:
-
The URL is kind of ugly and has no
.woff
file extension, so it gives no indication that it is a woff file. (Compare that to the URL for the woff2 files, which is simpler, cleaner, and has a clear.woff2
file extension.) -
You might argue that clients are not really supposed to use the URL to determine the type of the file; they are supposed to use the
Content-Type
header. But that won't work either! The content-type returned istext/html; charset=utf-8
. (Note that the content really is indeed a woff file, not an HTML document. It's just theContent-Type
header that is wrong.)
So I'm not sure what the client is actually supposed to do here to determine that this is in fact a woff file. I tested using this font in web browsers and it does appear to work, so I would assume that browsers are sniffing the content to determine what type of file it is, which is not really an ideal solution. Ideally this font file would have a cleaner URL with a .woff
file extension, or the Content-Type
header would return the correct font/woff
content-type, or (preferably) both. Note that the woff2 URL doesn't have these problems: the URL has a .woff2
extension clearly indicating the format, and if you access the URL you will find it returns the correct font/woff2
content-type.
Also, this is something which just changed in the last week or so. Before that the woff files used to have cleaner URLs with .woff
extensions. (I'm not certain what the content-type was, but I'm guessing that probably used to be correct too.)
from fonts.
So I'm not sure what the client is actually supposed to do here to determine that this is in fact a woff file.
You can determine the font's file format by reading the first few bytes of the file:
- If you read
77 4F 46 46
('wOFF'
), it's a.woff
font - If you read
77 4F 46 32
('wOF2'
), it's a.woff2
font - If you read
00 01 00 00
, it's a.ttf
font - If you read
4F 54 54 4F
('OTTO'
), it's a.otf
font - If you read
4D 5A
('MZ'
), it's a.fon
font
Those are called "file signatures" or "magic bytes", there's a Wikipedia article that lists a lot of them.
Most programs use those to detect file formats, since relying on the good faith of the file provider to give the correct extension or the correct header often proves to be wrong.
from fonts.
Related Issues (20)
- ufo file of CJK font is too large HOT 1
- Add German umlauts to Gugi HOT 1
- Deduplicate lookups in Crimson Text HOT 4
- Rene Bieder - Campton HOT 4
- Lato font - Missing Czech characters and additional weights HOT 4
- Impossible to use "Noto [Sans/Serif] [SC/TC/JP/KR]" fonts in Google Chrome/MSEdge HOT 8
- Roboto Flex character "Δͺ" is broken HOT 1
- Request to update Unna
- Rquest to alter line spacing and size in Noto Nastaliq Urdu HOT 2
- Request for italic version of Quicksand HOT 4
- Add Badeen Display HOT 2
- Roboto is still missing the german capital αΊ (Eszett) character
- Update Big Shoulders families with `opsz` axis
- Add Bungee Tint HOT 4
- Ga Maamli: Add Designers and assets HOT 1
- Add designer Laura Garcia Mut HOT 1
- Request for more style options for Bellefair HOT 1
- Add [Font Name]
- Add [Vogue] HOT 3
- TrashHand HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fonts.