Font Inspector

The Font Inspector bookmarklet is a powerful tool for web developers and designers to quickly identify font properties on any webpage. This tool provides detailed information about text styling, helping developers understand and maintain consistent typography.

javascript:!function(){const n=document.createElement("div");n.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        padding: 15px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10000;\n        font-family: system-ui, sans-serif;\n        max-width: 350px;\n    ";const t=document.createElement("button");t.innerHTML="×",t.style.cssText="\n        float: right;\n        border: none;\n        background: none;\n        font-size: 20px;\n        cursor: pointer;\n        padding: 0 5px;\n    ",t.onclick=()=>{document.body.removeEventListener("mouseover",i),document.body.removeEventListener("click",s),n.remove()};const e=document.createElement("div");e.innerHTML="<strong>Font Inspector</strong><br>Hover over text to inspect fonts",n.appendChild(t),n.appendChild(e),document.body.appendChild(n);let o=null;function r(n){const t=window.getComputedStyle(n);return{family:t.fontFamily,size:t.fontSize,weight:t.fontWeight,style:t.fontStyle,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing,color:t.color}}function i(n){if(n.target.innerText&&n.target!==o){o=n.target;const t=r(n.target);e.innerHTML=`\n                <strong>Font Inspector</strong><br>\n                <div style="margin-top: 10px;">\n                    <strong>Font Family:</strong> ${t.family}<br>\n                    <strong>Size:</strong> ${t.size}<br>\n                    <strong>Weight:</strong> ${t.weight}<br>\n                    <strong>Style:</strong> ${t.style}<br>\n                    <strong>Line Height:</strong> ${t.lineHeight}<br>\n                    <strong>Letter Spacing:</strong> ${t.letterSpacing}<br>\n                    <strong>Color:</strong> ${t.color}\n                </div>\n            `,n.target.style.outline="2px solid #4CAF50"}}function s(n){if(n.target.innerText){n.preventDefault();const t=r(n.target);console.log("Font Information:",t)}}document.body.addEventListener("mouseover",i),document.body.addEventListener("click",s),document.body.addEventListener("mouseout",(n=>{n.target.innerText&&(n.target.style.outline="")}))}();

• Shows font properties on hover
• Displays family, size, and weight
• Includes line height and spacing
• Updates in real-time as you move
• Simple to use with a single click

Why Use Font Inspector? #

The Font Inspector bookmarklet is essential for developers and designers who need to:

• Identify exact font properties
• Maintain typography consistency
• Debug font-related issues
• Extract font values for development
• Understand text styling

Features #

1. Comprehensive Font Information

   • Font family
   • Font size
   • Font weight
   • Font style
   • Line height
   • Letter spacing

2. Text Styling Details

   • Text transform
   • Text decoration
   • Text color
   • Visual color swatch
   • Complete style information

3. Real-Time Updates

   • Instant property updates
   • Live preview as you move
   • Accurate measurements
   • Non-intrusive interface

4. User-Friendly Interface

   • Clean, modern design
   • Easy to read values
   • Organized information
   • Clear presentation

How to Use #

1. Click the bookmarklet to activate the tool
2. Click the "Start Inspecting Fonts" button
3. Move your cursor over any text
4. View the font information in the popup
5. Close the tool when done

Best Practices #

• Use this tool to maintain typography consistency
• Check font hierarchy
• Verify font implementation
• Document font styles
• Test font variations

• Previous: Event Listener Viewer
• Next: Google Site Search