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