[{"data":1,"prerenderedAt":2661},["ShallowReactive",2],{"navigation":3,"docs-/get-started/providers":26,"docs-/get-started/providers-surround":1330},[4,20,23],{"title":5,"_path":6,"children":7},"Getting Started","/get-started",[8,11,14,17],{"title":9,"_path":10},"Installation","/get-started/installation",{"title":12,"_path":13},"Configuration","/get-started/configuration",{"title":15,"_path":16},"Usage","/get-started/usage",{"title":18,"_path":19},"Providers","/get-started/providers",{"title":21,"_path":22},"Advanced","/advanced",{"title":24,"_path":25},"Contributing","/contributing",{"_path":19,"_dir":27,"_draft":28,"_partial":28,"_locale":29,"title":18,"description":30,"body":31,"_type":1324,"_id":1325,"_source":1326,"_file":1327,"_stem":1328,"_extension":1329},"get-started",false,"","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.",{"type":32,"children":33,"toc":1312},"root",[34,43,49,60,73,110,119,133,142,154,163,184,193,205,230,239,251,260,272,277,491,500,520,526,543,555,1030,1043,1306],{"type":35,"tag":36,"props":37,"children":39},"element","h2",{"id":38},"built-in-providers",[40],{"type":41,"value":42},"text","Built-In Providers",{"type":35,"tag":44,"props":45,"children":46},"p",{},[47],{"type":41,"value":48},"Nuxt Fonts ships with a number of built-in providers.",{"type":35,"tag":50,"props":51,"children":53},"h3",{"id":52},"local",[54],{"type":35,"tag":55,"props":56,"children":58},"code",{"className":57},[],[59],{"type":41,"value":52},{"type":35,"tag":44,"props":61,"children":62},{},[63,65,71],{"type":41,"value":64},"The local provider deeply scans your ",{"type":35,"tag":55,"props":66,"children":68},{"className":67},[],[69],{"type":41,"value":70},"public/",{"type":41,"value":72}," directories (including of your layers) for font files (supporting ttf, woff, woff2, eot or otf extensions).",{"type":35,"tag":44,"props":74,"children":75},{},[76,78,84,86,92,94,100,102,108],{"type":41,"value":77},"Then, when you use a ",{"type":35,"tag":55,"props":79,"children":81},{"className":80},[],[82],{"type":41,"value":83},"font-family",{"type":41,"value":85}," in your CSS, we check to see whether it matches one of these files. We also expect font weight, font style and subset to be in the file name, unless they are 'default' values (",{"type":35,"tag":55,"props":87,"children":89},{"className":88},[],[90],{"type":41,"value":91},"400",{"type":41,"value":93}," weight, ",{"type":35,"tag":55,"props":95,"children":97},{"className":96},[],[98],{"type":41,"value":99},"normal",{"type":41,"value":101}," style and ",{"type":35,"tag":55,"props":103,"children":105},{"className":104},[],[106],{"type":41,"value":107},"latin",{"type":41,"value":109}," subset).",{"type":35,"tag":50,"props":111,"children":113},{"id":112},"google",[114],{"type":35,"tag":55,"props":115,"children":117},{"className":116},[],[118],{"type":41,"value":112},{"type":35,"tag":44,"props":120,"children":121},{},[122,131],{"type":35,"tag":123,"props":124,"children":128},"a",{"href":125,"rel":126},"https://fonts.google.com/",[127],"nofollow",[129],{"type":41,"value":130},"Google Fonts",{"type":41,"value":132}," is one of the best known public font APIs.",{"type":35,"tag":50,"props":134,"children":136},{"id":135},"googleicons",[137],{"type":35,"tag":55,"props":138,"children":140},{"className":139},[],[141],{"type":41,"value":135},{"type":35,"tag":44,"props":143,"children":144},{},[145,152],{"type":35,"tag":123,"props":146,"children":149},{"href":147,"rel":148},"https://fonts.google.com/icons",[127],[150],{"type":41,"value":151},"Google Fonts Icons",{"type":41,"value":153}," adds support for Material Symbols and Material Icons.",{"type":35,"tag":50,"props":155,"children":157},{"id":156},"bunny",[158],{"type":35,"tag":55,"props":159,"children":161},{"className":160},[],[162],{"type":41,"value":156},{"type":35,"tag":44,"props":164,"children":165},{},[166,173,175,182],{"type":35,"tag":123,"props":167,"children":170},{"href":168,"rel":169},"https://fonts.bunny.net/",[127],[171],{"type":41,"value":172},"Bunny Fonts",{"type":41,"value":174}," is provided by ",{"type":35,"tag":123,"props":176,"children":179},{"href":177,"rel":178},"https://bunny.net/",[127],[180],{"type":41,"value":181},"bunny.net",{"type":41,"value":183}," and is a drop-in Google Fonts compatible API, focusing on privacy.",{"type":35,"tag":50,"props":185,"children":187},{"id":186},"fontshare",[188],{"type":35,"tag":55,"props":189,"children":191},{"className":190},[],[192],{"type":41,"value":186},{"type":35,"tag":44,"props":194,"children":195},{},[196,203],{"type":35,"tag":123,"props":197,"children":200},{"href":198,"rel":199},"https://www.fontshare.com/",[127],[201],{"type":41,"value":202},"Fontshare",{"type":41,"value":204}," is a free font service with 100+ professional-grade fonts from the Indian Type Foundry (ITF).",{"type":35,"tag":206,"props":207,"children":208},"callout",{},[209],{"type":35,"tag":44,"props":210,"children":211},{},[212,214,221,223,228],{"type":41,"value":213},"You should read ",{"type":35,"tag":123,"props":215,"children":218},{"href":216,"rel":217},"https://www.fontshare.com/licenses/itf-ffl",[127],[219],{"type":41,"value":220},"their terms in full",{"type":41,"value":222}," before using a font through ",{"type":35,"tag":55,"props":224,"children":226},{"className":225},[],[227],{"type":41,"value":186},{"type":41,"value":229},".",{"type":35,"tag":50,"props":231,"children":233},{"id":232},"fontsource",[234],{"type":35,"tag":55,"props":235,"children":237},{"className":236},[],[238],{"type":41,"value":232},{"type":35,"tag":44,"props":240,"children":241},{},[242,249],{"type":35,"tag":123,"props":243,"children":246},{"href":244,"rel":245},"https://fontsource.org/docs/getting-started/introduction",[127],[247],{"type":41,"value":248},"Fontsource",{"type":41,"value":250}," is a collection of open-source fonts that are designed for self-hosting in web applications.",{"type":35,"tag":50,"props":252,"children":254},{"id":253},"adobe",[255],{"type":35,"tag":55,"props":256,"children":258},{"className":257},[],[259],{"type":41,"value":253},{"type":35,"tag":44,"props":261,"children":262},{},[263,270],{"type":35,"tag":123,"props":264,"children":267},{"href":265,"rel":266},"https://fonts.adobe.com/",[127],[268],{"type":41,"value":269},"Adobe Fonts",{"type":41,"value":271}," is a font service for both personal and commercial use included with Creative Cloud subscriptions.",{"type":35,"tag":44,"props":273,"children":274},{},[275],{"type":41,"value":276},"To configure the Adobe provider in your Nuxt app, you must provide a Project ID or array of Project IDs corresponding to the Web Projects you have created in Adobe Fonts.",{"type":35,"tag":278,"props":279,"children":283},"pre",{"className":280,"code":281,"language":282,"meta":29,"style":29},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt/fonts'],\n  fonts: {\n    adobe: {\n      id: ['\u003Csome-id>', '\u003Canother-kit-id>'],\n    },\n  }\n})\n","ts",[284],{"type":35,"tag":55,"props":285,"children":286},{"__ignoreMap":29},[287,322,367,385,402,459,468,477],{"type":35,"tag":288,"props":289,"children":292},"span",{"class":290,"line":291},"line",1,[293,299,304,310,316],{"type":35,"tag":288,"props":294,"children":296},{"style":295},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[297],{"type":41,"value":298},"export",{"type":35,"tag":288,"props":300,"children":301},{"style":295},[302],{"type":41,"value":303}," default",{"type":35,"tag":288,"props":305,"children":307},{"style":306},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[308],{"type":41,"value":309}," defineNuxtConfig",{"type":35,"tag":288,"props":311,"children":313},{"style":312},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[314],{"type":41,"value":315},"(",{"type":35,"tag":288,"props":317,"children":319},{"style":318},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[320],{"type":41,"value":321},"{\n",{"type":35,"tag":288,"props":323,"children":325},{"class":290,"line":324},2,[326,332,337,342,347,353,357,362],{"type":35,"tag":288,"props":327,"children":329},{"style":328},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[330],{"type":41,"value":331},"  modules",{"type":35,"tag":288,"props":333,"children":334},{"style":318},[335],{"type":41,"value":336},":",{"type":35,"tag":288,"props":338,"children":339},{"style":312},[340],{"type":41,"value":341}," [",{"type":35,"tag":288,"props":343,"children":344},{"style":318},[345],{"type":41,"value":346},"'",{"type":35,"tag":288,"props":348,"children":350},{"style":349},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[351],{"type":41,"value":352},"@nuxt/fonts",{"type":35,"tag":288,"props":354,"children":355},{"style":318},[356],{"type":41,"value":346},{"type":35,"tag":288,"props":358,"children":359},{"style":312},[360],{"type":41,"value":361},"]",{"type":35,"tag":288,"props":363,"children":364},{"style":318},[365],{"type":41,"value":366},",\n",{"type":35,"tag":288,"props":368,"children":370},{"class":290,"line":369},3,[371,376,380],{"type":35,"tag":288,"props":372,"children":373},{"style":328},[374],{"type":41,"value":375},"  fonts",{"type":35,"tag":288,"props":377,"children":378},{"style":318},[379],{"type":41,"value":336},{"type":35,"tag":288,"props":381,"children":382},{"style":318},[383],{"type":41,"value":384}," {\n",{"type":35,"tag":288,"props":386,"children":388},{"class":290,"line":387},4,[389,394,398],{"type":35,"tag":288,"props":390,"children":391},{"style":328},[392],{"type":41,"value":393},"    adobe",{"type":35,"tag":288,"props":395,"children":396},{"style":318},[397],{"type":41,"value":336},{"type":35,"tag":288,"props":399,"children":400},{"style":318},[401],{"type":41,"value":384},{"type":35,"tag":288,"props":403,"children":405},{"class":290,"line":404},5,[406,411,415,419,423,428,432,437,442,447,451,455],{"type":35,"tag":288,"props":407,"children":408},{"style":328},[409],{"type":41,"value":410},"      id",{"type":35,"tag":288,"props":412,"children":413},{"style":318},[414],{"type":41,"value":336},{"type":35,"tag":288,"props":416,"children":417},{"style":312},[418],{"type":41,"value":341},{"type":35,"tag":288,"props":420,"children":421},{"style":318},[422],{"type":41,"value":346},{"type":35,"tag":288,"props":424,"children":425},{"style":349},[426],{"type":41,"value":427},"\u003Csome-id>",{"type":35,"tag":288,"props":429,"children":430},{"style":318},[431],{"type":41,"value":346},{"type":35,"tag":288,"props":433,"children":434},{"style":318},[435],{"type":41,"value":436},",",{"type":35,"tag":288,"props":438,"children":439},{"style":318},[440],{"type":41,"value":441}," '",{"type":35,"tag":288,"props":443,"children":444},{"style":349},[445],{"type":41,"value":446},"\u003Canother-kit-id>",{"type":35,"tag":288,"props":448,"children":449},{"style":318},[450],{"type":41,"value":346},{"type":35,"tag":288,"props":452,"children":453},{"style":312},[454],{"type":41,"value":361},{"type":35,"tag":288,"props":456,"children":457},{"style":318},[458],{"type":41,"value":366},{"type":35,"tag":288,"props":460,"children":462},{"class":290,"line":461},6,[463],{"type":35,"tag":288,"props":464,"children":465},{"style":318},[466],{"type":41,"value":467},"    },\n",{"type":35,"tag":288,"props":469,"children":471},{"class":290,"line":470},7,[472],{"type":35,"tag":288,"props":473,"children":474},{"style":318},[475],{"type":41,"value":476},"  }\n",{"type":35,"tag":288,"props":478,"children":480},{"class":290,"line":479},8,[481,486],{"type":35,"tag":288,"props":482,"children":483},{"style":318},[484],{"type":41,"value":485},"}",{"type":35,"tag":288,"props":487,"children":488},{"style":312},[489],{"type":41,"value":490},")\n",{"type":35,"tag":206,"props":492,"children":494},{"type":493},"warning",[495],{"type":35,"tag":44,"props":496,"children":497},{},[498],{"type":41,"value":499},"We currently can't provide non-latin subsets for Adobe Fonts as they do not have a public API for that. Please use other providers in such cases.",{"type":35,"tag":206,"props":501,"children":502},{"type":493},[503],{"type":35,"tag":44,"props":504,"children":505},{},[506,507,513,514,519],{"type":41,"value":213},{"type":35,"tag":123,"props":508,"children":511},{"href":509,"rel":510},"https://www.adobe.com/legal/terms.html",[127],[512],{"type":41,"value":220},{"type":41,"value":222},{"type":35,"tag":55,"props":515,"children":517},{"className":516},[],[518],{"type":41,"value":253},{"type":41,"value":229},{"type":35,"tag":36,"props":521,"children":523},{"id":522},"custom-providers",[524],{"type":41,"value":525},"Custom Providers",{"type":35,"tag":44,"props":527,"children":528},{},[529,531,542],{"type":41,"value":530},"The core of the provider API in Nuxt Fonts has been extracted to a common library that can be used by any framework - ",{"type":35,"tag":123,"props":532,"children":535},{"href":533,"rel":534},"https://github.com/unjs/unifont",[127],[536],{"type":35,"tag":55,"props":537,"children":539},{"className":538},[],[540],{"type":41,"value":541},"unifont",{"type":41,"value":229},{"type":35,"tag":44,"props":544,"children":545},{},[546,548,553],{"type":41,"value":547},"The provider API is likely to evolve in the next few releases of ",{"type":35,"tag":55,"props":549,"children":551},{"className":550},[],[552],{"type":41,"value":541},{"type":41,"value":554},", but at the moment it looks like this:",{"type":35,"tag":278,"props":556,"children":558},{"className":280,"code":557,"language":282,"meta":29,"style":29},"import { defineFontProvider } from 'unifont'\n\nexport default defineFontProvider('some-custom-provider', async (options) => {\n  // do some setup\n  return {\n    async resolveFont (fontFamily, options) {\n      if (fontFamily === 'My Font Family') {\n        return {\n          fonts: [\n            {\n              src: [\n                { url: 'https://cdn.org/my-font.woff2', format: 'woff2' },\n              ],\n              weight: 400,\n              style: 'normal',\n            }\n          ]\n        }\n      }\n    }\n  }\n})\n",[559],{"type":35,"tag":55,"props":560,"children":561},{"__ignoreMap":29},[562,603,612,679,688,700,739,782,794,812,821,838,900,913,936,965,974,983,992,1001,1010,1018],{"type":35,"tag":288,"props":563,"children":564},{"class":290,"line":291},[565,570,575,580,585,590,594,598],{"type":35,"tag":288,"props":566,"children":567},{"style":295},[568],{"type":41,"value":569},"import",{"type":35,"tag":288,"props":571,"children":572},{"style":318},[573],{"type":41,"value":574}," {",{"type":35,"tag":288,"props":576,"children":577},{"style":312},[578],{"type":41,"value":579}," defineFontProvider",{"type":35,"tag":288,"props":581,"children":582},{"style":318},[583],{"type":41,"value":584}," }",{"type":35,"tag":288,"props":586,"children":587},{"style":295},[588],{"type":41,"value":589}," from",{"type":35,"tag":288,"props":591,"children":592},{"style":318},[593],{"type":41,"value":441},{"type":35,"tag":288,"props":595,"children":596},{"style":349},[597],{"type":41,"value":541},{"type":35,"tag":288,"props":599,"children":600},{"style":318},[601],{"type":41,"value":602},"'\n",{"type":35,"tag":288,"props":604,"children":605},{"class":290,"line":324},[606],{"type":35,"tag":288,"props":607,"children":609},{"emptyLinePlaceholder":608},true,[610],{"type":41,"value":611},"\n",{"type":35,"tag":288,"props":613,"children":614},{"class":290,"line":369},[615,619,623,627,631,635,640,644,648,654,659,665,670,675],{"type":35,"tag":288,"props":616,"children":617},{"style":295},[618],{"type":41,"value":298},{"type":35,"tag":288,"props":620,"children":621},{"style":295},[622],{"type":41,"value":303},{"type":35,"tag":288,"props":624,"children":625},{"style":306},[626],{"type":41,"value":579},{"type":35,"tag":288,"props":628,"children":629},{"style":312},[630],{"type":41,"value":315},{"type":35,"tag":288,"props":632,"children":633},{"style":318},[634],{"type":41,"value":346},{"type":35,"tag":288,"props":636,"children":637},{"style":349},[638],{"type":41,"value":639},"some-custom-provider",{"type":35,"tag":288,"props":641,"children":642},{"style":318},[643],{"type":41,"value":346},{"type":35,"tag":288,"props":645,"children":646},{"style":318},[647],{"type":41,"value":436},{"type":35,"tag":288,"props":649,"children":651},{"style":650},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[652],{"type":41,"value":653}," async",{"type":35,"tag":288,"props":655,"children":656},{"style":318},[657],{"type":41,"value":658}," (",{"type":35,"tag":288,"props":660,"children":662},{"style":661},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[663],{"type":41,"value":664},"options",{"type":35,"tag":288,"props":666,"children":667},{"style":318},[668],{"type":41,"value":669},")",{"type":35,"tag":288,"props":671,"children":672},{"style":650},[673],{"type":41,"value":674}," =>",{"type":35,"tag":288,"props":676,"children":677},{"style":318},[678],{"type":41,"value":384},{"type":35,"tag":288,"props":680,"children":681},{"class":290,"line":387},[682],{"type":35,"tag":288,"props":683,"children":685},{"style":684},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[686],{"type":41,"value":687},"  // do some setup\n",{"type":35,"tag":288,"props":689,"children":690},{"class":290,"line":404},[691,696],{"type":35,"tag":288,"props":692,"children":693},{"style":295},[694],{"type":41,"value":695},"  return",{"type":35,"tag":288,"props":697,"children":698},{"style":318},[699],{"type":41,"value":384},{"type":35,"tag":288,"props":701,"children":702},{"class":290,"line":461},[703,708,713,717,722,726,731,735],{"type":35,"tag":288,"props":704,"children":705},{"style":650},[706],{"type":41,"value":707},"    async",{"type":35,"tag":288,"props":709,"children":710},{"style":328},[711],{"type":41,"value":712}," resolveFont ",{"type":35,"tag":288,"props":714,"children":715},{"style":318},[716],{"type":41,"value":315},{"type":35,"tag":288,"props":718,"children":719},{"style":661},[720],{"type":41,"value":721},"fontFamily",{"type":35,"tag":288,"props":723,"children":724},{"style":318},[725],{"type":41,"value":436},{"type":35,"tag":288,"props":727,"children":728},{"style":661},[729],{"type":41,"value":730}," options",{"type":35,"tag":288,"props":732,"children":733},{"style":318},[734],{"type":41,"value":669},{"type":35,"tag":288,"props":736,"children":737},{"style":318},[738],{"type":41,"value":384},{"type":35,"tag":288,"props":740,"children":741},{"class":290,"line":470},[742,747,751,755,760,764,769,773,778],{"type":35,"tag":288,"props":743,"children":744},{"style":295},[745],{"type":41,"value":746},"      if",{"type":35,"tag":288,"props":748,"children":749},{"style":328},[750],{"type":41,"value":658},{"type":35,"tag":288,"props":752,"children":753},{"style":312},[754],{"type":41,"value":721},{"type":35,"tag":288,"props":756,"children":757},{"style":318},[758],{"type":41,"value":759}," ===",{"type":35,"tag":288,"props":761,"children":762},{"style":318},[763],{"type":41,"value":441},{"type":35,"tag":288,"props":765,"children":766},{"style":349},[767],{"type":41,"value":768},"My Font Family",{"type":35,"tag":288,"props":770,"children":771},{"style":318},[772],{"type":41,"value":346},{"type":35,"tag":288,"props":774,"children":775},{"style":328},[776],{"type":41,"value":777},") ",{"type":35,"tag":288,"props":779,"children":780},{"style":318},[781],{"type":41,"value":321},{"type":35,"tag":288,"props":783,"children":784},{"class":290,"line":479},[785,790],{"type":35,"tag":288,"props":786,"children":787},{"style":295},[788],{"type":41,"value":789},"        return",{"type":35,"tag":288,"props":791,"children":792},{"style":318},[793],{"type":41,"value":384},{"type":35,"tag":288,"props":795,"children":797},{"class":290,"line":796},9,[798,803,807],{"type":35,"tag":288,"props":799,"children":800},{"style":328},[801],{"type":41,"value":802},"          fonts",{"type":35,"tag":288,"props":804,"children":805},{"style":318},[806],{"type":41,"value":336},{"type":35,"tag":288,"props":808,"children":809},{"style":328},[810],{"type":41,"value":811}," [\n",{"type":35,"tag":288,"props":813,"children":815},{"class":290,"line":814},10,[816],{"type":35,"tag":288,"props":817,"children":818},{"style":318},[819],{"type":41,"value":820},"            {\n",{"type":35,"tag":288,"props":822,"children":824},{"class":290,"line":823},11,[825,830,834],{"type":35,"tag":288,"props":826,"children":827},{"style":328},[828],{"type":41,"value":829},"              src",{"type":35,"tag":288,"props":831,"children":832},{"style":318},[833],{"type":41,"value":336},{"type":35,"tag":288,"props":835,"children":836},{"style":328},[837],{"type":41,"value":811},{"type":35,"tag":288,"props":839,"children":841},{"class":290,"line":840},12,[842,847,852,856,860,865,869,873,878,882,886,891,895],{"type":35,"tag":288,"props":843,"children":844},{"style":318},[845],{"type":41,"value":846},"                {",{"type":35,"tag":288,"props":848,"children":849},{"style":328},[850],{"type":41,"value":851}," url",{"type":35,"tag":288,"props":853,"children":854},{"style":318},[855],{"type":41,"value":336},{"type":35,"tag":288,"props":857,"children":858},{"style":318},[859],{"type":41,"value":441},{"type":35,"tag":288,"props":861,"children":862},{"style":349},[863],{"type":41,"value":864},"https://cdn.org/my-font.woff2",{"type":35,"tag":288,"props":866,"children":867},{"style":318},[868],{"type":41,"value":346},{"type":35,"tag":288,"props":870,"children":871},{"style":318},[872],{"type":41,"value":436},{"type":35,"tag":288,"props":874,"children":875},{"style":328},[876],{"type":41,"value":877}," format",{"type":35,"tag":288,"props":879,"children":880},{"style":318},[881],{"type":41,"value":336},{"type":35,"tag":288,"props":883,"children":884},{"style":318},[885],{"type":41,"value":441},{"type":35,"tag":288,"props":887,"children":888},{"style":349},[889],{"type":41,"value":890},"woff2",{"type":35,"tag":288,"props":892,"children":893},{"style":318},[894],{"type":41,"value":346},{"type":35,"tag":288,"props":896,"children":897},{"style":318},[898],{"type":41,"value":899}," },\n",{"type":35,"tag":288,"props":901,"children":903},{"class":290,"line":902},13,[904,909],{"type":35,"tag":288,"props":905,"children":906},{"style":328},[907],{"type":41,"value":908},"              ]",{"type":35,"tag":288,"props":910,"children":911},{"style":318},[912],{"type":41,"value":366},{"type":35,"tag":288,"props":914,"children":916},{"class":290,"line":915},14,[917,922,926,932],{"type":35,"tag":288,"props":918,"children":919},{"style":328},[920],{"type":41,"value":921},"              weight",{"type":35,"tag":288,"props":923,"children":924},{"style":318},[925],{"type":41,"value":336},{"type":35,"tag":288,"props":927,"children":929},{"style":928},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[930],{"type":41,"value":931}," 400",{"type":35,"tag":288,"props":933,"children":934},{"style":318},[935],{"type":41,"value":366},{"type":35,"tag":288,"props":937,"children":939},{"class":290,"line":938},15,[940,945,949,953,957,961],{"type":35,"tag":288,"props":941,"children":942},{"style":328},[943],{"type":41,"value":944},"              style",{"type":35,"tag":288,"props":946,"children":947},{"style":318},[948],{"type":41,"value":336},{"type":35,"tag":288,"props":950,"children":951},{"style":318},[952],{"type":41,"value":441},{"type":35,"tag":288,"props":954,"children":955},{"style":349},[956],{"type":41,"value":99},{"type":35,"tag":288,"props":958,"children":959},{"style":318},[960],{"type":41,"value":346},{"type":35,"tag":288,"props":962,"children":963},{"style":318},[964],{"type":41,"value":366},{"type":35,"tag":288,"props":966,"children":968},{"class":290,"line":967},16,[969],{"type":35,"tag":288,"props":970,"children":971},{"style":318},[972],{"type":41,"value":973},"            }\n",{"type":35,"tag":288,"props":975,"children":977},{"class":290,"line":976},17,[978],{"type":35,"tag":288,"props":979,"children":980},{"style":328},[981],{"type":41,"value":982},"          ]\n",{"type":35,"tag":288,"props":984,"children":986},{"class":290,"line":985},18,[987],{"type":35,"tag":288,"props":988,"children":989},{"style":318},[990],{"type":41,"value":991},"        }\n",{"type":35,"tag":288,"props":993,"children":995},{"class":290,"line":994},19,[996],{"type":35,"tag":288,"props":997,"children":998},{"style":318},[999],{"type":41,"value":1000},"      }\n",{"type":35,"tag":288,"props":1002,"children":1004},{"class":290,"line":1003},20,[1005],{"type":35,"tag":288,"props":1006,"children":1007},{"style":318},[1008],{"type":41,"value":1009},"    }\n",{"type":35,"tag":288,"props":1011,"children":1013},{"class":290,"line":1012},21,[1014],{"type":35,"tag":288,"props":1015,"children":1016},{"style":318},[1017],{"type":41,"value":476},{"type":35,"tag":288,"props":1019,"children":1021},{"class":290,"line":1020},22,[1022,1026],{"type":35,"tag":288,"props":1023,"children":1024},{"style":318},[1025],{"type":41,"value":485},{"type":35,"tag":288,"props":1027,"children":1028},{"style":312},[1029],{"type":41,"value":490},{"type":35,"tag":44,"props":1031,"children":1032},{},[1033,1035,1041],{"type":41,"value":1034},"Module authors can also add their own providers (or remove existing ones) in the ",{"type":35,"tag":55,"props":1036,"children":1038},{"className":1037},[],[1039],{"type":41,"value":1040},"fonts:providers",{"type":41,"value":1042}," hook which is called by Nuxt Fonts after all modules have run.",{"type":35,"tag":278,"props":1044,"children":1046},{"className":280,"code":1045,"language":282,"meta":29,"style":29},"nuxt.hook('fonts:providers', providers => {\n  delete providers.adobe\n\n  providers['custom-provider'] = defineFontProvider('custom-provider', async () => {\n    /** some setup */\n    return {\n      async resolveFont (fontFamily, options) {\n        /** resolve font faces */\n      }\n    }\n  })\n})\n",[1047],{"type":35,"tag":55,"props":1048,"children":1049},{"__ignoreMap":29},[1050,1100,1121,1128,1205,1213,1225,1261,1269,1276,1283,1295],{"type":35,"tag":288,"props":1051,"children":1052},{"class":290,"line":291},[1053,1058,1062,1067,1071,1075,1079,1083,1087,1092,1096],{"type":35,"tag":288,"props":1054,"children":1055},{"style":312},[1056],{"type":41,"value":1057},"nuxt",{"type":35,"tag":288,"props":1059,"children":1060},{"style":318},[1061],{"type":41,"value":229},{"type":35,"tag":288,"props":1063,"children":1064},{"style":306},[1065],{"type":41,"value":1066},"hook",{"type":35,"tag":288,"props":1068,"children":1069},{"style":312},[1070],{"type":41,"value":315},{"type":35,"tag":288,"props":1072,"children":1073},{"style":318},[1074],{"type":41,"value":346},{"type":35,"tag":288,"props":1076,"children":1077},{"style":349},[1078],{"type":41,"value":1040},{"type":35,"tag":288,"props":1080,"children":1081},{"style":318},[1082],{"type":41,"value":346},{"type":35,"tag":288,"props":1084,"children":1085},{"style":318},[1086],{"type":41,"value":436},{"type":35,"tag":288,"props":1088,"children":1089},{"style":661},[1090],{"type":41,"value":1091}," providers",{"type":35,"tag":288,"props":1093,"children":1094},{"style":650},[1095],{"type":41,"value":674},{"type":35,"tag":288,"props":1097,"children":1098},{"style":318},[1099],{"type":41,"value":384},{"type":35,"tag":288,"props":1101,"children":1102},{"class":290,"line":324},[1103,1108,1112,1116],{"type":35,"tag":288,"props":1104,"children":1105},{"style":318},[1106],{"type":41,"value":1107},"  delete",{"type":35,"tag":288,"props":1109,"children":1110},{"style":312},[1111],{"type":41,"value":1091},{"type":35,"tag":288,"props":1113,"children":1114},{"style":318},[1115],{"type":41,"value":229},{"type":35,"tag":288,"props":1117,"children":1118},{"style":312},[1119],{"type":41,"value":1120},"adobe\n",{"type":35,"tag":288,"props":1122,"children":1123},{"class":290,"line":369},[1124],{"type":35,"tag":288,"props":1125,"children":1126},{"emptyLinePlaceholder":608},[1127],{"type":41,"value":611},{"type":35,"tag":288,"props":1129,"children":1130},{"class":290,"line":387},[1131,1136,1141,1145,1150,1154,1159,1164,1168,1172,1176,1180,1184,1188,1192,1197,1201],{"type":35,"tag":288,"props":1132,"children":1133},{"style":312},[1134],{"type":41,"value":1135},"  providers",{"type":35,"tag":288,"props":1137,"children":1138},{"style":328},[1139],{"type":41,"value":1140},"[",{"type":35,"tag":288,"props":1142,"children":1143},{"style":318},[1144],{"type":41,"value":346},{"type":35,"tag":288,"props":1146,"children":1147},{"style":349},[1148],{"type":41,"value":1149},"custom-provider",{"type":35,"tag":288,"props":1151,"children":1152},{"style":318},[1153],{"type":41,"value":346},{"type":35,"tag":288,"props":1155,"children":1156},{"style":328},[1157],{"type":41,"value":1158},"] ",{"type":35,"tag":288,"props":1160,"children":1161},{"style":318},[1162],{"type":41,"value":1163},"=",{"type":35,"tag":288,"props":1165,"children":1166},{"style":306},[1167],{"type":41,"value":579},{"type":35,"tag":288,"props":1169,"children":1170},{"style":328},[1171],{"type":41,"value":315},{"type":35,"tag":288,"props":1173,"children":1174},{"style":318},[1175],{"type":41,"value":346},{"type":35,"tag":288,"props":1177,"children":1178},{"style":349},[1179],{"type":41,"value":1149},{"type":35,"tag":288,"props":1181,"children":1182},{"style":318},[1183],{"type":41,"value":346},{"type":35,"tag":288,"props":1185,"children":1186},{"style":318},[1187],{"type":41,"value":436},{"type":35,"tag":288,"props":1189,"children":1190},{"style":650},[1191],{"type":41,"value":653},{"type":35,"tag":288,"props":1193,"children":1194},{"style":318},[1195],{"type":41,"value":1196}," ()",{"type":35,"tag":288,"props":1198,"children":1199},{"style":650},[1200],{"type":41,"value":674},{"type":35,"tag":288,"props":1202,"children":1203},{"style":318},[1204],{"type":41,"value":384},{"type":35,"tag":288,"props":1206,"children":1207},{"class":290,"line":404},[1208],{"type":35,"tag":288,"props":1209,"children":1210},{"style":684},[1211],{"type":41,"value":1212},"    /** some setup */\n",{"type":35,"tag":288,"props":1214,"children":1215},{"class":290,"line":461},[1216,1221],{"type":35,"tag":288,"props":1217,"children":1218},{"style":295},[1219],{"type":41,"value":1220},"    return",{"type":35,"tag":288,"props":1222,"children":1223},{"style":318},[1224],{"type":41,"value":384},{"type":35,"tag":288,"props":1226,"children":1227},{"class":290,"line":470},[1228,1233,1237,1241,1245,1249,1253,1257],{"type":35,"tag":288,"props":1229,"children":1230},{"style":650},[1231],{"type":41,"value":1232},"      async",{"type":35,"tag":288,"props":1234,"children":1235},{"style":328},[1236],{"type":41,"value":712},{"type":35,"tag":288,"props":1238,"children":1239},{"style":318},[1240],{"type":41,"value":315},{"type":35,"tag":288,"props":1242,"children":1243},{"style":661},[1244],{"type":41,"value":721},{"type":35,"tag":288,"props":1246,"children":1247},{"style":318},[1248],{"type":41,"value":436},{"type":35,"tag":288,"props":1250,"children":1251},{"style":661},[1252],{"type":41,"value":730},{"type":35,"tag":288,"props":1254,"children":1255},{"style":318},[1256],{"type":41,"value":669},{"type":35,"tag":288,"props":1258,"children":1259},{"style":318},[1260],{"type":41,"value":384},{"type":35,"tag":288,"props":1262,"children":1263},{"class":290,"line":479},[1264],{"type":35,"tag":288,"props":1265,"children":1266},{"style":684},[1267],{"type":41,"value":1268},"        /** resolve font faces */\n",{"type":35,"tag":288,"props":1270,"children":1271},{"class":290,"line":796},[1272],{"type":35,"tag":288,"props":1273,"children":1274},{"style":318},[1275],{"type":41,"value":1000},{"type":35,"tag":288,"props":1277,"children":1278},{"class":290,"line":814},[1279],{"type":35,"tag":288,"props":1280,"children":1281},{"style":318},[1282],{"type":41,"value":1009},{"type":35,"tag":288,"props":1284,"children":1285},{"class":290,"line":823},[1286,1291],{"type":35,"tag":288,"props":1287,"children":1288},{"style":318},[1289],{"type":41,"value":1290},"  }",{"type":35,"tag":288,"props":1292,"children":1293},{"style":328},[1294],{"type":41,"value":490},{"type":35,"tag":288,"props":1296,"children":1297},{"class":290,"line":840},[1298,1302],{"type":35,"tag":288,"props":1299,"children":1300},{"style":318},[1301],{"type":41,"value":485},{"type":35,"tag":288,"props":1303,"children":1304},{"style":312},[1305],{"type":41,"value":490},{"type":35,"tag":1307,"props":1308,"children":1309},"style",{},[1310],{"type":41,"value":1311},"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);}",{"title":29,"searchDepth":324,"depth":324,"links":1313},[1314,1323],{"id":38,"depth":324,"text":42,"children":1315},[1316,1317,1318,1319,1320,1321,1322],{"id":52,"depth":369,"text":52},{"id":112,"depth":369,"text":112},{"id":135,"depth":369,"text":135},{"id":156,"depth":369,"text":156},{"id":186,"depth":369,"text":186},{"id":232,"depth":369,"text":232},{"id":253,"depth":369,"text":253},{"id":522,"depth":324,"text":525},"markdown","content:1.get-started:4.providers.md","content","1.get-started/4.providers.md","1.get-started/4.providers","md",[1331,2054],{"_path":16,"_dir":27,"_draft":28,"_partial":28,"_locale":29,"title":15,"description":1332,"body":1333,"_type":1324,"_id":2051,"_source":1326,"_file":2052,"_stem":2053,"_extension":1329},"Use Nuxt Fonts with any CSS framework or library.",{"type":32,"children":1334,"toc":2043},[1335,1341,1353,1424,1439,1445,1451,1463,1602,1618,1624,1638,1692,1705,1849,1864,1870,1881,2039],{"type":35,"tag":36,"props":1336,"children":1338},{"id":1337},"pure-css",[1339],{"type":41,"value":1340},"Pure CSS",{"type":35,"tag":44,"props":1342,"children":1343},{},[1344,1346,1351],{"type":41,"value":1345},"You can use Nuxt Fonts with pure CSS by adding ",{"type":35,"tag":55,"props":1347,"children":1349},{"className":1348},[],[1350],{"type":41,"value":83},{"type":41,"value":1352}," declarations to your CSS:",{"type":35,"tag":278,"props":1354,"children":1359},{"className":1355,"code":1356,"filename":1357,"language":1358,"meta":29,"style":29},"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",[1360],{"type":35,"tag":55,"props":1361,"children":1362},{"__ignoreMap":29},[1363,1376,1416],{"type":35,"tag":288,"props":1364,"children":1365},{"class":290,"line":291},[1366,1372],{"type":35,"tag":288,"props":1367,"children":1369},{"style":1368},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1370],{"type":41,"value":1371},"div",{"type":35,"tag":288,"props":1373,"children":1374},{"style":318},[1375],{"type":41,"value":384},{"type":35,"tag":288,"props":1377,"children":1378},{"class":290,"line":324},[1379,1385,1389,1393,1398,1402,1406,1411],{"type":35,"tag":288,"props":1380,"children":1382},{"style":1381},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[1383],{"type":41,"value":1384},"  font-family",{"type":35,"tag":288,"props":1386,"children":1387},{"style":318},[1388],{"type":41,"value":336},{"type":35,"tag":288,"props":1390,"children":1391},{"style":318},[1392],{"type":41,"value":441},{"type":35,"tag":288,"props":1394,"children":1395},{"style":349},[1396],{"type":41,"value":1397},"Inter",{"type":35,"tag":288,"props":1399,"children":1400},{"style":318},[1401],{"type":41,"value":346},{"type":35,"tag":288,"props":1403,"children":1404},{"style":318},[1405],{"type":41,"value":436},{"type":35,"tag":288,"props":1407,"children":1408},{"style":312},[1409],{"type":41,"value":1410}," sans-serif",{"type":35,"tag":288,"props":1412,"children":1413},{"style":318},[1414],{"type":41,"value":1415},";\n",{"type":35,"tag":288,"props":1417,"children":1418},{"class":290,"line":369},[1419],{"type":35,"tag":288,"props":1420,"children":1421},{"style":318},[1422],{"type":41,"value":1423},"}\n",{"type":35,"tag":206,"props":1425,"children":1426},{},[1427],{"type":35,"tag":44,"props":1428,"children":1429},{},[1430,1432,1437],{"type":41,"value":1431},"Note that Nuxt Fonts will only generate CSS for the first font in a ",{"type":35,"tag":55,"props":1433,"children":1435},{"className":1434},[],[1436],{"type":41,"value":83},{"type":41,"value":1438}," declaration. Subsequent fonts in the list will be used to generate metrics for font fallbacks.",{"type":35,"tag":36,"props":1440,"children":1442},{"id":1441},"tailwind-css",[1443],{"type":41,"value":1444},"Tailwind CSS",{"type":35,"tag":50,"props":1446,"children":1448},{"id":1447},"v3-and-below",[1449],{"type":41,"value":1450},"v3 and below",{"type":35,"tag":44,"props":1452,"children":1453},{},[1454,1456,1461],{"type":41,"value":1455},"You can use Nuxt Fonts with Tailwind CSS by setting ",{"type":35,"tag":55,"props":1457,"children":1459},{"className":1458},[],[1460],{"type":41,"value":721},{"type":41,"value":1462}," in your configuration file:",{"type":35,"tag":278,"props":1464,"children":1469},{"className":1465,"code":1466,"filename":1467,"language":1468,"meta":29,"style":29},"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",[1470],{"type":35,"tag":55,"props":1471,"children":1472},{"__ignoreMap":29},[1473,1488,1504,1520,1536,1572,1580,1587,1595],{"type":35,"tag":288,"props":1474,"children":1475},{"class":290,"line":291},[1476,1480,1484],{"type":35,"tag":288,"props":1477,"children":1478},{"style":295},[1479],{"type":41,"value":298},{"type":35,"tag":288,"props":1481,"children":1482},{"style":295},[1483],{"type":41,"value":303},{"type":35,"tag":288,"props":1485,"children":1486},{"style":318},[1487],{"type":41,"value":384},{"type":35,"tag":288,"props":1489,"children":1490},{"class":290,"line":324},[1491,1496,1500],{"type":35,"tag":288,"props":1492,"children":1493},{"style":328},[1494],{"type":41,"value":1495},"  theme",{"type":35,"tag":288,"props":1497,"children":1498},{"style":318},[1499],{"type":41,"value":336},{"type":35,"tag":288,"props":1501,"children":1502},{"style":318},[1503],{"type":41,"value":384},{"type":35,"tag":288,"props":1505,"children":1506},{"class":290,"line":369},[1507,1512,1516],{"type":35,"tag":288,"props":1508,"children":1509},{"style":328},[1510],{"type":41,"value":1511},"    extend",{"type":35,"tag":288,"props":1513,"children":1514},{"style":318},[1515],{"type":41,"value":336},{"type":35,"tag":288,"props":1517,"children":1518},{"style":318},[1519],{"type":41,"value":384},{"type":35,"tag":288,"props":1521,"children":1522},{"class":290,"line":387},[1523,1528,1532],{"type":35,"tag":288,"props":1524,"children":1525},{"style":328},[1526],{"type":41,"value":1527},"      fontFamily",{"type":35,"tag":288,"props":1529,"children":1530},{"style":318},[1531],{"type":41,"value":336},{"type":35,"tag":288,"props":1533,"children":1534},{"style":318},[1535],{"type":41,"value":384},{"type":35,"tag":288,"props":1537,"children":1538},{"class":290,"line":404},[1539,1544,1548,1552,1556,1560,1564,1568],{"type":35,"tag":288,"props":1540,"children":1541},{"style":328},[1542],{"type":41,"value":1543},"        custom",{"type":35,"tag":288,"props":1545,"children":1546},{"style":318},[1547],{"type":41,"value":336},{"type":35,"tag":288,"props":1549,"children":1550},{"style":312},[1551],{"type":41,"value":341},{"type":35,"tag":288,"props":1553,"children":1554},{"style":318},[1555],{"type":41,"value":346},{"type":35,"tag":288,"props":1557,"children":1558},{"style":349},[1559],{"type":41,"value":1397},{"type":35,"tag":288,"props":1561,"children":1562},{"style":318},[1563],{"type":41,"value":346},{"type":35,"tag":288,"props":1565,"children":1566},{"style":312},[1567],{"type":41,"value":361},{"type":35,"tag":288,"props":1569,"children":1570},{"style":318},[1571],{"type":41,"value":366},{"type":35,"tag":288,"props":1573,"children":1574},{"class":290,"line":461},[1575],{"type":35,"tag":288,"props":1576,"children":1577},{"style":318},[1578],{"type":41,"value":1579},"      },\n",{"type":35,"tag":288,"props":1581,"children":1582},{"class":290,"line":470},[1583],{"type":35,"tag":288,"props":1584,"children":1585},{"style":318},[1586],{"type":41,"value":467},{"type":35,"tag":288,"props":1588,"children":1589},{"class":290,"line":479},[1590],{"type":35,"tag":288,"props":1591,"children":1592},{"style":318},[1593],{"type":41,"value":1594},"  },\n",{"type":35,"tag":288,"props":1596,"children":1597},{"class":290,"line":796},[1598],{"type":35,"tag":288,"props":1599,"children":1600},{"style":318},[1601],{"type":41,"value":1423},{"type":35,"tag":206,"props":1603,"children":1604},{},[1605],{"type":35,"tag":44,"props":1606,"children":1607},{},[1608,1610,1617],{"type":41,"value":1609},"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. Read more ",{"type":35,"tag":123,"props":1611,"children":1614},{"href":1612,"rel":1613},"https://tailwindcss.com/docs/font-family#customizing-your-theme",[127],[1615],{"type":41,"value":1616},"here",{"type":41,"value":229},{"type":35,"tag":50,"props":1619,"children":1621},{"id":1620},"v4-experimental",[1622],{"type":41,"value":1623},"v4 (experimental)",{"type":35,"tag":44,"props":1625,"children":1626},{},[1627,1629,1636],{"type":41,"value":1628},"TailwindCSS v4 brings a ",{"type":35,"tag":123,"props":1630,"children":1633},{"href":1631,"rel":1632},"https://tailwindcss.com/blog/tailwindcss-v4-alpha",[127],[1634],{"type":41,"value":1635},"brand new way",{"type":41,"value":1637}," for configuration. In v4 if you want to specify a font, you would use a CSS variable:",{"type":35,"tag":278,"props":1639,"children":1642},{"className":1355,"code":1640,"filename":1641,"language":1358,"meta":29,"style":29},"@theme {\n  --font-family-display: \"Inter\", \"sans-serif\";\n}\n","main.css",[1643],{"type":35,"tag":55,"props":1644,"children":1645},{"__ignoreMap":29},[1646,1658,1685],{"type":35,"tag":288,"props":1647,"children":1648},{"class":290,"line":291},[1649,1654],{"type":35,"tag":288,"props":1650,"children":1651},{"style":295},[1652],{"type":41,"value":1653},"@theme",{"type":35,"tag":288,"props":1655,"children":1656},{"style":318},[1657],{"type":41,"value":384},{"type":35,"tag":288,"props":1659,"children":1660},{"class":290,"line":324},[1661,1666,1670,1675,1680],{"type":35,"tag":288,"props":1662,"children":1663},{"style":312},[1664],{"type":41,"value":1665},"  --font-family-display: \"Inter\"",{"type":35,"tag":288,"props":1667,"children":1668},{"style":318},[1669],{"type":41,"value":436},{"type":35,"tag":288,"props":1671,"children":1672},{"style":312},[1673],{"type":41,"value":1674}," \"",{"type":35,"tag":288,"props":1676,"children":1677},{"style":1368},[1678],{"type":41,"value":1679},"sans-serif",{"type":35,"tag":288,"props":1681,"children":1682},{"style":312},[1683],{"type":41,"value":1684},"\";\n",{"type":35,"tag":288,"props":1686,"children":1687},{"class":290,"line":369},[1688],{"type":35,"tag":288,"props":1689,"children":1690},{"style":312},[1691],{"type":41,"value":1423},{"type":35,"tag":44,"props":1693,"children":1694},{},[1695,1697,1703],{"type":41,"value":1696},"As it uses CSS variables, you should enable the Nuxt Fonts ",{"type":35,"tag":55,"props":1698,"children":1700},{"className":1699},[],[1701],{"type":41,"value":1702},"processCSSVariables",{"type":41,"value":1704}," experimental feature to enable support for processing CSS variables for font family names:",{"type":35,"tag":278,"props":1706,"children":1709},{"className":280,"code":1707,"filename":1708,"language":282,"meta":29,"style":29},"export default defineNuxtConfig({\n  modules: ['@nuxt/fonts'],\n  fonts: {\n    experimental: {\n      processCSSVariables: true,\n    },\n  }\n})\n","nuxt.config.ts",[1710],{"type":35,"tag":55,"props":1711,"children":1712},{"__ignoreMap":29},[1713,1736,1771,1786,1802,1824,1831,1838],{"type":35,"tag":288,"props":1714,"children":1715},{"class":290,"line":291},[1716,1720,1724,1728,1732],{"type":35,"tag":288,"props":1717,"children":1718},{"style":295},[1719],{"type":41,"value":298},{"type":35,"tag":288,"props":1721,"children":1722},{"style":295},[1723],{"type":41,"value":303},{"type":35,"tag":288,"props":1725,"children":1726},{"style":306},[1727],{"type":41,"value":309},{"type":35,"tag":288,"props":1729,"children":1730},{"style":312},[1731],{"type":41,"value":315},{"type":35,"tag":288,"props":1733,"children":1734},{"style":318},[1735],{"type":41,"value":321},{"type":35,"tag":288,"props":1737,"children":1738},{"class":290,"line":324},[1739,1743,1747,1751,1755,1759,1763,1767],{"type":35,"tag":288,"props":1740,"children":1741},{"style":328},[1742],{"type":41,"value":331},{"type":35,"tag":288,"props":1744,"children":1745},{"style":318},[1746],{"type":41,"value":336},{"type":35,"tag":288,"props":1748,"children":1749},{"style":312},[1750],{"type":41,"value":341},{"type":35,"tag":288,"props":1752,"children":1753},{"style":318},[1754],{"type":41,"value":346},{"type":35,"tag":288,"props":1756,"children":1757},{"style":349},[1758],{"type":41,"value":352},{"type":35,"tag":288,"props":1760,"children":1761},{"style":318},[1762],{"type":41,"value":346},{"type":35,"tag":288,"props":1764,"children":1765},{"style":312},[1766],{"type":41,"value":361},{"type":35,"tag":288,"props":1768,"children":1769},{"style":318},[1770],{"type":41,"value":366},{"type":35,"tag":288,"props":1772,"children":1773},{"class":290,"line":369},[1774,1778,1782],{"type":35,"tag":288,"props":1775,"children":1776},{"style":328},[1777],{"type":41,"value":375},{"type":35,"tag":288,"props":1779,"children":1780},{"style":318},[1781],{"type":41,"value":336},{"type":35,"tag":288,"props":1783,"children":1784},{"style":318},[1785],{"type":41,"value":384},{"type":35,"tag":288,"props":1787,"children":1788},{"class":290,"line":387},[1789,1794,1798],{"type":35,"tag":288,"props":1790,"children":1791},{"style":328},[1792],{"type":41,"value":1793},"    experimental",{"type":35,"tag":288,"props":1795,"children":1796},{"style":318},[1797],{"type":41,"value":336},{"type":35,"tag":288,"props":1799,"children":1800},{"style":318},[1801],{"type":41,"value":384},{"type":35,"tag":288,"props":1803,"children":1804},{"class":290,"line":404},[1805,1810,1814,1820],{"type":35,"tag":288,"props":1806,"children":1807},{"style":328},[1808],{"type":41,"value":1809},"      processCSSVariables",{"type":35,"tag":288,"props":1811,"children":1812},{"style":318},[1813],{"type":41,"value":336},{"type":35,"tag":288,"props":1815,"children":1817},{"style":1816},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[1818],{"type":41,"value":1819}," true",{"type":35,"tag":288,"props":1821,"children":1822},{"style":318},[1823],{"type":41,"value":366},{"type":35,"tag":288,"props":1825,"children":1826},{"class":290,"line":461},[1827],{"type":35,"tag":288,"props":1828,"children":1829},{"style":318},[1830],{"type":41,"value":467},{"type":35,"tag":288,"props":1832,"children":1833},{"class":290,"line":470},[1834],{"type":35,"tag":288,"props":1835,"children":1836},{"style":318},[1837],{"type":41,"value":476},{"type":35,"tag":288,"props":1839,"children":1840},{"class":290,"line":479},[1841,1845],{"type":35,"tag":288,"props":1842,"children":1843},{"style":318},[1844],{"type":41,"value":485},{"type":35,"tag":288,"props":1846,"children":1847},{"style":312},[1848],{"type":41,"value":490},{"type":35,"tag":206,"props":1850,"children":1851},{},[1852],{"type":35,"tag":44,"props":1853,"children":1854},{},[1855,1857,1862],{"type":41,"value":1856},"Please note that ",{"type":35,"tag":55,"props":1858,"children":1860},{"className":1859},[],[1861],{"type":41,"value":1702},{"type":41,"value":1863}," is still an experimental feature and may have a performance impact.",{"type":35,"tag":36,"props":1865,"children":1867},{"id":1866},"unocss",[1868],{"type":41,"value":1869},"UnoCSS",{"type":35,"tag":44,"props":1871,"children":1872},{},[1873,1875,1880],{"type":41,"value":1874},"You can use Nuxt Fonts with UnoCSS by setting ",{"type":35,"tag":55,"props":1876,"children":1878},{"className":1877},[],[1879],{"type":41,"value":721},{"type":41,"value":1462},{"type":35,"tag":278,"props":1882,"children":1885},{"className":1465,"code":1883,"filename":1884,"language":1468,"meta":29,"style":29},"import { defineConfig } from 'unocss'\n\nexport default defineConfig({\n  theme: {\n    fontFamily: {\n      inter: 'Inter',\n    },\n  },\n})\n","uno.config.js",[1886],{"type":35,"tag":55,"props":1887,"children":1888},{"__ignoreMap":29},[1889,1925,1932,1955,1970,1986,2014,2021,2028],{"type":35,"tag":288,"props":1890,"children":1891},{"class":290,"line":291},[1892,1896,1900,1905,1909,1913,1917,1921],{"type":35,"tag":288,"props":1893,"children":1894},{"style":295},[1895],{"type":41,"value":569},{"type":35,"tag":288,"props":1897,"children":1898},{"style":318},[1899],{"type":41,"value":574},{"type":35,"tag":288,"props":1901,"children":1902},{"style":312},[1903],{"type":41,"value":1904}," defineConfig",{"type":35,"tag":288,"props":1906,"children":1907},{"style":318},[1908],{"type":41,"value":584},{"type":35,"tag":288,"props":1910,"children":1911},{"style":295},[1912],{"type":41,"value":589},{"type":35,"tag":288,"props":1914,"children":1915},{"style":318},[1916],{"type":41,"value":441},{"type":35,"tag":288,"props":1918,"children":1919},{"style":349},[1920],{"type":41,"value":1866},{"type":35,"tag":288,"props":1922,"children":1923},{"style":318},[1924],{"type":41,"value":602},{"type":35,"tag":288,"props":1926,"children":1927},{"class":290,"line":324},[1928],{"type":35,"tag":288,"props":1929,"children":1930},{"emptyLinePlaceholder":608},[1931],{"type":41,"value":611},{"type":35,"tag":288,"props":1933,"children":1934},{"class":290,"line":369},[1935,1939,1943,1947,1951],{"type":35,"tag":288,"props":1936,"children":1937},{"style":295},[1938],{"type":41,"value":298},{"type":35,"tag":288,"props":1940,"children":1941},{"style":295},[1942],{"type":41,"value":303},{"type":35,"tag":288,"props":1944,"children":1945},{"style":306},[1946],{"type":41,"value":1904},{"type":35,"tag":288,"props":1948,"children":1949},{"style":312},[1950],{"type":41,"value":315},{"type":35,"tag":288,"props":1952,"children":1953},{"style":318},[1954],{"type":41,"value":321},{"type":35,"tag":288,"props":1956,"children":1957},{"class":290,"line":387},[1958,1962,1966],{"type":35,"tag":288,"props":1959,"children":1960},{"style":328},[1961],{"type":41,"value":1495},{"type":35,"tag":288,"props":1963,"children":1964},{"style":318},[1965],{"type":41,"value":336},{"type":35,"tag":288,"props":1967,"children":1968},{"style":318},[1969],{"type":41,"value":384},{"type":35,"tag":288,"props":1971,"children":1972},{"class":290,"line":404},[1973,1978,1982],{"type":35,"tag":288,"props":1974,"children":1975},{"style":328},[1976],{"type":41,"value":1977},"    fontFamily",{"type":35,"tag":288,"props":1979,"children":1980},{"style":318},[1981],{"type":41,"value":336},{"type":35,"tag":288,"props":1983,"children":1984},{"style":318},[1985],{"type":41,"value":384},{"type":35,"tag":288,"props":1987,"children":1988},{"class":290,"line":461},[1989,1994,1998,2002,2006,2010],{"type":35,"tag":288,"props":1990,"children":1991},{"style":328},[1992],{"type":41,"value":1993},"      inter",{"type":35,"tag":288,"props":1995,"children":1996},{"style":318},[1997],{"type":41,"value":336},{"type":35,"tag":288,"props":1999,"children":2000},{"style":318},[2001],{"type":41,"value":441},{"type":35,"tag":288,"props":2003,"children":2004},{"style":349},[2005],{"type":41,"value":1397},{"type":35,"tag":288,"props":2007,"children":2008},{"style":318},[2009],{"type":41,"value":346},{"type":35,"tag":288,"props":2011,"children":2012},{"style":318},[2013],{"type":41,"value":366},{"type":35,"tag":288,"props":2015,"children":2016},{"class":290,"line":470},[2017],{"type":35,"tag":288,"props":2018,"children":2019},{"style":318},[2020],{"type":41,"value":467},{"type":35,"tag":288,"props":2022,"children":2023},{"class":290,"line":479},[2024],{"type":35,"tag":288,"props":2025,"children":2026},{"style":318},[2027],{"type":41,"value":1594},{"type":35,"tag":288,"props":2029,"children":2030},{"class":290,"line":796},[2031,2035],{"type":35,"tag":288,"props":2032,"children":2033},{"style":318},[2034],{"type":41,"value":485},{"type":35,"tag":288,"props":2036,"children":2037},{"style":312},[2038],{"type":41,"value":490},{"type":35,"tag":1307,"props":2040,"children":2041},{},[2042],{"type":41,"value":1311},{"title":29,"searchDepth":324,"depth":324,"links":2044},[2045,2046,2050],{"id":1337,"depth":324,"text":1340},{"id":1441,"depth":324,"text":1444,"children":2047},[2048,2049],{"id":1447,"depth":369,"text":1450},{"id":1620,"depth":369,"text":1623},{"id":1866,"depth":324,"text":1869},"content:1.get-started:3.usage.md","1.get-started/3.usage.md","1.get-started/3.usage",{"_path":22,"_dir":29,"_draft":28,"_partial":28,"_locale":29,"title":21,"description":2055,"body":2056,"_type":1324,"_id":2658,"_source":1326,"_file":2659,"_stem":2660,"_extension":1329},"Find out how Nuxt Fonts works behind the scenes to optimize fonts in your project.",{"type":32,"children":2057,"toc":2655},[2058,2064,2076,2651],{"type":35,"tag":36,"props":2059,"children":2061},{"id":2060},"how-it-works",[2062],{"type":41,"value":2063},"How it works",{"type":35,"tag":44,"props":2065,"children":2066},{},[2067,2069,2074],{"type":41,"value":2068},"Nuxt Fonts processes all your CSS and does the following things automatically when it encounters a ",{"type":35,"tag":55,"props":2070,"children":2072},{"className":2071},[],[2073],{"type":41,"value":83},{"type":41,"value":2075}," declaration.",{"type":35,"tag":2077,"props":2078,"children":2079},"ol",{},[2080,2143,2485,2503,2641],{"type":35,"tag":2081,"props":2082,"children":2083},"li",{},[2084,2090,2092,2097,2099,2105,2107,2113,2115,2120,2121,2126,2128,2133,2135,2141],{"type":35,"tag":2085,"props":2086,"children":2087},"strong",{},[2088],{"type":41,"value":2089},"Resolves fonts used in CSS",{"type":41,"value":2091},". It starts by looking in your ",{"type":35,"tag":55,"props":2093,"children":2095},{"className":2094},[],[2096],{"type":41,"value":70},{"type":41,"value":2098}," directory for font files that match the name, like ",{"type":35,"tag":55,"props":2100,"children":2102},{"className":2101},[],[2103],{"type":41,"value":2104},"Roboto.woff2",{"type":41,"value":2106},", ",{"type":35,"tag":55,"props":2108,"children":2110},{"className":2109},[],[2111],{"type":41,"value":2112},"RobotoBold.ttf",{"type":41,"value":2114},", etc. Then it moves on to web font providers like ",{"type":35,"tag":55,"props":2116,"children":2118},{"className":2117},[],[2119],{"type":41,"value":112},{"type":41,"value":2106},{"type":35,"tag":55,"props":2122,"children":2124},{"className":2123},[],[2125],{"type":41,"value":156},{"type":41,"value":2127}," and ",{"type":35,"tag":55,"props":2129,"children":2131},{"className":2130},[],[2132],{"type":41,"value":186},{"type":41,"value":2134},". Once a provider is found (in this case, probably ",{"type":35,"tag":123,"props":2136,"children":2139},{"href":2137,"rel":2138},"https://fonts.google.com",[127],[2140],{"type":41,"value":130},{"type":41,"value":2142},"), we move on to the next step.",{"type":35,"tag":2081,"props":2144,"children":2145},{},[2146,2159,2161,2166,2167,2224],{"type":35,"tag":2085,"props":2147,"children":2148},{},[2149,2151,2157],{"type":41,"value":2150},"Generates and injects ",{"type":35,"tag":55,"props":2152,"children":2154},{"className":2153},[],[2155],{"type":41,"value":2156},"@font-face",{"type":41,"value":2158}," rules for you.",{"type":41,"value":2160}," We'll generate rules to point your browser to the right source files. They'll be injected into the same CSS where you use the ",{"type":35,"tag":55,"props":2162,"children":2164},{"className":2163},[],[2165],{"type":41,"value":83},{"type":41,"value":229},{"type":35,"tag":278,"props":2168,"children":2170},{"className":1355,"code":2169,"language":1358,"meta":29,"style":29},"/* If you write something like this: */\n:root {\n  font-family: Poppins;\n}\n",[2171],{"type":35,"tag":55,"props":2172,"children":2173},{"__ignoreMap":29},[2174,2182,2197,2217],{"type":35,"tag":288,"props":2175,"children":2176},{"class":290,"line":291},[2177],{"type":35,"tag":288,"props":2178,"children":2179},{"style":684},[2180],{"type":41,"value":2181},"/* If you write something like this: */\n",{"type":35,"tag":288,"props":2183,"children":2184},{"class":290,"line":324},[2185,2189,2193],{"type":35,"tag":288,"props":2186,"children":2187},{"style":318},[2188],{"type":41,"value":336},{"type":35,"tag":288,"props":2190,"children":2191},{"style":650},[2192],{"type":41,"value":32},{"type":35,"tag":288,"props":2194,"children":2195},{"style":318},[2196],{"type":41,"value":384},{"type":35,"tag":288,"props":2198,"children":2199},{"class":290,"line":369},[2200,2204,2208,2213],{"type":35,"tag":288,"props":2201,"children":2202},{"style":1381},[2203],{"type":41,"value":1384},{"type":35,"tag":288,"props":2205,"children":2206},{"style":318},[2207],{"type":41,"value":336},{"type":35,"tag":288,"props":2209,"children":2210},{"style":312},[2211],{"type":41,"value":2212}," Poppins",{"type":35,"tag":288,"props":2214,"children":2215},{"style":318},[2216],{"type":41,"value":1415},{"type":35,"tag":288,"props":2218,"children":2219},{"class":290,"line":387},[2220],{"type":35,"tag":288,"props":2221,"children":2222},{"style":318},[2223],{"type":41,"value":1423},{"type":35,"tag":278,"props":2225,"children":2227},{"className":1355,"code":2226,"language":1358,"meta":29,"style":29},"/* Then Nuxt fonts will add declarations that look like this at the beginning of the CSS file: */\n@font-face {\n  font-family: 'Poppins';\n  src: local(\"Poppins\"), url(\"/_fonts/\u003Chash>.woff2\") format(woff2);\n  font-display: swap;\n  unicode-range: U+0000-00FF,U+0131, /* ... */;\n  font-weight: 400;\n  font-style: normal;\n}\n/* ... plus more font-face declarations for other unicode ranges/weights */\n",[2228],{"type":35,"tag":55,"props":2229,"children":2230},{"__ignoreMap":29},[2231,2239,2250,2278,2359,2380,2429,2449,2470,2477],{"type":35,"tag":288,"props":2232,"children":2233},{"class":290,"line":291},[2234],{"type":35,"tag":288,"props":2235,"children":2236},{"style":684},[2237],{"type":41,"value":2238},"/* Then Nuxt fonts will add declarations that look like this at the beginning of the CSS file: */\n",{"type":35,"tag":288,"props":2240,"children":2241},{"class":290,"line":324},[2242,2246],{"type":35,"tag":288,"props":2243,"children":2244},{"style":295},[2245],{"type":41,"value":2156},{"type":35,"tag":288,"props":2247,"children":2248},{"style":318},[2249],{"type":41,"value":384},{"type":35,"tag":288,"props":2251,"children":2252},{"class":290,"line":369},[2253,2257,2261,2265,2270,2274],{"type":35,"tag":288,"props":2254,"children":2255},{"style":1381},[2256],{"type":41,"value":1384},{"type":35,"tag":288,"props":2258,"children":2259},{"style":318},[2260],{"type":41,"value":336},{"type":35,"tag":288,"props":2262,"children":2263},{"style":318},[2264],{"type":41,"value":441},{"type":35,"tag":288,"props":2266,"children":2267},{"style":349},[2268],{"type":41,"value":2269},"Poppins",{"type":35,"tag":288,"props":2271,"children":2272},{"style":318},[2273],{"type":41,"value":346},{"type":35,"tag":288,"props":2275,"children":2276},{"style":318},[2277],{"type":41,"value":1415},{"type":35,"tag":288,"props":2279,"children":2280},{"class":290,"line":387},[2281,2286,2290,2295,2299,2304,2308,2312,2317,2321,2325,2329,2334,2338,2342,2346,2350,2354],{"type":35,"tag":288,"props":2282,"children":2283},{"style":1381},[2284],{"type":41,"value":2285},"  src",{"type":35,"tag":288,"props":2287,"children":2288},{"style":318},[2289],{"type":41,"value":336},{"type":35,"tag":288,"props":2291,"children":2292},{"style":306},[2293],{"type":41,"value":2294}," local",{"type":35,"tag":288,"props":2296,"children":2297},{"style":318},[2298],{"type":41,"value":315},{"type":35,"tag":288,"props":2300,"children":2301},{"style":318},[2302],{"type":41,"value":2303},"\"",{"type":35,"tag":288,"props":2305,"children":2306},{"style":349},[2307],{"type":41,"value":2269},{"type":35,"tag":288,"props":2309,"children":2310},{"style":318},[2311],{"type":41,"value":2303},{"type":35,"tag":288,"props":2313,"children":2314},{"style":318},[2315],{"type":41,"value":2316},"),",{"type":35,"tag":288,"props":2318,"children":2319},{"style":306},[2320],{"type":41,"value":851},{"type":35,"tag":288,"props":2322,"children":2323},{"style":318},[2324],{"type":41,"value":315},{"type":35,"tag":288,"props":2326,"children":2327},{"style":318},[2328],{"type":41,"value":2303},{"type":35,"tag":288,"props":2330,"children":2331},{"style":349},[2332],{"type":41,"value":2333},"/_fonts/\u003Chash>.woff2",{"type":35,"tag":288,"props":2335,"children":2336},{"style":318},[2337],{"type":41,"value":2303},{"type":35,"tag":288,"props":2339,"children":2340},{"style":318},[2341],{"type":41,"value":669},{"type":35,"tag":288,"props":2343,"children":2344},{"style":306},[2345],{"type":41,"value":877},{"type":35,"tag":288,"props":2347,"children":2348},{"style":318},[2349],{"type":41,"value":315},{"type":35,"tag":288,"props":2351,"children":2352},{"style":661},[2353],{"type":41,"value":890},{"type":35,"tag":288,"props":2355,"children":2356},{"style":318},[2357],{"type":41,"value":2358},");\n",{"type":35,"tag":288,"props":2360,"children":2361},{"class":290,"line":404},[2362,2367,2371,2376],{"type":35,"tag":288,"props":2363,"children":2364},{"style":1381},[2365],{"type":41,"value":2366},"  font-display",{"type":35,"tag":288,"props":2368,"children":2369},{"style":318},[2370],{"type":41,"value":336},{"type":35,"tag":288,"props":2372,"children":2373},{"style":312},[2374],{"type":41,"value":2375}," swap",{"type":35,"tag":288,"props":2377,"children":2378},{"style":318},[2379],{"type":41,"value":1415},{"type":35,"tag":288,"props":2381,"children":2382},{"class":290,"line":461},[2383,2388,2392,2397,2402,2407,2411,2416,2420,2425],{"type":35,"tag":288,"props":2384,"children":2385},{"style":1381},[2386],{"type":41,"value":2387},"  unicode-range",{"type":35,"tag":288,"props":2389,"children":2390},{"style":318},[2391],{"type":41,"value":336},{"type":35,"tag":288,"props":2393,"children":2394},{"style":312},[2395],{"type":41,"value":2396}," U+0000",{"type":35,"tag":288,"props":2398,"children":2399},{"style":318},[2400],{"type":41,"value":2401},"-",{"type":35,"tag":288,"props":2403,"children":2404},{"style":312},[2405],{"type":41,"value":2406},"00FF",{"type":35,"tag":288,"props":2408,"children":2409},{"style":318},[2410],{"type":41,"value":436},{"type":35,"tag":288,"props":2412,"children":2413},{"style":312},[2414],{"type":41,"value":2415},"U+0131",{"type":35,"tag":288,"props":2417,"children":2418},{"style":318},[2419],{"type":41,"value":436},{"type":35,"tag":288,"props":2421,"children":2422},{"style":684},[2423],{"type":41,"value":2424}," /* ... */",{"type":35,"tag":288,"props":2426,"children":2427},{"style":318},[2428],{"type":41,"value":1415},{"type":35,"tag":288,"props":2430,"children":2431},{"class":290,"line":470},[2432,2437,2441,2445],{"type":35,"tag":288,"props":2433,"children":2434},{"style":1381},[2435],{"type":41,"value":2436},"  font-weight",{"type":35,"tag":288,"props":2438,"children":2439},{"style":318},[2440],{"type":41,"value":336},{"type":35,"tag":288,"props":2442,"children":2443},{"style":928},[2444],{"type":41,"value":931},{"type":35,"tag":288,"props":2446,"children":2447},{"style":318},[2448],{"type":41,"value":1415},{"type":35,"tag":288,"props":2450,"children":2451},{"class":290,"line":479},[2452,2457,2461,2466],{"type":35,"tag":288,"props":2453,"children":2454},{"style":1381},[2455],{"type":41,"value":2456},"  font-style",{"type":35,"tag":288,"props":2458,"children":2459},{"style":318},[2460],{"type":41,"value":336},{"type":35,"tag":288,"props":2462,"children":2463},{"style":312},[2464],{"type":41,"value":2465}," normal",{"type":35,"tag":288,"props":2467,"children":2468},{"style":318},[2469],{"type":41,"value":1415},{"type":35,"tag":288,"props":2471,"children":2472},{"class":290,"line":796},[2473],{"type":35,"tag":288,"props":2474,"children":2475},{"style":318},[2476],{"type":41,"value":1423},{"type":35,"tag":288,"props":2478,"children":2479},{"class":290,"line":814},[2480],{"type":35,"tag":288,"props":2481,"children":2482},{"style":684},[2483],{"type":41,"value":2484},"/* ... plus more font-face declarations for other unicode ranges/weights */\n",{"type":35,"tag":2081,"props":2486,"children":2487},{},[2488,2493,2495,2501],{"type":35,"tag":2085,"props":2489,"children":2490},{},[2491],{"type":41,"value":2492},"Proxies and caches font requests.",{"type":41,"value":2494}," Rather than using the original source URLs (to remote servers), we generate rewrites under the ",{"type":35,"tag":55,"props":2496,"children":2498},{"className":2497},[],[2499],{"type":41,"value":2500},"/_fonts",{"type":41,"value":2502}," subpath. When accessed by your browser, we download the font from the remote server and cache it locally.",{"type":35,"tag":2081,"props":2504,"children":2505},{},[2506,2511,2513,2518,2520,2527,2529],{"type":35,"tag":2085,"props":2507,"children":2508},{},[2509],{"type":41,"value":2510},"Creates font fallback metrics.",{"type":41,"value":2512}," If we have access to the font metrics (ascent, descent, line gap, character width, etc.) then we can generate a fallback ",{"type":35,"tag":55,"props":2514,"children":2516},{"className":2515},[],[2517],{"type":41,"value":2156},{"type":41,"value":2519}," declaration as well. The idea is that we 'morph' a local system font (like Arial or Times New Roman) to be as close as possible to the size of the web font, to decrease layout shift (",{"type":35,"tag":123,"props":2521,"children":2524},{"href":2522,"rel":2523},"https://web.dev/articles/cls",[127],[2525],{"type":41,"value":2526},"read more about CLS",{"type":41,"value":2528},").",{"type":35,"tag":278,"props":2530,"children":2532},{"className":1355,"code":2531,"language":1358,"meta":29,"style":29},":root {\n  /* This will generate fallbacks for local versions of Helvetica and Arial, adjusted to match Roboto's metrics. */\n  font-family: Roboto, Helvetica, Arial;\n  /* If you provide a generic family (like serif or sans-serif), we will use a system font from that family. */\n  font-family: Merriweather, serif;\n}\n",[2533],{"type":35,"tag":55,"props":2534,"children":2535},{"__ignoreMap":29},[2536,2551,2559,2597,2605,2634],{"type":35,"tag":288,"props":2537,"children":2538},{"class":290,"line":291},[2539,2543,2547],{"type":35,"tag":288,"props":2540,"children":2541},{"style":318},[2542],{"type":41,"value":336},{"type":35,"tag":288,"props":2544,"children":2545},{"style":650},[2546],{"type":41,"value":32},{"type":35,"tag":288,"props":2548,"children":2549},{"style":318},[2550],{"type":41,"value":384},{"type":35,"tag":288,"props":2552,"children":2553},{"class":290,"line":324},[2554],{"type":35,"tag":288,"props":2555,"children":2556},{"style":684},[2557],{"type":41,"value":2558},"  /* This will generate fallbacks for local versions of Helvetica and Arial, adjusted to match Roboto's metrics. */\n",{"type":35,"tag":288,"props":2560,"children":2561},{"class":290,"line":369},[2562,2566,2570,2575,2579,2584,2588,2593],{"type":35,"tag":288,"props":2563,"children":2564},{"style":1381},[2565],{"type":41,"value":1384},{"type":35,"tag":288,"props":2567,"children":2568},{"style":318},[2569],{"type":41,"value":336},{"type":35,"tag":288,"props":2571,"children":2572},{"style":312},[2573],{"type":41,"value":2574}," Roboto",{"type":35,"tag":288,"props":2576,"children":2577},{"style":318},[2578],{"type":41,"value":436},{"type":35,"tag":288,"props":2580,"children":2581},{"style":312},[2582],{"type":41,"value":2583}," Helvetica",{"type":35,"tag":288,"props":2585,"children":2586},{"style":318},[2587],{"type":41,"value":436},{"type":35,"tag":288,"props":2589,"children":2590},{"style":312},[2591],{"type":41,"value":2592}," Arial",{"type":35,"tag":288,"props":2594,"children":2595},{"style":318},[2596],{"type":41,"value":1415},{"type":35,"tag":288,"props":2598,"children":2599},{"class":290,"line":387},[2600],{"type":35,"tag":288,"props":2601,"children":2602},{"style":684},[2603],{"type":41,"value":2604},"  /* If you provide a generic family (like serif or sans-serif), we will use a system font from that family. */\n",{"type":35,"tag":288,"props":2606,"children":2607},{"class":290,"line":404},[2608,2612,2616,2621,2625,2630],{"type":35,"tag":288,"props":2609,"children":2610},{"style":1381},[2611],{"type":41,"value":1384},{"type":35,"tag":288,"props":2613,"children":2614},{"style":318},[2615],{"type":41,"value":336},{"type":35,"tag":288,"props":2617,"children":2618},{"style":312},[2619],{"type":41,"value":2620}," Merriweather",{"type":35,"tag":288,"props":2622,"children":2623},{"style":318},[2624],{"type":41,"value":436},{"type":35,"tag":288,"props":2626,"children":2627},{"style":312},[2628],{"type":41,"value":2629}," serif",{"type":35,"tag":288,"props":2631,"children":2632},{"style":318},[2633],{"type":41,"value":1415},{"type":35,"tag":288,"props":2635,"children":2636},{"class":290,"line":461},[2637],{"type":35,"tag":288,"props":2638,"children":2639},{"style":318},[2640],{"type":41,"value":1423},{"type":35,"tag":2081,"props":2642,"children":2643},{},[2644,2649],{"type":35,"tag":2085,"props":2645,"children":2646},{},[2647],{"type":41,"value":2648},"Include fonts in build.",{"type":41,"value":2650}," When you build your project, we'll copy across all the fonts used in your project so you don't need to make any external requests when loading your site. (Any that haven't already been cached in development are downloaded at build time.) Font file names are hashed and Nuxt will serve them with long-lived cache headers.",{"type":35,"tag":1307,"props":2652,"children":2653},{},[2654],{"type":41,"value":1311},{"title":29,"searchDepth":324,"depth":324,"links":2656},[2657],{"id":2060,"depth":324,"text":2063},"content:2.advanced.md","2.advanced.md","2.advanced",1728912105952]