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