[{"data":1,"prerenderedAt":615},["ShallowReactive",2],{"navigation_docs":3,"-get-started-usage":38,"-get-started-usage-surround":610},[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":604,"extension":605,"links":606,"meta":607,"navigation":490,"path":19,"seo":608,"stem":20,"__hash__":609},"docs\u002F1.get-started\u002F3.usage.md",{"type":41,"value":42,"toc":598},"minimark",[43,48,57,116,123,140,144,154,157,194,204,321,328,331,335,338,371,384,410,431,443,447,454,554,563,595],[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,134,139],"warning",{},"Inline styles with ",[53,128,55],{}," within your ",[53,131,132],{},"\u003Ctemplate>"," don't work; only CSS stylesheets are processed. See ",[135,136,138],"a",{"href":137},"#when-a-font-isnt-picked-up","when a font isn't picked up",".",[44,141,143],{"id":142},"when-a-font-isnt-picked-up","When a font isn't picked up",[49,145,146,147,149,150,153],{},"Nuxt Fonts resolves fonts by scanning the CSS your project generates for ",[53,148,55],{}," declarations. A font that's never named in that CSS is never resolved, so no ",[53,151,152],{},"@font-face"," rule is emitted and the browser falls back to a system font.",[49,155,156],{},"Common places a font stays invisible to the scan:",[158,159,160,168,177,188,191],"ul",{},[161,162,163,164,167],"li",{},"a ",[53,165,166],{},"style"," attribute in a template, or any other inline style",[161,169,163,170,172,173,176],{},[53,171,55],{}," inside an SVG, whether served from ",[53,174,175],{},"public\u002F"," or imported as an asset",[161,178,179,180,183,184,187],{},"a Tailwind v4 ",[53,181,182],{},"--font-*"," theme variable declared with ",[53,185,186],{},"@theme inline"," that no utility uses, which Tailwind drops before Nuxt Fonts sees it",[161,189,190],{},"a font named only at runtime, such as a family a user chooses and you apply through a CSS variable",[161,192,193],{},"a font set by CSS-in-JS, a third-party stylesheet, or a framework preset that isn't part of your own CSS",[49,195,196,197,200,201,203],{},"For all of these, declare the family with ",[53,198,199],{},"global: true"," and Nuxt Fonts emits its ",[53,202,152],{}," rules whether or not it finds a use for them:",[58,205,210],{"className":206,"code":207,"filename":208,"language":209,"meta":64,"style":64},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  fonts: {\n    families: [\n      { name: 'Anton', provider: 'google', global: true },\n    ],\n  },\n})\n","nuxt.config.ts","ts",[53,211,212,231,241,251,297,306,312],{"__ignoreMap":64},[68,213,214,218,221,225,228],{"class":70,"line":71},[68,215,217],{"class":216},"s7zQu","export",[68,219,220],{"class":216}," default",[68,222,224],{"class":223},"s2Zo4"," defineNuxtConfig",[68,226,227],{"class":105},"(",[68,229,230],{"class":78},"{\n",[68,232,233,237,239],{"class":70,"line":82},[68,234,236],{"class":235},"swJcz","  fonts",[68,238,89],{"class":78},[68,240,79],{"class":78},[68,242,243,246,248],{"class":70,"line":112},[68,244,245],{"class":235},"    families",[68,247,89],{"class":78},[68,249,250],{"class":105}," [\n",[68,252,254,257,260,262,264,267,269,271,274,276,278,281,283,285,288,290,294],{"class":70,"line":253},4,[68,255,256],{"class":78},"      {",[68,258,259],{"class":235}," name",[68,261,89],{"class":78},[68,263,92],{"class":78},[68,265,266],{"class":95},"Anton",[68,268,99],{"class":78},[68,270,102],{"class":78},[68,272,273],{"class":235}," provider",[68,275,89],{"class":78},[68,277,92],{"class":78},[68,279,280],{"class":95},"google",[68,282,99],{"class":78},[68,284,102],{"class":78},[68,286,287],{"class":235}," global",[68,289,89],{"class":78},[68,291,293],{"class":292},"sfNiH"," true",[68,295,296],{"class":78}," },\n",[68,298,300,303],{"class":70,"line":299},5,[68,301,302],{"class":105},"    ]",[68,304,305],{"class":78},",\n",[68,307,309],{"class":70,"line":308},6,[68,310,311],{"class":78},"  },\n",[68,313,315,318],{"class":70,"line":314},7,[68,316,317],{"class":78},"}",[68,319,320],{"class":105},")\n",[49,322,323,324,327],{},"You can then use ",[53,325,326],{},"font-family: 'Anton'"," anywhere, including in places Nuxt Fonts never scans.",[117,329,330],{},"Global families are injected into a single stylesheet loaded on every page, so keep the list short: every visitor downloads the CSS for each one.",[44,332,334],{"id":333},"tailwind-css","Tailwind CSS",[49,336,337],{},"With Tailwind CSS you specify fonts using a CSS variable:",[58,339,342],{"className":60,"code":340,"filename":341,"language":63,"meta":64,"style":64},"@theme {\n  --font-display: \"Inter\", \"sans-serif\";\n}\n","main.css",[53,343,344,351,367],{"__ignoreMap":64},[68,345,346,349],{"class":70,"line":71},[68,347,348],{"class":216},"@theme",[68,350,79],{"class":78},[68,352,353,356,358,361,364],{"class":70,"line":82},[68,354,355],{"class":105},"  --font-display: \"Inter\"",[68,357,102],{"class":78},[68,359,360],{"class":105}," \"",[68,362,363],{"class":74},"sans-serif",[68,365,366],{"class":105},"\";\n",[68,368,369],{"class":70,"line":112},[68,370,115],{"class":105},[49,372,373,374,376,377,380,381,89],{},"Overriding Tailwind's default font family works too, including via ",[53,375,186],{},", which compiles ",[53,378,379],{},"--font-sans"," down to ",[53,382,383],{},"--default-font-family",[58,385,387],{"className":60,"code":386,"filename":341,"language":63,"meta":64,"style":64},"@theme {\n  --default-font-family: \"Inter\", sans-serif;\n}\n",[53,388,389,395,406],{"__ignoreMap":64},[68,390,391,393],{"class":70,"line":71},[68,392,348],{"class":216},[68,394,79],{"class":78},[68,396,397,400,402,404],{"class":70,"line":82},[68,398,399],{"class":105},"  --default-font-family: \"Inter\"",[68,401,102],{"class":78},[68,403,106],{"class":74},[68,405,109],{"class":105},[68,407,408],{"class":70,"line":112},[68,409,115],{"class":105},[117,411,412,413,415,416,418,419,422,423,426,427,139],{},"Nuxt Fonts reads the CSS Tailwind generates, so a font is only picked up if it ends up there. A ",[53,414,182],{}," theme variable that is never used by a utility (and is declared with ",[53,417,186],{},") is removed by Tailwind before Nuxt Fonts sees it. Use the utility at least once, declare it with ",[53,420,421],{},"@theme static",", or set the font in ",[53,424,425],{},"fonts.families"," with ",[135,428,429],{"href":137},[53,430,199],{},[432,433,434,435,438,439,442],"tip",{},"If you previously set ",[53,436,437],{},"processCSSVariables"," to ",[53,440,441],{},"true"," for Tailwind v4 support, it is no longer needed or recommended for v0.11.0 and above.",[44,444,446],{"id":445},"unocss","UnoCSS",[49,448,449,450,453],{},"You can use Nuxt Fonts with UnoCSS by setting ",[53,451,452],{},"fontFamily"," in your configuration file:",[58,455,460],{"className":456,"code":457,"filename":458,"language":459,"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,461,462,486,492,504,513,522,537,542,547],{"__ignoreMap":64},[68,463,464,467,470,473,476,479,481,483],{"class":70,"line":71},[68,465,466],{"class":216},"import",[68,468,469],{"class":78}," {",[68,471,472],{"class":105}," defineConfig",[68,474,475],{"class":78}," }",[68,477,478],{"class":216}," from",[68,480,92],{"class":78},[68,482,445],{"class":95},[68,484,485],{"class":78},"'\n",[68,487,488],{"class":70,"line":82},[68,489,491],{"emptyLinePlaceholder":490},true,"\n",[68,493,494,496,498,500,502],{"class":70,"line":112},[68,495,217],{"class":216},[68,497,220],{"class":216},[68,499,472],{"class":223},[68,501,227],{"class":105},[68,503,230],{"class":78},[68,505,506,509,511],{"class":70,"line":253},[68,507,508],{"class":235},"  theme",[68,510,89],{"class":78},[68,512,79],{"class":78},[68,514,515,518,520],{"class":70,"line":299},[68,516,517],{"class":235},"    fontFamily",[68,519,89],{"class":78},[68,521,79],{"class":78},[68,523,524,527,529,531,533,535],{"class":70,"line":308},[68,525,526],{"class":235},"      inter",[68,528,89],{"class":78},[68,530,92],{"class":78},[68,532,96],{"class":95},[68,534,99],{"class":78},[68,536,305],{"class":78},[68,538,539],{"class":70,"line":314},[68,540,541],{"class":78},"    },\n",[68,543,545],{"class":70,"line":544},8,[68,546,311],{"class":78},[68,548,550,552],{"class":70,"line":549},9,[68,551,317],{"class":78},[68,553,320],{"class":105},[49,555,556,557,560,561,139],{},"If you're using the Wind4 (Tailwind4) preset, set ",[53,558,559],{},"font"," instead of ",[53,562,452],{},[58,564,566],{"className":456,"code":565,"language":459,"meta":64,"style":64},"    font: {\n      inter: 'Inter',\n    },\n",[53,567,568,577,591],{"__ignoreMap":64},[68,569,570,573,575],{"class":70,"line":71},[68,571,572],{"class":74},"    font",[68,574,89],{"class":78},[68,576,79],{"class":78},[68,578,579,581,583,585,587,589],{"class":70,"line":82},[68,580,526],{"class":74},[68,582,89],{"class":78},[68,584,92],{"class":78},[68,586,96],{"class":95},[68,588,99],{"class":78},[68,590,305],{"class":78},[68,592,593],{"class":70,"line":112},[68,594,541],{"class":78},[166,596,597],{},"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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":64,"searchDepth":82,"depth":82,"links":599},[600,601,602,603],{"id":46,"depth":82,"text":47},{"id":142,"depth":82,"text":143},{"id":333,"depth":82,"text":334},{"id":445,"depth":82,"text":446},"Use Nuxt Fonts with any CSS framework or library.","md",null,{},{"title":18,"description":604},"ESsH0I5hKIMsGpJ8z2uR5mvxKjsPDZPehPRsPivA9yM",[611,613],{"title":14,"path":15,"stem":16,"description":612,"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":614,"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.",1790555541535]