[{"data":1,"prerenderedAt":435},["ShallowReactive",2],{"navigation_docs":3,"-get-started-usage":38,"-get-started-usage-surround":430},[4,30,34],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Getting Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Usage","\u002Fget-started\u002Fusage","1.get-started\u002F3.usage",{"title":22,"path":23,"stem":24},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F4.providers",{"title":26,"path":27,"stem":28},"Upgrade Guide","\u002Fget-started\u002Fupgrade","1.get-started\u002F5.upgrade",false,{"title":31,"path":32,"stem":33},"Advanced","\u002Fadvanced","2.advanced",{"title":35,"path":36,"stem":37},"Contributing","\u002Fcontributing","3.contributing",{"id":39,"title":18,"body":40,"description":424,"extension":425,"links":426,"meta":427,"navigation":296,"path":19,"seo":428,"stem":20,"__hash__":429},"docs\u002F1.get-started\u002F3.usage.md",{"type":41,"value":42,"toc":419},"minimark",[43,48,57,116,123,134,138,141,175,189,215,237,249,253,260,374,383,415],[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\u002Fcss\u002Ffonts.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",[49,139,140],{},"With Tailwind CSS you specify fonts using a CSS variable:",[58,142,145],{"className":60,"code":143,"filename":144,"language":63,"meta":64,"style":64},"@theme {\n  --font-display: \"Inter\", \"sans-serif\";\n}\n","main.css",[53,146,147,155,171],{"__ignoreMap":64},[68,148,149,153],{"class":70,"line":71},[68,150,152],{"class":151},"s7zQu","@theme",[68,154,79],{"class":78},[68,156,157,160,162,165,168],{"class":70,"line":82},[68,158,159],{"class":105},"  --font-display: \"Inter\"",[68,161,102],{"class":78},[68,163,164],{"class":105}," \"",[68,166,167],{"class":74},"sans-serif",[68,169,170],{"class":105},"\";\n",[68,172,173],{"class":70,"line":112},[68,174,115],{"class":105},[49,176,177,178,181,182,185,186,89],{},"Overriding Tailwind's default font family works too, including via ",[53,179,180],{},"@theme inline",", which compiles ",[53,183,184],{},"--font-sans"," down to ",[53,187,188],{},"--default-font-family",[58,190,192],{"className":60,"code":191,"filename":144,"language":63,"meta":64,"style":64},"@theme {\n  --default-font-family: \"Inter\", sans-serif;\n}\n",[53,193,194,200,211],{"__ignoreMap":64},[68,195,196,198],{"class":70,"line":71},[68,197,152],{"class":151},[68,199,79],{"class":78},[68,201,202,205,207,209],{"class":70,"line":82},[68,203,204],{"class":105},"  --default-font-family: \"Inter\"",[68,206,102],{"class":78},[68,208,106],{"class":74},[68,210,109],{"class":105},[68,212,213],{"class":70,"line":112},[68,214,115],{"class":105},[117,216,217,218,221,222,224,225,228,229,232,233,236],{},"Nuxt Fonts reads the CSS Tailwind generates, so a font is only picked up if it ends up there. A ",[53,219,220],{},"--font-*"," theme variable that is never used by a utility (and is declared with ",[53,223,180],{},") is removed by Tailwind before Nuxt Fonts sees it. Use the utility at least once, declare it with ",[53,226,227],{},"@theme static",", or set the font in ",[53,230,231],{},"fonts.families"," with ",[53,234,235],{},"global: true",".",[238,239,240,241,244,245,248],"tip",{},"If you previously set ",[53,242,243],{},"processCSSVariables"," to ",[53,246,247],{},"true"," for Tailwind v4 support, it is no longer needed or recommended for v0.11.0 and above.",[44,250,252],{"id":251},"unocss","UnoCSS",[49,254,255,256,259],{},"You can use Nuxt Fonts with UnoCSS by setting ",[53,257,258],{},"fontFamily"," in your configuration file:",[58,261,266],{"className":262,"code":263,"filename":264,"language":265,"meta":64,"style":64},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from 'unocss'\n\nexport default defineConfig({\n  theme: {\n    fontFamily: {\n      inter: 'Inter',\n    },\n  },\n})\n","uno.config.js","js",[53,267,268,292,298,315,326,336,353,359,365],{"__ignoreMap":64},[68,269,270,273,276,279,282,285,287,289],{"class":70,"line":71},[68,271,272],{"class":151},"import",[68,274,275],{"class":78}," {",[68,277,278],{"class":105}," defineConfig",[68,280,281],{"class":78}," }",[68,283,284],{"class":151}," from",[68,286,92],{"class":78},[68,288,251],{"class":95},[68,290,291],{"class":78},"'\n",[68,293,294],{"class":70,"line":82},[68,295,297],{"emptyLinePlaceholder":296},true,"\n",[68,299,300,303,306,309,312],{"class":70,"line":112},[68,301,302],{"class":151},"export",[68,304,305],{"class":151}," default",[68,307,278],{"class":308},"s2Zo4",[68,310,311],{"class":105},"(",[68,313,314],{"class":78},"{\n",[68,316,318,322,324],{"class":70,"line":317},4,[68,319,321],{"class":320},"swJcz","  theme",[68,323,89],{"class":78},[68,325,79],{"class":78},[68,327,329,332,334],{"class":70,"line":328},5,[68,330,331],{"class":320},"    fontFamily",[68,333,89],{"class":78},[68,335,79],{"class":78},[68,337,339,342,344,346,348,350],{"class":70,"line":338},6,[68,340,341],{"class":320},"      inter",[68,343,89],{"class":78},[68,345,92],{"class":78},[68,347,96],{"class":95},[68,349,99],{"class":78},[68,351,352],{"class":78},",\n",[68,354,356],{"class":70,"line":355},7,[68,357,358],{"class":78},"    },\n",[68,360,362],{"class":70,"line":361},8,[68,363,364],{"class":78},"  },\n",[68,366,368,371],{"class":70,"line":367},9,[68,369,370],{"class":78},"}",[68,372,373],{"class":105},")\n",[49,375,376,377,380,381,236],{},"If you're using the Wind4 (Tailwind4) preset, set ",[53,378,379],{},"font"," instead of ",[53,382,258],{},[58,384,386],{"className":262,"code":385,"language":265,"meta":64,"style":64},"    font: {\n      inter: 'Inter',\n    },\n",[53,387,388,397,411],{"__ignoreMap":64},[68,389,390,393,395],{"class":70,"line":71},[68,391,392],{"class":74},"    font",[68,394,89],{"class":78},[68,396,79],{"class":78},[68,398,399,401,403,405,407,409],{"class":70,"line":82},[68,400,341],{"class":74},[68,402,89],{"class":78},[68,404,92],{"class":78},[68,406,96],{"class":95},[68,408,99],{"class":78},[68,410,352],{"class":78},[68,412,413],{"class":70,"line":112},[68,414,358],{"class":78},[416,417,418],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":64,"searchDepth":82,"depth":82,"links":420},[421,422,423],{"id":46,"depth":82,"text":47},{"id":136,"depth":82,"text":137},{"id":251,"depth":82,"text":252},"Use Nuxt Fonts with any CSS framework or library.","md",null,{},{"title":18,"description":424},"V1UXMweYTTy1zOCVixhVKvbcQPdfGSYHyum14yqZSqU",[431,433],{"title":14,"path":15,"stem":16,"description":432,"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":434,"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.",1788752883860]