UD5 Toolkit
text‑rendering Tester - Online Optimize Legibility
Compare text‑rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. See kerning and ligature changes live.
Font Loading Strategy Tester - Online FOIT vs FOUT
Font Loading Strategy Tester
Compare FOIT (Flash of Invisible Text) and FOUT (Flash of Unstyled Text) in real time. Load custom fonts, simulate network delays, and see exactly how users experience your typography before and after font loading.
Test Configuration
Direct link to a .woff2 file. Cross-Origin access required.
1500ms
Adds artificial delay to highlight FOIT/FOUT behavior.
FOIT (block)
Waiting
The quick brown fox...
—
FOUT (swap)
Waiting
The quick brown fox...
—
Frequently Asked Questions
FOIT (Flash of Invisible Text) occurs when text remains hidden until a custom font loads. Users see a blank space for several seconds. FOUT (Flash of Unstyled Text) means the browser first shows a fallback font (like Arial) and then swaps to the custom font once it's ready. FOIT can harm perceived performance; FOUT can cause layout shifts.
The
font-display property controls how a font is displayed during loading. Values include auto, block (FOIT), swap (FOUT), fallback, and optional. For example, font-display: swap immediately shows the fallback and swaps later, improving perceived performance.
For most websites,
font-display: swap is recommended because it avoids invisible text and reduces LCP (Largest Contentful Paint) delay. Google recommends ensuring text remains visible during webfont load. Use optional only if the custom font is not critical.
The font URL must support CORS (Cross-Origin Resource Sharing) and be a valid
.woff2 file. If you see a network error, try hosting the font on the same domain or using a CDN that allows CORS (like jsDelivr or Google Fonts gstatic). Our preset fonts are CORS-enabled.
We load your specified font file in the background and control the visibility timing. FOIT preview hides the text until the font is loaded (plus extra delay you set). FOUT preview shows fallback text immediately and swaps to the custom font after loading. This visual simulation reflects real-world browser behavior when using
font-display: block vs swap.
Preload critical font files with
<link rel="preload">. Use font-display: swap or optional. Match fallback font metrics to the custom font using size-adjust, ascent-override, and descent-override in @font-face to reduce layout shift (CLS).
Font Tech & Format Checker - Online Supports incremental font?
Detect browser support for font‑tech() and font‑format() values in @font‑face src. Check COLRv1, variable, etc.
What Font is Used on a Website - Online Detector
Enter a URL and extract the font stacks and web font URLs used on that page. Quick typography research.
ARIA Live Region Tester - Online Screen Reader Update
Inject dynamic messages into ARIA live regions and monitor how they trigger screen reader announcements. Debug a11y.
text‑orientation Tester - Online Upright & Sideways Glyphs
Change text orientation within vertical writing mode. See mixed, upright, sideways. Useful for CJK layout.
CSS Letterpress Text Effect - Online Inset Typography
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Page Speed Simulator - Online Estimate Load Metrics
Enter a URL and get a rough client-side performance simulation: request count, DOM size, and potential speed tips. No real Lighthouse.
Browser Speed Test - Online Measure Download/Upload
Measure your internet connection speed by downloading and uploading a small test file. Works from your browser.
HTML Includes Previewer - Online Simulate SSI Includes
Paste multiple HTML snippets (header, footer) and a main content, then combine them into a single preview. Static site helper.
ARIA Live Region Monitor - Online See Dynamic Announcements
Watch for updates to aria‑live regions and log what a screen reader would announce. Debug live regions.
Variable Font Axis Slider - Online Weight, Width & More
Load a variable font (default or custom) and play with weight, width, slant, and custom axes. Download the CSS.
Gradient Text Contrast Checker – Online WCAG Over Background
Type text and set a gradient, then check contrast against a solid background. Ensure readability.
writing‑mode Demonstrator - Online Vertical Text
Display text in horizontal‑tb, vertical‑rl, vertical‑lr. See how block and inline directions switch. For multilingual sites.
Connection Speed Estimator - Online Download Test
Quickly estimate your internet connection speed by downloading a small test file. See class and recommendations.
PDF Text Extractor - Online Copy Text from PDF Without Upload
Extract plain text from a PDF file entirely in the browser using PDF.js. No file upload to server. Supports multi-page extraction and search.
Character Frequency Analyzer - Online Visual Heatmap of Text
Analyze letter/symbol frequency with an interactive bar chart and heatmap. Useful for breaking simple ciphers, linguistics, and SEO keyword analysis. Local processing.
contenteditable Playground - Online Live Rich‑Text Effects
Type directly into a contenteditable div with real‑time CSS filters, shadows, and colors. Download as HTML. Fun demo.
WPM Reading Speed Calculator - Online Time Estimate
Paste text to calculate the estimated reading time based on your WPM. Set speaking time too. Perfect for speeches.
Fullscreen API Tester - Online Request & Exit Demo
Test the Fullscreen API: request fullscreen on a colored div, detect changes, and copy the JavaScript boilerplate.
Bidirectional Text Analyzer - Online RTL/LTR Detection
Paste text with mixed Arabic/Hebrew and English. See the Unicode bidi class of each character and ordering. i18n debugger.
Image Compression Visualizer - Online Before/After Slider
Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.
Network Throttle Simulator - Online Slow 3G & Offline Test
Test how your page loads under slow, 3G, or offline conditions by intercepting fetch and applying delays. No DevTools needed.
PDF Text Extractor - Online Copy Text from PDF Locally
Extract selectable text from a PDF using the browser's built‑in PDF rendering. Copy or download as TXT. No upload, fully private.
Favicon Checker - Online Test Any Site's Icon
Enter a URL and see its favicon at all standard sizes. Check if it's properly defined. SEO basic check.
Text Scramble Effect - Online Decoding Animation
Animate text that looks like it's being decoded or scrambled before settling on the final word. Copy the JS snippet.
Twitter Card Previewer - Online See How Tweets Render
Enter a URL and fetch its Twitter card meta tags. See a live preview of how the tweet will appear. Debug social sharing.
Keyword Density Checker - Online SEO Text Analyzer
Analyze text for keyword frequency and density. Highlights over-optimized terms. Perfect for content writers and SEO editors. Entirely browser-based.
Image Text Extractor (OCR) - Online Copy Text from Image
Extract text from images using basic OCR technology. Works best with clear, printed fonts. Completely local, images never leave your browser for privacy.
3D Text CSS Effect - Online Extruded Type Generator
Create a 3D extruded text effect using multiple text‑shadows. Adjust depth, color, and perspective. Ready‑to‑use CSS.
Responsive Navbar Generator - Online Pure CSS Hamburger
Design a responsive navigation bar with a pure CSS hamburger menu. Customize colors and breakpoints. Copy the code.