Font Loading Strategy Tester - Online FOIT vs FOUT
Compare font‑display values (block, swap, fallback, optional) on the fly. See how text renders during web font load. Choose the right strategy.
UD5 Toolkit
Enter a website URL to instantly detect all fonts used on that page — including Google Fonts, system fonts, custom @font-face fonts, and Adobe Fonts.
If the URL detection fails due to CORS or JavaScript-rendered pages, paste the CSS code below to extract font declarations.
<style> tags, inline style attributes, @font-face declarations, and <link> tags pointing to font services like Google Fonts or Adobe Fonts. It extracts every font-family declaration and compiles a list of unique fonts used on the page.
@font-face fonts that aren't from a public CDN (like Google Fonts) can't be loaded for preview because the font files (.woff2, .ttf) are hosted on the original server and may be protected. The tool detects the font name but can't download the actual font file for rendering. In the preview, these will fall back to a generic font.
Compare font‑display values (block, swap, fallback, optional) on the fly. See how text renders during web font load. Choose the right strategy.
Paste text to compute reading ease and grade level using Flesch-Kincaid, SMOG, and ARI. Improve your writing clarity. All in browser.
Paste any article and get a list of the most relevant keywords using a simple TF‑IDF‑like model. Skip stop words. All local.
Analyze text for screen reader friendliness: detect vague link text, missing alt suggestions. Get a report. Local.
Measure your typing speed in words per minute and accuracy. Random word prompts. Compare results over time. No data sent.
Analyze letter/symbol frequency with an interactive bar chart and heatmap. Useful for breaking simple ciphers, linguistics, and SEO keyword analysis. Local processing.
Track freezer contents with type, date frozen. See what's been in too long. Simple grid view. Data local.
Analyze text for keyword frequency and density. Highlights over-optimized terms. Perfect for content writers and SEO editors. Entirely browser-based.
Compare text‑rendering: auto, optimizeSpeed, optimizeLegibility, geometricPrecision. See kerning and ligature changes live.
Hide a secret message inside a normal text using zero-width characters or invisible ink. Copy the result. Decode with the same tool.
Check if the current page can be loaded offline by examining the service worker cache. Developer tool for PWAs.
Enter hole saw diameter and material to find the recommended RPM and feed pressure. Prevent burning and kickback.
Paste text and get a rough analysis of its emotional tone (happy, sad, angry, etc.) based on keyword matching. Local.
See exact dimensions of your current browser inner/outer window, screen resolution, and pixel ratio. Developer debug.
Create CSS clamp() values for fluid typography. Enter min and max font sizes and viewport widths. Modern responsive design.
Enter a URL and click to check if it's reachable from your browser (CORS-limited, uses no-cors fetch). Quick manual test. Local only.
Enter megapixels and desired DPI to see the maximum print size without upscaling. Quick quality check.
Fetch a page and list all loaded assets (CSS, JS, images) with their sizes. See total page weight. Quick performance check.
Estimate filament usage: enter weight or length and get the remaining value plus cost. PLA/ABS density reference. Local calculation.
Measure your internet connection speed by downloading and uploading a small test file. Works from your browser.
Load a variable font (default or custom) and play with weight, width, slant, and custom axes. Download the CSS.
Watch for updates to aria‑live regions and log what a screen reader would announce. Debug live regions.
Convert torque units between Newton-meter, foot-pound, inch-pound, and more. Essential for mechanics and engineers. Instant local conversion.
Compute the selling price from cost and desired markup percentage, or find the markup from cost and price.
Select a ratio (1.25, 1.333, 1.5) and a base size to generate a full typographic scale for h1‑h6. Copy CSS variables.
Hide a secret message within an image by modifying LSB of pixels. Also decode. Pure canvas manipulation, local only. Fun privacy tool.
Create a realistic letterpress (debossed) text effect using CSS text‑shadow and background. Adjust depth and light direction. Copy code.
Adjust recommended tire pressure for extra load or high speed. Simple reference chart.
Based on your target salary, calculates a high anchor number to improve negotiation outcome. Psychological tactic.
Paste text, highlight important parts, and extract only highlights. Great for research and studying. Entirely client-side.