Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.
Font UI is a small typography workbench on avrxt’s personal website. Use it to compare the shape, rhythm, and readability of text before choosing a typeface for a project.
Browse or filter the font list, enter representative sample text, and select a family. Compare both short headings and longer sentences. Include numbers and punctuation if those are important to your design, then use the available copy controls.
The catalog uses Google Fonts metadata, with a fallback list when the full catalog is unavailable. Selecting a font loads its Google Fonts stylesheet. The fallback list may not include every available family. A delayed network request can briefly show a fallback typeface before the selected font arrives.
Copying styled text depends on browser clipboard support and the destination application. It does not install a font or guarantee that another app preserves formatting. Where offered, copy CSS and explicitly apply the family in your project. Review the individual font license before distributing the font with a project.
Sample text is handled by the browser interface. Loading fonts makes requests to Google font services. Use non-sensitive sample text when experimenting. If a preview does not update, allow the font request to complete and check whether an extension blocks it. Compare in your target browser before making a final design decision: operating systems can render the same typeface differently.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"AVRXT Docs","colors":{"primary":"#A3A3A3","light":"#E5E5E5","dark":"#404040"},"logo":{"light":"https://mintcdn.com/avrxtdev/dTyY0OI3EdTHFgIR/assets/logo-black.png?fit=max\u0026auto=format\u0026n=dTyY0OI3EdTHFgIR\u0026q=85\u0026s=9640b8a0f1331c4ea249ed603d76564e","dark":"https://mintcdn.com/avrxtdev/dTyY0OI3EdTHFgIR/assets/logo-white.png?fit=max\u0026auto=format\u0026n=dTyY0OI3EdTHFgIR\u0026q=85\u0026s=0fbd06fba3d056d119105a170aea5971","href":"/"},"favicon":"https://mintcdn.com/avrxtdev/dTyY0OI3EdTHFgIR/assets/favicon.ico?fit=max\u0026auto=format\u0026n=dTyY0OI3EdTHFgIR\u0026q=85\u0026s=690ec0d318d24664879a3e96b0cb0d18","api":{"openapi":"openapi.json","playground":{"display":"none"},"examples":{"languages":["curl","javascript","python"]}},"appearance":{"default":"dark","strict":true},"background":{"color":{"light":"#FAFAFA","dark":"#050505"}},"navbar":{"links":[{"href":"https://www.avrxt.dev","label":"Website"},{"href":"https://www.avrxt.dev/status","label":"Status"}],"primary":{"type":"button","label":"Get in touch","href":"https://www.avrxt.dev/contact"}},"footer":{"socials":{"github":"https://github.com/aviorxt","instagram":"https://www.instagram.com/aviorxt","website":"https://www.avrxt.dev"},"links":[{"header":"Explore","items":[{"label":"Personal website","href":"https://www.avrxt.dev"},{"label":"Profile","href":"https://me.avrxt.dev"},{"label":"Muzix","href":"https://muzix.avrxt.dev"}]},{"header":"Stay connected","items":[{"label":"Contact","href":"https://www.avrxt.dev/contact"},{"label":"Newsletter","href":"https://www.avrxt.dev/subscribe"},{"label":"with 🩶 @avrxt","href":"https://www.instagram.com/aviorxt"}]},{"header":"Policies","items":[{"label":"Privacy","href":"https://www.avrxt.dev/legal/privacy"},{"label":"Terms","href":"https://www.avrxt.dev/legal/terms"},{"label":"Security","href":"https://www.avrxt.dev/legal/security"}]}]},"search":{"prompt":"Search the documentation..."},"seo":{"metatags":{"og:site_name":"AVRXT Docs","og:locale":"en_IN","author":"avrxt (aviorxt)"},"indexing":"navigable"},"fonts":{"heading":{"family":"Outfit"},"body":{"family":"Inter"}},"styling":{"eyebrows":"breadcrumbs","codeblocks":{"theme":"github-dark-default"},"latex":false},"contextual":{"options":["copy","view"],"display":"header"},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"avrxtdev","hasAudioNarration":false,"actualSubdomain":"avrxtdev","customDomains":["docs.avrxt.dev"],"gitSource":{"type":"github","owner":"aviorxt","repo":"avrxt-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":"","_id":"6aedd3627c669e2886775fad"},"chroma":{"liveDeploymentHistoryId":"6a21b72557524d9f7507f9a4","collectionId":"0b8ea97f-e94e-4be2-99e1-c97e277ab00e","schemaVersion":"v2"},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6aedd40c14aa97ea2243a70a","clientVersion":"0.0.4074","searchFilterCounts":[{"language":"default","tag":"Field notes","count":21},{"language":"default","tag":"Documentation","count":12},{"language":"default","tag":"Maintainer notes","count":12},{"language":"default","tag":"API reference","count":11},{"language":"default","tag":"Tools","count":9},{"language":"default","tag":"Explore the website","count":7},{"language":"default","tag":"Keeping it running","count":7},{"language":"default","tag":"How it works","count":5},{"language":"default","tag":"Quality and everyday work","count":5},{"language":"default","tag":"Read endpoints","count":4}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":true},"customCss":[{"filePath":"style.css","content":"/* vietnamese */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYE58RWq7.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYE98RWq7.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n/* vietnamese */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFqaHjyV.woff2) format('woff2');\n unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;\n}\n/* latin-ext */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFuaHjyV.woff2) format('woff2');\n unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;\n}\n/* latin */\n@font-face {\n font-family: 'Space Mono';\n font-style: normal;\n font-weight: 700;\n font-display: swap;\n src: url(/_mintlify/assets/fonts/google/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2) format('woff2');\n unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n:root{--avrxt-muted:#888;--avrxt-line:#242424}html{scroll-behavior:smooth}body{background:#050505}h1,h2,h3,h4{letter-spacing:-.035em}code,pre,kbd,.avrxt-docs-eyebrow,.avrxt-docs-index,.avrxt-docs-bottom-note{font-family:'Space Mono',monospace!important}.avrxt-docs-hero{position:relative;margin:0 0 30px;padding:30px 0 0}.avrxt-docs-eyebrow{display:flex;align-items:center;gap:14px;color:#888;font-size:9px;letter-spacing:.19em;line-height:1.8}.avrxt-docs-line{width:28px;height:1px;background:#888}.avrxt-docs-hero-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr);gap:24px;align-items:center;padding:42px 0 46px}.avrxt-docs-hero h1{font-family:'Outfit',sans-serif;font-size:clamp(3.2rem,4.7vw,4.6rem);font-weight:600;line-height:.88;letter-spacing:-.075em;margin:0}.avrxt-docs-hero h1>span{color:transparent;-webkit-text-stroke:1px #858585}.avrxt-docs-hero p{max-width:29rem;margin:28px 0 0;font-size:14px;line-height:1.9;color:#999}.avrxt-docs-hero-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.avrxt-docs-hero-links a{display:inline-flex;gap:24px;align-items:center;min-height:44px;padding:0 16px;border:1px solid #333;text-decoration:none!important;font-size:11px;color:#e1e1e1!important;transition:background .25s,border-color .25s}.avrxt-docs-hero-links a:first-child{color:#111!important;background:#eee;border-color:#eee}.avrxt-docs-hero-links a:hover{border-color:#aaa;background:#252525}.avrxt-docs-hero-links a:first-child:hover{background:#ccc}.avrxt-docs-hero-links span{transition:transform .25s}.avrxt-docs-hero-links a:hover span{transform:translate(2px,-2px)}.avrxt-docs-emblem{position:relative;aspect-ratio:1;min-width:0;display:grid;place-items:center;background:radial-gradient(circle,#ffffff05,transparent 65%)}.avrxt-docs-emblem img{width:35%;max-height:100px;object-fit:contain;filter:grayscale(1);opacity:.85}.avrxt-docs-orbit{position:absolute;inset:7%;border:1px solid #333;border-radius:50%}.avrxt-docs-orbit::before{content:'';position:absolute;width:5px;height:5px;border-radius:50%;top:14%;left:14%;background:#bbb}.avrxt-docs-orbit-inner{inset:22%;border-style:dashed;animation:avrxt-docs-orbit 80s linear infinite}.avrxt-docs-emblem>span{position:absolute;bottom:0;font:7px 'Space Mono',monospace;color:#555;letter-spacing:.15em}.avrxt-docs-index{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--avrxt-line);padding-top:16px;font-size:8px;letter-spacing:.17em;color:#777}.avrxt-docs-bottom-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:36px;border-top:1px solid var(--avrxt-line);padding-top:18px;font-size:8px;line-height:1.8;letter-spacing:.08em;color:#777}.avrxt-docs-bottom-note a{text-decoration:none!important;color:#bbb!important}.card{border-radius:0!important;border-color:#282828!important;background:#090909!important;transition:border-color .25s,background .25s,transform .25s!important}.card:hover{border-color:#666!important;background:#101010!important;transform:translateY(-2px)}@keyframes avrxt-docs-orbit{to{transform:rotate(360deg)}}@media (max-width:767px){.avrxt-docs-hero-grid{grid-template-columns:1fr;padding-top:30px;padding-bottom:30px}.avrxt-docs-emblem{display:none}.avrxt-docs-hero h1{font-size:clamp(3.2rem,15vw,5rem)}.avrxt-docs-index{font-size:7px}.avrxt-docs-index>span:last-child{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.avrxt-docs-orbit-inner{animation:none}.card,.avrxt-docs-hero-links a,.avrxt-docs-hero-links span{transition:none!important}.card:hover{transform:none}}body:has(.avrxt-docs-hero) #header{display:none}body:has(.avrxt-docs-hero) .avrxt-docs-hero{padding-top:10px}"}],"page":{"pagePath":"tools/fontui","slug":"/tools/fontui","pageMetadata":{"title":"Preview fonts for your next design","sidebarTitle":"Font UI","description":"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.","href":"/tools/fontui"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,p:`p`,..._provideComponents(),...props.components},{Card,Heading}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!Heading)_missingMdxReference(`Heading`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Font UI is a small typography workbench on avrxt’s personal website. Use it to compare the shape, rhythm, and readability of text before choosing a typeface for a project.`}),`\n`,_jsx(Card,{title:`Open Font UI`,href:`https://www.avrxt.dev/tools/fontui`,children:`Try your own sample in the live tool.`}),`\n`,_jsx(Heading,{level:`2`,id:`try-a-typeface`,children:`Try a typeface`}),`\n`,_jsx(_components.p,{children:`Browse or filter the font list, enter representative sample text, and select a family. Compare both short headings and longer sentences. Include numbers and punctuation if those are important to your design, then use the available copy controls.`}),`\n`,_jsx(Heading,{level:`2`,id:`catalog-and-loading`,children:`Catalog and loading`}),`\n`,_jsx(_components.p,{children:`The catalog uses Google Fonts metadata, with a fallback list when the full catalog is unavailable. Selecting a font loads its Google Fonts stylesheet. The fallback list may not include every available family. A delayed network request can briefly show a fallback typeface before the selected font arrives.`}),`\n`,_jsx(Heading,{level:`2`,id:`copying-and-reuse`,children:`Copying and reuse`}),`\n`,_jsx(_components.p,{children:`Copying styled text depends on browser clipboard support and the destination application. It does not install a font or guarantee that another app preserves formatting. Where offered, copy CSS and explicitly apply the family in your project. Review the individual font license before distributing the font with a project.`}),`\n`,_jsx(Heading,{level:`2`,id:`privacy-and-troubleshooting`,children:`Privacy and troubleshooting`}),`\n`,_jsx(_components.p,{children:`Sample text is handled by the browser interface. Loading fonts makes requests to Google font services. Use non-sensitive sample text when experimenting. If a preview does not update, allow the font request to complete and check whether an extension blocks it. Compare in your target browser before making a final design decision: operating systems can render the same typeface differently.`}),`\n`,_jsx(Heading,{level:`2`,id:`related-reading`,children:`Related reading`}),`\n`,_jsxs(_components.p,{children:[`Explore the `,_jsx(_components.a,{href:`/guides/tools`,children:`complete toolbox`}),`, read about `,_jsx(_components.a,{href:`/guides/data-requests`,children:`privacy and data requests`}),`, or `,_jsx(_components.a,{href:`/guides/contact`,children:`report an issue`}),` with the selected family, browser, and a non-sensitive example.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":{"theme":"github-dark-default"},"config":{},"pageMetadata":{"title":"Preview fonts for your next design","sidebarTitle":"Font UI","description":"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.","href":"/tools/fontui"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Try a typeface","slug":"try-a-typeface","depth":2,"children":[]},{"title":"Catalog and loading","slug":"catalog-and-loading","depth":2,"children":[]},{"title":"Copying and reuse","slug":"copying-and-reuse","depth":2,"children":[]},{"title":"Privacy and troubleshooting","slug":"privacy-and-troubleshooting","depth":2,"children":[]},{"title":"Related reading","slug":"related-reading","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"avrxtdev","siteName":"AVRXT Docs","title":"Preview fonts for your next design - AVRXT Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-11-06T13:17:28.304Z","originalFileLocation":"tools/fontui.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=\"dark\";if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\">\u003cmeta data-mint-head name=\"application-name\" content=\"AVRXT Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Preview fonts for your next design - AVRXT Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"AVRXT Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.avrxt.dev/tools/fontui\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://avrxtdev.mintlify.site/_mintlify/api/og/v2?division=Type%2C+media+%26+input\u0026amp;title=Preview+fonts+for+your+next+design\u0026amp;description=Compare+typefaces%2C+preview+sample+text%2C+and+copy+styling+with+the+Font+UI+typography+workbench.\u0026amp;theme=4d5c7232bf2324dfea6f14ea\u0026amp;signature=a12f9610cb5690b9a6a8a97e285faa65287d508a08c4413fe42e60613adf094e\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Preview fonts for your next design - AVRXT Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://avrxtdev.mintlify.site/_mintlify/api/og/v2?division=Type%2C+media+%26+input\u0026amp;title=Preview+fonts+for+your+next+design\u0026amp;description=Compare+typefaces%2C+preview+sample+text%2C+and+copy+styling+with+the+Font+UI+typography+workbench.\u0026amp;theme=4d5c7232bf2324dfea6f14ea\u0026amp;signature=a12f9610cb5690b9a6a8a97e285faa65287d508a08c4413fe42e60613adf094e\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/avrxtdev/iLIXBw_GDuL3EGHd/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"AVRXT Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#A3A3A3\">\u003cmeta data-mint-head name=\"og:locale\" content=\"en_IN\">\u003cmeta data-mint-head name=\"author\" content=\"avrxt (aviorxt)\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.avrxt.dev/tools/fontui\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/tools/fontui.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.avrxt.dev/#organization\",\"name\":\"AVRXT Docs\",\"url\":\"https://docs.avrxt.dev\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/avrxtdev/dTyY0OI3EdTHFgIR/assets/logo-black.png?fit=max\u0026auto=format\u0026n=dTyY0OI3EdTHFgIR\u0026q=85\u0026s=9640b8a0f1331c4ea249ed603d76564e\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.avrxt.dev#website\",\"name\":\"AVRXT Docs\",\"url\":\"https://docs.avrxt.dev\",\"publisher\":{\"@id\":\"https://docs.avrxt.dev/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.avrxt.dev/tools/fontui#webpage\",\"url\":\"https://docs.avrxt.dev/tools/fontui\",\"name\":\"Preview fonts for your next design\",\"description\":\"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\",\"dateModified\":\"2026-11-06T13:17:28.304Z\",\"isPartOf\":{\"@id\":\"https://docs.avrxt.dev#website\"},\"breadcrumb\":{\"@id\":\"https://docs.avrxt.dev/tools/fontui#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.avrxt.dev/tools/fontui#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"AVRXT Docs\",\"item\":\"https://docs.avrxt.dev\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Preview fonts for your next design\",\"item\":\"https://docs.avrxt.dev/tools/fontui\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.avrxt.dev/tools/fontui#article\",\"headline\":\"Preview fonts for your next design\",\"name\":\"Preview fonts for your next design\",\"description\":\"Compare typefaces, preview sample text, and copy styling with the Font UI typography workbench.\",\"url\":\"https://docs.avrxt.dev/tools/fontui\",\"mainEntityOfPage\":{\"@id\":\"https://docs.avrxt.dev/tools/fontui#webpage\"},\"dateModified\":\"2026-11-06T13:17:28.304Z\",\"publisher\":{\"@id\":\"https://docs.avrxt.dev/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.avrxt.dev#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"AVRXT Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"AVRXT Docs","nav":{"global":null,"tabs":[{"tab":"Documentation","pages":[{"title":"Documentation","href":""}]},{"tab":"Tools","groups":[{"group":"The toolbox","pages":[{"sidebarTitle":"Tools","title":"Small tools. Useful outcomes.","href":"/guides/tools"}]},{"group":"Network \u0026 email","pages":[{"title":"Inspect your public IP address","sidebarTitle":"What is my IP?","href":"/tools/whatismyip"},{"title":"Check an authorized public TCP port","sidebarTitle":"Port checker","href":"/tools/portcheck"},{"title":"Check email syntax and MX records","sidebarTitle":"Mailfy","href":"/tools/mailfy"},{"title":"Inspect DNS and domain registration","sidebarTitle":"DNS + RDAP","description":"Read public DNS answers and optional RDAP records with clear explanations of caching and registration limits.","href":"/tools/dns"}]},{"group":"Type, media \u0026 input","pages":[{"title":"Preview fonts for your next design","sidebarTitle":"Font UI","href":"/tools/fontui"},{"title":"Preview an official Spotify item","sidebarTitle":"Spotify preview","description":"Load an official Spotify link in its embedded player and understand playback availability and privacy.","href":"/tools/spotmp3"},{"title":"Find a quote and its attribution","sidebarTitle":"Random quote","href":"/tools/quote"},{"title":"See the key events your browser receives","sidebarTitle":"Keyboard tester","href":"/tools/keytest"}]}]},{"tab":"API reference","pages":[{"title":"API reference","href":"/api-reference/overview"}]},{"tab":"Technical notes","pages":[{"title":"Technical notes","href":"/technical/free-services"}]},{"tab":"Field notes","pages":[{"title":"Field notes","href":"/notes"}]},{"tab":"Maintainer notes","pages":[{"title":"Maintainer notes","href":"/maintaining/architecture"}]}]},"basePath":"","title":"Preview fonts for your next design - AVRXT Docs","buildId":"dpl_BLQvU86QFwq3AhPofSTw6q8dGWKm","deploymentId":"dpl_BLQvU86QFwq3AhPofSTw6q8dGWKm","dynamics":[],"chunks":[]}