Nextd provides flexible font configuration solutions, supporting Web Safe Fonts and Google Fonts integration to ensure consistent user experience across different browsers and platforms.
Important Note: Nextd currently does not support direct upload of custom font files.
Web Safe Fonts are standard font families pre-installed on most operating systems. These fonts ensure text displays consistently across various browsers and platforms, providing reliable cross-platform compatibility.
Set appropriate fallback font stacks for custom fonts
Consider user experience optimization for font loading states
Through proper use of Web Safe Fonts and Google Fonts, you can create professional-looking interface designs with excellent user experience for your Nextd projects.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Nextd Documentation","colors":{"primary":"#16A34A","light":"#07C983","dark":"#15803D"},"logo":{"light":"https://mintcdn.com/nextd/w1BevCtjTd_kDfmp/logo/light.svg?fit=max\u0026auto=format\u0026n=w1BevCtjTd_kDfmp\u0026q=85\u0026s=1c51600b45ce339ec3b920e074696162","dark":"https://mintcdn.com/nextd/w1BevCtjTd_kDfmp/logo/dark.svg?fit=max\u0026auto=format\u0026n=w1BevCtjTd_kDfmp\u0026q=85\u0026s=ac51f7e8fb015f65503121de51371f38","href":"https://nextd.ai"},"favicon":"/favicon.svg","navbar":{"links":[{"label":"Support","href":"mailto:support@nextd.ai"}]},"footer":{"socials":{"x":"https://x.com/nextd_ai","github":"https://github.com/nextd-ai"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"]},"navigation":{"global":{"anchors":[{"anchor":"Nextd.ai","icon":"arrow-left","href":"https://nextd.ai"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"nextd","hasAudioNarration":false,"actualSubdomain":"nextd","customDomains":["docs.nextd.ai"],"gitSource":{"type":"github","owner":"pgyer","repo":"nextd-docs-mintlify","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a21e7b833a4518725aadf33","collectionId":"33c6c8a9-0a12-4c8e-b144-1641563b8fc0","schemaVersion":"v2"},"entitlements":{},"buildId":"6a21e7b833a4518725aadf33:success","clientVersion":"0.0.3971","searchFilterCounts":[{"language":"default","tag":"Features","count":9},{"language":"default","tag":"Integrations","count":4},{"language":"default","tag":"Guide","count":3},{"language":"default","tag":"Getting started","count":2},{"language":"default","tag":"Prompting","count":2}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"guide/custom-fonts","slug":"/guide/custom-fonts","pageMetadata":{"title":"Custom Fonts","description":"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.","icon":"font","href":"/guide/custom-fonts"},"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: \"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\"\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`,code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading,Table,Tip,Warning}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(Heading,{level:`2`,id:`overview`,children:`Overview`}),`\n`,_jsxs(_components.p,{children:[`Nextd provides flexible font configuration solutions, supporting `,_jsx(_components.strong,{children:`Web Safe Fonts`}),` and `,_jsx(_components.strong,{children:`Google Fonts`}),` integration to ensure consistent user experience across different browsers and platforms.`]}),`\n`,_jsx(Warning,{children:_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Important Note`}),`: Nextd currently does not support direct upload of custom font files.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`web-safe-fonts`,children:`Web Safe Fonts`}),`\n`,_jsx(Heading,{level:`3`,id:`what-are-web-safe-fonts`,children:`What are Web Safe Fonts`}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Web Safe Fonts`}),` are standard font families pre-installed on most operating systems. These fonts ensure text displays consistently across various browsers and platforms, providing reliable cross-platform compatibility.`]}),`\n`,_jsx(Heading,{level:`3`,id:`recommended-web-safe-fonts`,children:`Recommended Web Safe Fonts`}),`\n`,_jsx(_components.p,{children:`The following fonts have the best cross-platform compatibility:`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Font Family`}),_jsx(_components.th,{children:`Category`}),_jsx(_components.th,{children:`Best Use Case`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Arial / Helvetica`})}),_jsx(_components.td,{children:`Sans-serif`}),_jsx(_components.td,{children:`Body text and headers`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Times New Roman`})}),_jsx(_components.td,{children:`Serif`}),_jsx(_components.td,{children:`Formal documents`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Georgia`})}),_jsx(_components.td,{children:`Serif`}),_jsx(_components.td,{children:`Long-form reading`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Courier New`})}),_jsx(_components.td,{children:`Monospace`}),_jsx(_components.td,{children:`Code display`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Verdana`})}),_jsx(_components.td,{children:`Sans-serif`}),_jsx(_components.td,{children:`Screen display`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Tahoma`})}),_jsx(_components.td,{children:`Sans-serif`}),_jsx(_components.td,{children:`Compact layouts`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Trebuchet MS`})}),_jsx(_components.td,{children:`Sans-serif`}),_jsx(_components.td,{children:`Modern design`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Lucida Sans Unicode`})}),_jsx(_components.td,{children:`Sans-serif`}),_jsx(_components.td,{children:`Multi-language support`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`google-fonts-integration`,children:`Google Fonts Integration`}),`\n`,_jsx(Heading,{level:`3`,id:`method-1-specify-font-by-name`,children:`Method 1: Specify Font by Name`}),`\n`,_jsx(_components.p,{children:`Apply font styles by directly specifying Google font names in prompts.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`Steps:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:`Clearly specify font name in prompts`}),`\n`,_jsx(_components.li,{children:`Refresh the page to confirm the font is displayed correctly`}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example Prompt:`})}),`\n`,_jsx(CodeBlock,{numberOfLines:`2`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`2`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Use Playfair Display font as the font style for the first subtitle`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),`\n`,_jsx(Heading,{level:`3`,id:`method-2-import-font-via-link`,children:`Method 2: Import Font via Link`}),`\n`,_jsx(_components.p,{children:`Use Google Fonts direct links to import and apply fonts.`}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`Steps:`})}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Visit `,_jsx(_components.a,{href:`https://fonts.google.com`,children:`Google Fonts`}),` to get font links`]}),`\n`,_jsx(_components.li,{children:`Provide complete font link address in prompts`}),`\n`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.strong,{children:`Example Prompt:`})}),`\n`,_jsx(CodeBlock,{numberOfLines:`2`,language:`text`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`text`,children:_jsxs(_components.code,{language:`text`,numberOfLines:`2`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{children:`Add this Google font link https://fonts.google.com/specimen/Dancing+Script and apply this font to the third subtitle`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{})})]})})}),`\n`,_jsx(Heading,{level:`2`,id:`best-practice-recommendations`,children:`Best Practice Recommendations`}),`\n`,_jsx(Heading,{level:`3`,id:`font-selection-strategy`,children:`Font Selection Strategy`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Prioritize Readability`}),` - Ensure selected fonts have good readability across various screen sizes`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Maintain Brand Consistency`}),` - Choose fonts that match the overall design style of the project`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Consider Loading Performance`}),` - Google Fonts affect page loading speed, use multiple fonts cautiously`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Fallback Font Strategy`}),` - Set Web Safe Fonts as fallback options for Google Fonts`]}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`technical-implementation-points`,children:`Technical Implementation Points`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[`Use React’s `,_jsx(_components.code,{children:`useEffect`}),` hook to manage font loading`]}),`\n`,_jsx(_components.li,{children:`Set appropriate fallback font stacks for custom fonts`}),`\n`,_jsx(_components.li,{children:`Consider user experience optimization for font loading states`}),`\n`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`Through proper use of `,_jsx(_components.strong,{children:`Web Safe Fonts`}),` and `,_jsx(_components.strong,{children:`Google Fonts`}),`, you can create professional-looking interface designs with excellent user experience for your Nextd projects.`]})}),`\n`,_jsx(Heading,{level:`2`,id:`reference-resources`,children:`Reference Resources`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Resource`}),_jsx(_components.th,{children:`Description`}),_jsx(_components.th,{children:`Link`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Example Projects`})}),_jsx(_components.td,{children:`View practical application cases and implementation methods`}),_jsx(_components.td,{children:`Internal documentation`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Technical Documentation`})}),_jsx(_components.td,{children:`Deep dive into technical details of font integration`}),_jsx(_components.td,{children:`Nextd docs`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Google Fonts`})}),_jsx(_components.td,{children:`Explore rich font library resources`}),_jsx(_components.td,{children:_jsx(_components.a,{href:`https://fonts.google.com`,children:`fonts.google.com`})})]})]})]})]})}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":{"config":{},"pageMetadata":{"title":"Custom Fonts","description":"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.","icon":"font","href":"/guide/custom-fonts"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Overview","slug":"overview","depth":2,"children":[]},{"title":"Web Safe Fonts","slug":"web-safe-fonts","depth":2,"children":[{"title":"What are Web Safe Fonts","slug":"what-are-web-safe-fonts","depth":3,"children":[]},{"title":"Recommended Web Safe Fonts","slug":"recommended-web-safe-fonts","depth":3,"children":[]}]},{"title":"Google Fonts Integration","slug":"google-fonts-integration","depth":2,"children":[{"title":"Method 1: Specify Font by Name","slug":"method-1-specify-font-by-name","depth":3,"children":[]},{"title":"Method 2: Import Font via Link","slug":"method-2-import-font-via-link","depth":3,"children":[]}]},{"title":"Best Practice Recommendations","slug":"best-practice-recommendations","depth":2,"children":[{"title":"Font Selection Strategy","slug":"font-selection-strategy","depth":3,"children":[]},{"title":"Technical Implementation Points","slug":"technical-implementation-points","depth":3,"children":[]}]},{"title":"Reference Resources","slug":"reference-resources","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"nextd","siteName":"Nextd Documentation","title":"Custom Fonts - Nextd Documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"originalFileLocation":"guide/custom-fonts.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;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=\"system\"}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=\"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Nextd Documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_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/nextd/qpH14NfTFFrejfkM/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Custom Fonts - Nextd Documentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Nextd Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.nextd.ai/guide/custom-fonts\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://nextd.mintlify.app/_mintlify/api/og/v2?division=Guide\u0026amp;title=Custom+Fonts\u0026amp;description=Learn+how+to+configure+and+use+custom+fonts+in+Nextd+projects+to+ensure+consistent+cross-platform+user+experience.\u0026amp;theme=9c2e4db31b3b84af83af7c1e\u0026amp;signature=3c8034c5f7f4fd391243e85d26d83ca0a4674a382eaa740e6d52b6fb639e95cd\">\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=\"Custom Fonts - Nextd Documentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://nextd.mintlify.app/_mintlify/api/og/v2?division=Guide\u0026amp;title=Custom+Fonts\u0026amp;description=Learn+how+to+configure+and+use+custom+fonts+in+Nextd+projects+to+ensure+consistent+cross-platform+user+experience.\u0026amp;theme=9c2e4db31b3b84af83af7c1e\u0026amp;signature=3c8034c5f7f4fd391243e85d26d83ca0a4674a382eaa740e6d52b6fb639e95cd\">\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/nextd/qpH14NfTFFrejfkM/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Nextd Documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#16A34A\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.nextd.ai/guide/custom-fonts\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/guide/custom-fonts.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.nextd.ai/#organization\",\"name\":\"Nextd Documentation\",\"url\":\"https://docs.nextd.ai\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/nextd/w1BevCtjTd_kDfmp/logo/light.svg?fit=max\u0026auto=format\u0026n=w1BevCtjTd_kDfmp\u0026q=85\u0026s=1c51600b45ce339ec3b920e074696162\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.nextd.ai#website\",\"name\":\"Nextd Documentation\",\"url\":\"https://docs.nextd.ai\",\"publisher\":{\"@id\":\"https://docs.nextd.ai/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.nextd.ai/guide/custom-fonts#webpage\",\"url\":\"https://docs.nextd.ai/guide/custom-fonts\",\"name\":\"Custom Fonts\",\"description\":\"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\",\"isPartOf\":{\"@id\":\"https://docs.nextd.ai#website\"},\"breadcrumb\":{\"@id\":\"https://docs.nextd.ai/guide/custom-fonts#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.nextd.ai/guide/custom-fonts#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Guide\",\"item\":\"https://docs.nextd.ai/guide/best-practice\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Fonts\",\"item\":\"https://docs.nextd.ai/guide/custom-fonts\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.nextd.ai/guide/custom-fonts#article\",\"headline\":\"Custom Fonts\",\"name\":\"Custom Fonts\",\"description\":\"Learn how to configure and use custom fonts in Nextd projects to ensure consistent cross-platform user experience.\",\"url\":\"https://docs.nextd.ai/guide/custom-fonts\",\"mainEntityOfPage\":{\"@id\":\"https://docs.nextd.ai/guide/custom-fonts#webpage\"},\"publisher\":{\"@id\":\"https://docs.nextd.ai/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.nextd.ai#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Nextd Documentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Nextd Documentation","nav":{"global":{"anchors":[{"anchor":"Nextd.ai","icon":"arrow-left","href":"https://nextd.ai"}]},"groups":[{"group":"Getting started","icon":"play","pages":[{"title":"Introduction","href":"/index"},{"title":"Quickstart","href":"/quickstart"}]},{"group":"Guide","icon":"book-open","pages":[{"title":"Best Practices","description":"This guide will help you quickly master Nextd development techniques, avoid common pitfalls, and maximize development efficiency.","icon":"lightbulb","href":"/guide/best-practice"},{"title":"Custom Fonts","icon":"font","href":"/guide/custom-fonts"},{"title":"SEO","description":"Optimize your website search engine rankings with Nextd SEO tools and best practices.","icon":"magnifying-glass","href":"/guide/seo"}]},{"group":"Features","icon":"sparkles","tag":"NEW","pages":[{"title":"Project Analytics","icon":"chart-line","href":"/features/analytics"},{"title":"Code Mode","icon":"code","href":"/features/code-mode"},{"title":"Team Collaboration","icon":"users","href":"/features/team-collaboration"},{"title":"Custom Domain","icon":"globe","href":"/features/custom-domain"},{"title":"Knowledge","icon":"brain","href":"/features/knowledge"},{"title":"Agent Mode","icon":"robot","href":"/features/modes"},{"title":"Private Projects","icon":"lock","href":"/features/private-projects"},{"title":"Publish","icon":"rocket","href":"/features/publish"},{"title":"Security","icon":"shield-check","href":"/features/security"}]},{"group":"Integrations","icon":"plug","pages":[{"title":"GitHub","icon":"github","href":"/integrations/github"},{"title":"Supabase","icon":"database","href":"/integrations/supabase"},{"title":"Google Analytics","icon":"chart-line","href":"/integrations/google-analytics"},{"title":"Resend","icon":"envelope","href":"/integrations/resend"}]},{"group":"Prompting","icon":"wand-magic-sparkles","pages":[{"title":"Prompt Engineering","icon":"wand-magic-sparkles","href":"/prompting/guide"},{"title":"Prompt Template Library","icon":"book","href":"/prompting/library"}]}]},"title":"Custom Fonts - Nextd Documentation","buildId":"dpl_DFJrtvUi8HS5F9nkooKuDJsuD5BM","deploymentId":"dpl_DFJrtvUi8HS5F9nkooKuDJsuD5BM","dynamics":[],"chunks":[]}
