Why Web Fonts (.woff2) and Modern WebP Images Fail on Fresh Nginx Servers
You just launched a modern web app optimized with cutting-edge .woff2 fonts and high-efficiency .webp assets. Yet on Chrome and Safari, fonts glitch back to system defaults and the DevTools console reports parsing failures: "Failed to decode downloaded font, OTS parsing error".
The root cause is rarely file corruption. Instead, it is an inaccurate Content-Type (MIME Type) header dispatched by the web server. Legacy Nginx or AWS S3 configurations frequently lack mappings for font/woff2 or image/avif, falling back to text/plain or application/octet-stream. Modern browsers strictly reject mislabeled font and media streams to prevent remote code injection attacks.
PhuDuy Tools MIME Types Explorer provides the definitive bidirectional dictionary linking extensions and standard IANA Content-Types: Instant zero-latency search, 1-click Nginx and Apache server configuration generators, and an integrated Magic Bytes File Sniffer that reads initial binary signatures to uncover disguised executables.
📊 Critical Web MIME Types & Compression Standards Cheat-Sheet
Official IANA designations, Brotli/Gzip compressibility, and recommended engineering contexts:
| Extension | Standard MIME (Content-Type) | Gzip / Brotli | Standard Real-World Usage |
|---|---|---|---|
| .html / .htm | text/html; charset=UTF-8 | ✓ High (80% ratio) | HTML webpages, SSR templates, and landing pages. |
| .json | application/json | ✓ High (75% ratio) | RESTful API communication and GraphQL network payloads. |
| .js / .mjs | text/javascript | ✓ High (70% ratio) | Browser JavaScript and ES Module bundles (RFC 9239). |
| .css | text/css | ✓ High (80% ratio) | Cascading Style Sheets stylesheets. |
| .webp | image/webp | ✗ Pre-compressed | Modern web image format 30% lighter than JPEG. |
| .avif | image/avif | ✗ Pre-compressed | Next-gen AV1 derived image format for extreme compression. |
| .woff2 | font/woff2 | ✗ Brotli Embedded | Standard web typography format; loads 50% faster than TTF. |
| .wasm | application/wasm | ✓ High Compressibility | WebAssembly binary code for near-native client compute. |
🛡️ MIME Sniffing Vulnerabilities & The "nosniff" Defense
Historically, browsers attempted to infer the format of received files by reading payload content (a mechanism called MIME Sniffing). If an attacker uploaded a malicious script disguised as profile.txt, browsers inspecting the content would execute it as active JavaScript, enabling Cross-Site Scripting (XSS).
To close this vulnerability, the X-Content-Type-Options: nosniff security header was standardized. It instructs user agents to honor the declared MIME type verbatim, terminating the connection if a mismatch occurs.
Always serve X-Content-Type-Options: nosniff on reverse proxies and CDN distributions, and use PhuDuy Tools' Magic Bytes Sniffer to validate incoming uploaded files server-side before persisting them to object storage.
🚀 Quick 3-Step Guide to Inspect & Configure MIME Types
Search Extension or MIME
Type file extensions (e.g. webp, woff2) or standard Content-Type strings into the instant search bar.
Review Technical Metadata
Check official IANA specifications, binary/text encoding flags, and Gzip/Brotli compressibility guidelines.
Copy Server Configurations
Copy ready-to-use Nginx types blocks or Apache .htaccess directives with one click.
✨ 4 Market-Leading Features Built for Engineers & Webmasters
Magic Bytes In-Browser File Sniffer
Drag & drop any file to inspect initial binary signatures, uncovering spoofed extensions and hidden executables.
Instant Server Config Generator
Auto-generate production snippets for Nginx (mime.types), Apache (.htaccess), and Express.js response headers.
Modern Web Media Support
Comprehensive coverage of modern web standards: AVIF, WebP, WOFF2, WebM, and WebAssembly (WASM).
100% Client-Side Privacy
Operates entirely in local browser memory with 0ms lookup latency and complete offline capability.
❓ MIME Types Frequently Asked Questions
What is a MIME Type and why is it critical for the web? ▼
A MIME (Multipurpose Internet Mail Extensions) type is a standardized two-part identifier (e.g. text/html or image/webp) transmitted in the HTTP Content-Type header. It tells browsers how to process incoming bytes: rendering as a webpage, displaying an image, playing audio, or invoking a download dialog.
Why did JavaScript change from 'application/javascript' to 'text/javascript'? ▼
While application/javascript was introduced in RFC 4329, the HTML Living Standard and IETF RFC 9239 officially designated text/javascript as the sole canonical MIME type for JavaScript and ES modules.
Should Gzip compression be applied to WebP or PNG images? ▼
No. Formats like WebP, AVIF, PNG, JPEG, and WOFF2 already contain specialized compression algorithms. Applying Gzip wastes server CPU and can even increase file size due to compression container overhead.
What are Magic Bytes (File Signatures)? ▼
Magic Bytes are distinct binary sequences at the beginning of files. For example, valid PNGs always start with 89 50 4E 47, and PDFs begin with 25 50 44 46. Regardless of filename changes, magic bytes reliably disclose true formats.
When should 'application/octet-stream' be served? ▼
application/octet-stream serves as the fallback for unknown binary payloads. Browsers receiving this type bypass internal renderers and trigger a download prompt for the user.