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