[{"data":1,"prerenderedAt":480},["ShallowReactive",2],{"navigation_docs":3,"-get-started-usage":38,"-get-started-usage-surround":475},[4,30,34],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Getting Started","/get-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Usage","/get-started/usage","1.get-started/3.usage",{"title":22,"path":23,"stem":24},"Providers","/get-started/providers","1.get-started/4.providers",{"title":26,"path":27,"stem":28},"Upgrade Guide","/get-started/upgrade","1.get-started/5.upgrade",false,{"title":31,"path":32,"stem":33},"Advanced","/advanced","2.advanced",{"title":35,"path":36,"stem":37},"Contributing","/contributing","3.contributing",{"id":39,"title":18,"body":40,"description":469,"extension":470,"links":471,"meta":472,"navigation":350,"path":19,"seo":473,"stem":20,"__hash__":474},"docs/1.get-started/3.usage.md",{"type":41,"value":42,"toc":461},"minimark",[43,48,57,116,123,134,138,143,150,244,249,252,263,296,307,311,316,415,425,457],[44,45,47],"h2",{"id":46},"pure-css","Pure CSS",[49,50,51,52,56],"p",{},"You can use Nuxt Fonts with pure CSS by adding ",[53,54,55],"code",{},"font-family"," declarations to your CSS:",[58,59,65],"pre",{"className":60,"code":61,"filename":62,"language":63,"meta":64,"style":64},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","div {\n  font-family: 'Inter', sans-serif;\n}\n","assets/css/fonts.css","css","",[53,66,67,80,110],{"__ignoreMap":64},[68,69,72,76],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sBMFI","div",[68,77,79],{"class":78},"sMK4o"," {\n",[68,81,83,87,90,93,97,100,103,107],{"class":70,"line":82},2,[68,84,86],{"class":85},"sqsOY","  font-family",[68,88,89],{"class":78},":",[68,91,92],{"class":78}," '",[68,94,96],{"class":95},"sfazB","Inter",[68,98,99],{"class":78},"'",[68,101,102],{"class":78},",",[68,104,106],{"class":105},"sTEyZ"," sans-serif",[68,108,109],{"class":78},";\n",[68,111,113],{"class":70,"line":112},3,[68,114,115],{"class":78},"}\n",[117,118,119,120,122],"note",{},"Note that Nuxt Fonts will only generate CSS for the first font in a ",[53,121,55],{}," declaration. Subsequent fonts in the list will be used to generate metrics for font fallbacks.",[124,125,126,127,129,130,133],"warning",{},"Inline styles with ",[53,128,55],{}," within your ",[53,131,132],{},"\u003Ctemplate>"," do currently not work; it only processes CSS stylesheets.",[44,135,137],{"id":136},"tailwind-css","Tailwind CSS",[139,140,142],"h3",{"id":141},"v3-and-below","v3 and below",[49,144,145,146,149],{},"You can use Nuxt Fonts with Tailwind CSS by setting ",[53,147,148],{},"fontFamily"," in your configuration file:",[58,151,156],{"className":152,"code":153,"filename":154,"language":155,"meta":64,"style":64},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default {\n  theme: {\n    extend: {\n      fontFamily: {\n        custom: ['Inter'],\n      },\n    },\n  },\n}\n","tailwind.config.js","js",[53,157,158,169,179,188,198,221,227,233,239],{"__ignoreMap":64},[68,159,160,164,167],{"class":70,"line":71},[68,161,163],{"class":162},"s7zQu","export",[68,165,166],{"class":162}," default",[68,168,79],{"class":78},[68,170,171,175,177],{"class":70,"line":82},[68,172,174],{"class":173},"swJcz","  theme",[68,176,89],{"class":78},[68,178,79],{"class":78},[68,180,181,184,186],{"class":70,"line":112},[68,182,183],{"class":173},"    extend",[68,185,89],{"class":78},[68,187,79],{"class":78},[68,189,191,194,196],{"class":70,"line":190},4,[68,192,193],{"class":173},"      fontFamily",[68,195,89],{"class":78},[68,197,79],{"class":78},[68,199,201,204,206,209,211,213,215,218],{"class":70,"line":200},5,[68,202,203],{"class":173},"        custom",[68,205,89],{"class":78},[68,207,208],{"class":105}," [",[68,210,99],{"class":78},[68,212,96],{"class":95},[68,214,99],{"class":78},[68,216,217],{"class":105},"]",[68,219,220],{"class":78},",\n",[68,222,224],{"class":70,"line":223},6,[68,225,226],{"class":78},"      },\n",[68,228,230],{"class":70,"line":229},7,[68,231,232],{"class":78},"    },\n",[68,234,236],{"class":70,"line":235},8,[68,237,238],{"class":78},"  },\n",[68,240,242],{"class":70,"line":241},9,[68,243,115],{"class":78},[245,246,248],"tip",{"to":247},"https://v3.tailwindcss.com/docs/font-family#customizing-your-theme","If the font name contains an invalid identifier (like a space character), you'll need to wrap it in quotes or escape the character manually.",[139,250,251],{"id":251},"v4",[49,253,254,255,262],{},"TailwindCSS v4 brings a ",[256,257,261],"a",{"href":258,"rel":259},"https://tailwindcss.com/blog/tailwindcss-v4-alpha",[260],"nofollow","brand new way"," for configuration. In v4 if you want to specify a font, you would use a CSS variable:",[58,264,267],{"className":60,"code":265,"filename":266,"language":63,"meta":64,"style":64},"@theme {\n  --font-display: \"Inter\", \"sans-serif\";\n}\n","main.css",[53,268,269,276,292],{"__ignoreMap":64},[68,270,271,274],{"class":70,"line":71},[68,272,273],{"class":162},"@theme",[68,275,79],{"class":78},[68,277,278,281,283,286,289],{"class":70,"line":82},[68,279,280],{"class":105},"  --font-display: \"Inter\"",[68,282,102],{"class":78},[68,284,285],{"class":105}," \"",[68,287,288],{"class":74},"sans-serif",[68,290,291],{"class":105},"\";\n",[68,293,294],{"class":70,"line":112},[68,295,115],{"class":105},[245,297,298,299,302,303,306],{},"If you previously set ",[53,300,301],{},"processCSSVariables"," to ",[53,304,305],{},"true"," for Tailwind v4 support, it is no longer needed or recommended for v0.11.0 and above.",[44,308,310],{"id":309},"unocss","UnoCSS",[49,312,313,314,149],{},"You can use Nuxt Fonts with UnoCSS by setting ",[53,315,148],{},[58,317,320],{"className":152,"code":318,"filename":319,"language":155,"meta":64,"style":64},"import { defineConfig } from 'unocss'\n\nexport default defineConfig({\n  theme: {\n    fontFamily: {\n      inter: 'Inter',\n    },\n  },\n})\n","uno.config.js",[53,321,322,346,352,367,375,384,399,403,407],{"__ignoreMap":64},[68,323,324,327,330,333,336,339,341,343],{"class":70,"line":71},[68,325,326],{"class":162},"import",[68,328,329],{"class":78}," {",[68,331,332],{"class":105}," defineConfig",[68,334,335],{"class":78}," }",[68,337,338],{"class":162}," from",[68,340,92],{"class":78},[68,342,309],{"class":95},[68,344,345],{"class":78},"'\n",[68,347,348],{"class":70,"line":82},[68,349,351],{"emptyLinePlaceholder":350},true,"\n",[68,353,354,356,358,361,364],{"class":70,"line":112},[68,355,163],{"class":162},[68,357,166],{"class":162},[68,359,332],{"class":360},"s2Zo4",[68,362,363],{"class":105},"(",[68,365,366],{"class":78},"{\n",[68,368,369,371,373],{"class":70,"line":190},[68,370,174],{"class":173},[68,372,89],{"class":78},[68,374,79],{"class":78},[68,376,377,380,382],{"class":70,"line":200},[68,378,379],{"class":173},"    fontFamily",[68,381,89],{"class":78},[68,383,79],{"class":78},[68,385,386,389,391,393,395,397],{"class":70,"line":223},[68,387,388],{"class":173},"      inter",[68,390,89],{"class":78},[68,392,92],{"class":78},[68,394,96],{"class":95},[68,396,99],{"class":78},[68,398,220],{"class":78},[68,400,401],{"class":70,"line":229},[68,402,232],{"class":78},[68,404,405],{"class":70,"line":235},[68,406,238],{"class":78},[68,408,409,412],{"class":70,"line":241},[68,410,411],{"class":78},"}",[68,413,414],{"class":105},")\n",[49,416,417,418,421,422,424],{},"If you're using the Wind4 (Tailwind4) preset, set ",[53,419,420],{},"font"," instead of ",[53,423,148],{},".",[58,426,428],{"className":152,"code":427,"language":155,"meta":64,"style":64},"    font: {\n      inter: 'Inter',\n    },\n",[53,429,430,439,453],{"__ignoreMap":64},[68,431,432,435,437],{"class":70,"line":71},[68,433,434],{"class":74},"    font",[68,436,89],{"class":78},[68,438,79],{"class":78},[68,440,441,443,445,447,449,451],{"class":70,"line":82},[68,442,388],{"class":74},[68,444,89],{"class":78},[68,446,92],{"class":78},[68,448,96],{"class":95},[68,450,99],{"class":78},[68,452,220],{"class":78},[68,454,455],{"class":70,"line":112},[68,456,232],{"class":78},[458,459,460],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":64,"searchDepth":82,"depth":82,"links":462},[463,464,468],{"id":46,"depth":82,"text":47},{"id":136,"depth":82,"text":137,"children":465},[466,467],{"id":141,"depth":112,"text":142},{"id":251,"depth":112,"text":251},{"id":309,"depth":82,"text":310},"Use Nuxt Fonts with any CSS framework or library.","md",null,{},{"title":18,"description":469},"z0TPh2mlQRaMicWnvwZElkkJQk2T0Y0GEiMZqm3vIRs",[476,478],{"title":14,"path":15,"stem":16,"description":477,"children":-1},"Nuxt Fonts works out of the box with zero config, but you can always add some configurations for finer-grained control.",{"title":22,"path":23,"stem":24,"description":479,"children":-1},"Font providers are designed to be pluggable and extensible, so no matter your setup you should be able to use an existing provider or write your own.",1776348207185]