Base64 to CSS @font‑face Converter - Online Embed Font
Paste a Base64 encoded font string and generate the complete @font‑face CSS rule. Inline small fonts easily.
UD5 Toolkit
Securely browse and preview all fonts installed on your computer using the Font Access API.
Works on Chrome 103+ | Your fonts stay local
Accessing your local fonts...
You may be prompted to grant permissionUnable to access local fonts
Permission denied or an error occurred.No fonts match your search
Try adjusting your search terms or clearing the filterPaste a Base64 encoded font string and generate the complete @font‑face CSS rule. Inline small fonts easily.
Load a WAV file and see its real-time oscilloscope trace and frequency spectrum. Zoom and pan. Pure frontend.
Enter a date and location (or use GPS) to see exact golden hour and blue hour times for perfect natural light.
Apply a fisheye or barrel distortion to your photo with adjustable strength. Simulate extreme wide angle.
A random note appears on the grand staff; click the correct piano key. Improve sheet music reading. Multiple clefs.
A random note name appears; click the correct position on the bass fretboard. Beat your time and accuracy.
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
Compress and decompress text using the browser's native Compression Streams API. See the binary output size.
Connect a game controller and see every button press, axis movement, and vibration test. Uses the Gamepad API.
Test required, pattern, minlength etc. See validity states and custom error messages. Learn browser‑native validation.
Unified input demo: see pressure, tilt, and type from any pointer. Compare pointerType values. Essential for drawing apps.
Modify the DOM via buttons and see MutationRecords logged. Understand childList, attributes, and subtree options.
Drag to resize a box and see the Resize Observer callback fire. Get contentRect and borderBoxSize. Learn the API.
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
Register a one‑off background sync and see it fire when connectivity returns. Debug service worker sync logic.
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Read, write, and delete cookies using the modern Cookie Store API. Monitor change events. No more document.cookie parsing.
Connect a gamepad and see all button presses and axis movements visually. Check that every input is detected correctly.
Trigger different vibration patterns on mobile devices. Test if your phone supports haptic feedback. Simple demo.
Check notification permission, request it, and send a test notification. Verify icon, body, and tag. Debug web push.
Display your effective connection type (4g, 3g, etc.) and downlink speed using the Navigator API. Adapt your app accordingly.
See your device's battery level, charging status, and discharge time using the Battery Status API. Fun utility.
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Experiment with the Async Clipboard API: read/write text and images from the clipboard. Verify permissions and see demo code.
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.