[{"data":1,"prerenderedAt":943},["ShallowReactive",2],{"navigation_docs":3,"-get-started-upgrade":38,"-get-started-upgrade-surround":938},[4,30,34],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Getting Started","\u002Fget-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F1.installation",{"title":14,"path":15,"stem":16},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F2.configuration",{"title":18,"path":19,"stem":20},"Usage","\u002Fget-started\u002Fusage","1.get-started\u002F3.usage",{"title":22,"path":23,"stem":24},"Providers","\u002Fget-started\u002Fproviders","1.get-started\u002F4.providers",{"title":26,"path":27,"stem":28},"Upgrade Guide","\u002Fget-started\u002Fupgrade","1.get-started\u002F5.upgrade",false,{"title":31,"path":32,"stem":33},"Advanced","\u002Fadvanced","2.advanced",{"title":35,"path":36,"stem":37},"Contributing","\u002Fcontributing","3.contributing",{"id":39,"title":26,"body":40,"description":931,"extension":932,"links":933,"meta":934,"navigation":935,"path":27,"seo":936,"stem":28,"__hash__":937},"docs\u002F1.get-started\u002F5.upgrade.md",{"type":41,"value":42,"toc":921},"minimark",[43,48,53,58,75,83,101,105,122,125,132,139,173,186,190,194,212,323,331,335,349,402,406,423,427,430,438,453,462,468,553,571,574,578,588,653,657,664,857,863,866,918],[44,45,47],"h2",{"id":46},"upgrading-to-v015","Upgrading to v0.15",[49,50,52],"h3",{"id":51},"breaking-changes","Breaking Changes",[54,55,57],"h4",{"id":56},"font-metadata-is-cached-per-project","Font metadata is cached per project",[59,60,61,62,66,67,74],"p",{},"Font metadata and downloaded font files are now cached in ",[63,64,65],"code",{},"node_modules\u002F.cache\u002Fnuxt\u002Ffonts\u002Fmeta"," relative to your project root rather than to the directory you run Nuxt from. The first build after upgrading will re-resolve and re-download fonts, and you can now configure the location with the new ",[68,69,71],"a",{"href":70},"\u002Fget-started\u002Fconfiguration#cache",[63,72,73],{},"cache"," option.",[54,76,78,79,82],{"id":77},"injected-font-face-rules-are-minified-with-lightningcss","Injected ",[63,80,81],{},"@font-face"," rules are minified with lightningcss",[59,84,85,86,88,89,92,93,96,97,100],{},"Generated ",[63,87,81],{}," declarations were previously minified with esbuild unless you had opted into ",[63,90,91],{},"css.lightningcss",". They are now always minified with lightningcss, so the exact serialisation of the CSS we inject may differ (for example ",[63,94,95],{},"local(Font Name)"," rather than ",[63,98,99],{},"local(\"Font Name\")","). This is cosmetic, but it will show up in snapshot tests.",[54,102,104],{"id":103},"font-failures-fail-production-builds","Font failures fail production builds",[59,106,107,113,114,117,118,121],{},[68,108,110],{"href":109},"\u002Fget-started\u002Fconfiguration#throwonerror",[63,111,112],{},"throwOnError"," now defaults to ",[63,115,116],{},"true"," outside of dev mode, so rather than producing a build with a missing font, the build fails when a provider errors, when a font file cannot be downloaded after retries, or when you set ",[63,119,120],{},"provider"," on a family and that provider does not contain it.",[59,123,124],{},"A family that cannot be found by any provider still warns rather than failing, as does an unknown provider name, so fonts you declare yourself in CSS are unaffected.",[59,126,127,128,131],{},"Set ",[63,129,130],{},"throwOnError: false"," to restore the previous behaviour.",[54,133,135,136,138],{"id":134},"family-level-font-face-descriptors-now-apply-to-provider-fonts","Family-level ",[63,137,81],{}," descriptors now apply to provider fonts",[59,140,141,144,145,148,149,152,153,155,156,144,159,162,163,155,166,144,169,172],{},[63,142,143],{},"display"," and ",[63,146,147],{},"unicodeRange"," set on a family were previously only honoured for families you declared manually with ",[63,150,151],{},"src",", and were silently dropped for fonts resolved from a provider. They now apply in both cases. Descriptors other than ",[63,154,143],{},", ",[63,157,158],{},"weight",[63,160,161],{},"style"," (such as ",[63,164,165],{},"stretch",[63,167,168],{},"featureSettings",[63,170,171],{},"variationSettings",") are also no longer dropped from manually declared families.",[59,174,175,176,178,179,185],{},"If you set any of these options on a family and (perhaps unknowingly) relied on them being ignored, your generated CSS will change. Note that setting ",[63,177,147],{}," on a family marks it as subsetted, so it is no longer preloaded by default; set ",[68,180,182],{"href":181},"\u002Fget-started\u002Fconfiguration#preload",[63,183,184],{},"preload"," explicitly if you still want a preload link for it.",[49,187,189],{"id":188},"new-features","New Features",[54,191,193],{"id":192},"preloading-fonts-by-subset","Preloading fonts by subset",[59,195,196,197,199,200,203,204,207,208,211],{},"The ",[63,198,184],{}," option (on ",[63,201,202],{},"defaults"," and on individual ",[63,205,206],{},"families",") now accepts ",[63,209,210],{},"{ subsets: [...] }"," or a filter function, so you can preload just the subsets your app needs.",[213,214,219],"pre",{"className":215,"code":216,"language":217,"meta":218,"style":218},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  fonts: {\n    defaults: {\n      preload: { subsets: ['latin'] },\n    },\n  },\n})\n","ts","",[63,220,221,245,258,268,302,308,314],{"__ignoreMap":218},[222,223,226,230,233,237,241],"span",{"class":224,"line":225},"line",1,[222,227,229],{"class":228},"s7zQu","export",[222,231,232],{"class":228}," default",[222,234,236],{"class":235},"s2Zo4"," defineNuxtConfig",[222,238,240],{"class":239},"sTEyZ","(",[222,242,244],{"class":243},"sMK4o","{\n",[222,246,248,252,255],{"class":224,"line":247},2,[222,249,251],{"class":250},"swJcz","  fonts",[222,253,254],{"class":243},":",[222,256,257],{"class":243}," {\n",[222,259,261,264,266],{"class":224,"line":260},3,[222,262,263],{"class":250},"    defaults",[222,265,254],{"class":243},[222,267,257],{"class":243},[222,269,271,274,276,279,282,284,287,290,294,296,299],{"class":224,"line":270},4,[222,272,273],{"class":250},"      preload",[222,275,254],{"class":243},[222,277,278],{"class":243}," {",[222,280,281],{"class":250}," subsets",[222,283,254],{"class":243},[222,285,286],{"class":239}," [",[222,288,289],{"class":243},"'",[222,291,293],{"class":292},"sfazB","latin",[222,295,289],{"class":243},[222,297,298],{"class":239},"] ",[222,300,301],{"class":243},"},\n",[222,303,305],{"class":224,"line":304},5,[222,306,307],{"class":243},"    },\n",[222,309,311],{"class":224,"line":310},6,[222,312,313],{"class":243},"  },\n",[222,315,317,320],{"class":224,"line":316},7,[222,318,319],{"class":243},"}",[222,321,322],{"class":239},")\n",[59,324,325,326,330],{},"See ",[68,327,328],{"href":181},[63,329,184],{}," for the full set of values.",[54,332,334],{"id":333},"configurable-cache","Configurable cache",[59,336,337,338,344,345,348],{},"You can now point the font cache at a directory of your choice, pass your own ",[68,339,343],{"href":340,"rel":341},"https:\u002F\u002Funstorage.unjs.io\u002F",[342],"nofollow","unstorage"," instance, or disable persistent caching with ",[63,346,347],{},"cache: false",".",[213,350,352],{"className":215,"code":351,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  fonts: {\n    cache: '.cache\u002Ffonts',\n  },\n})\n",[63,353,354,366,374,392,396],{"__ignoreMap":218},[222,355,356,358,360,362,364],{"class":224,"line":225},[222,357,229],{"class":228},[222,359,232],{"class":228},[222,361,236],{"class":235},[222,363,240],{"class":239},[222,365,244],{"class":243},[222,367,368,370,372],{"class":224,"line":247},[222,369,251],{"class":250},[222,371,254],{"class":243},[222,373,257],{"class":243},[222,375,376,379,381,384,387,389],{"class":224,"line":260},[222,377,378],{"class":250},"    cache",[222,380,254],{"class":243},[222,382,383],{"class":243}," '",[222,385,386],{"class":292},".cache\u002Ffonts",[222,388,289],{"class":243},[222,390,391],{"class":243},",\n",[222,393,394],{"class":224,"line":270},[222,395,313],{"class":243},[222,397,398,400],{"class":224,"line":304},[222,399,319],{"class":243},[222,401,322],{"class":239},[54,403,405],{"id":404},"custom-css-variable-prefixes","Custom CSS variable prefixes",[59,407,408,414,415,418,419,422],{},[68,409,411],{"href":410},"\u002Fget-started\u002Fconfiguration#processcssvariables",[63,412,413],{},"processCSSVariables"," now accepts a custom prefix, so ",[63,416,417],{},"processCSSVariables: 'my-app'"," will process ",[63,420,421],{},"--my-app-*"," variables only.",[44,424,426],{"id":425},"upgrading-to-v014","Upgrading to v0.14",[49,428,52],{"id":429},"breaking-changes-1",[54,431,433,434,437],{"id":432},"default-font-format-is-now-woff2-only","Default font format is now ",[63,435,436],{},"woff2"," only",[59,439,440,441,155,443,155,446,449,450,452],{},"Previously, font providers could return multiple formats (e.g., ",[63,442,436],{},[63,444,445],{},"woff",[63,447,448],{},"truetype","). The default behavior now only resolves ",[63,451,436],{}," format fonts, which is universally supported in all modern browsers.",[59,454,455,456,458,459,461],{},"This means your rendered ",[63,457,81],{}," declarations will typically have fewer ",[63,460,151],{}," entries, reducing overall CSS size. In most cases this is a transparent improvement and requires no action.",[59,463,464,465,254],{},"If you need to support legacy browsers that require other formats, you can configure this in your ",[63,466,467],{},"nuxt.config.ts",[213,469,471],{"className":215,"code":470,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  fonts: {\n    defaults: {\n      formats: ['woff2', 'woff', 'ttf'],\n    },\n  },\n})\n",[63,472,473,485,493,501,539,543,547],{"__ignoreMap":218},[222,474,475,477,479,481,483],{"class":224,"line":225},[222,476,229],{"class":228},[222,478,232],{"class":228},[222,480,236],{"class":235},[222,482,240],{"class":239},[222,484,244],{"class":243},[222,486,487,489,491],{"class":224,"line":247},[222,488,251],{"class":250},[222,490,254],{"class":243},[222,492,257],{"class":243},[222,494,495,497,499],{"class":224,"line":260},[222,496,263],{"class":250},[222,498,254],{"class":243},[222,500,257],{"class":243},[222,502,503,506,508,510,512,514,516,519,521,523,525,527,529,532,534,537],{"class":224,"line":270},[222,504,505],{"class":250},"      formats",[222,507,254],{"class":243},[222,509,286],{"class":239},[222,511,289],{"class":243},[222,513,436],{"class":292},[222,515,289],{"class":243},[222,517,518],{"class":243},",",[222,520,383],{"class":243},[222,522,445],{"class":292},[222,524,289],{"class":243},[222,526,518],{"class":243},[222,528,383],{"class":243},[222,530,531],{"class":292},"ttf",[222,533,289],{"class":243},[222,535,536],{"class":239},"]",[222,538,391],{"class":243},[222,540,541],{"class":224,"line":304},[222,542,307],{"class":243},[222,544,545],{"class":224,"line":310},[222,546,313],{"class":243},[222,548,549,551],{"class":224,"line":316},[222,550,319],{"class":243},[222,552,322],{"class":239},[59,554,555,556,155,559,155,562,155,565,155,568,348],{},"The available format values are: ",[63,557,558],{},"'woff2'",[63,560,561],{},"'woff'",[63,563,564],{},"'ttf'",[63,566,567],{},"'otf'",[63,569,570],{},"'eot'",[49,572,189],{"id":573},"new-features-1",[54,575,577],{"id":576},"font-format-resolution","Font format resolution",[59,579,580,581,584,585,348],{},"You can now control which font formats are resolved via the new ",[63,582,583],{},"defaults.formats"," option. This defaults to ",[63,586,587],{},"['woff2']",[213,589,591],{"className":215,"code":590,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  fonts: {\n    defaults: {\n      formats: ['woff2'],\n    },\n  },\n})\n",[63,592,593,605,613,621,639,643,647],{"__ignoreMap":218},[222,594,595,597,599,601,603],{"class":224,"line":225},[222,596,229],{"class":228},[222,598,232],{"class":228},[222,600,236],{"class":235},[222,602,240],{"class":239},[222,604,244],{"class":243},[222,606,607,609,611],{"class":224,"line":247},[222,608,251],{"class":250},[222,610,254],{"class":243},[222,612,257],{"class":243},[222,614,615,617,619],{"class":224,"line":260},[222,616,263],{"class":250},[222,618,254],{"class":243},[222,620,257],{"class":243},[222,622,623,625,627,629,631,633,635,637],{"class":224,"line":270},[222,624,505],{"class":250},[222,626,254],{"class":243},[222,628,286],{"class":239},[222,630,289],{"class":243},[222,632,436],{"class":292},[222,634,289],{"class":243},[222,636,536],{"class":239},[222,638,391],{"class":243},[222,640,641],{"class":224,"line":304},[222,642,307],{"class":243},[222,644,645],{"class":224,"line":310},[222,646,313],{"class":243},[222,648,649,651],{"class":224,"line":316},[222,650,319],{"class":243},[222,652,322],{"class":239},[54,654,656],{"id":655},"provider-specific-font-family-options","Provider-specific font family options",[59,658,659,660,663],{},"You can now pass provider-specific options when configuring individual font families using the new ",[63,661,662],{},"providerOptions"," property:",[213,665,667],{"className":215,"code":666,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  fonts: {\n    families: [\n      {\n        name: 'My Font',\n        provider: 'google',\n        providerOptions: {\n          google: {\n            experimental: {\n              variableAxis: {\n                wdth: [['75', '100']],\n              },\n            },\n          },\n        },\n      },\n    ],\n  },\n})\n",[63,668,669,681,689,699,704,720,736,745,755,765,775,807,813,819,825,831,837,845,850],{"__ignoreMap":218},[222,670,671,673,675,677,679],{"class":224,"line":225},[222,672,229],{"class":228},[222,674,232],{"class":228},[222,676,236],{"class":235},[222,678,240],{"class":239},[222,680,244],{"class":243},[222,682,683,685,687],{"class":224,"line":247},[222,684,251],{"class":250},[222,686,254],{"class":243},[222,688,257],{"class":243},[222,690,691,694,696],{"class":224,"line":260},[222,692,693],{"class":250},"    families",[222,695,254],{"class":243},[222,697,698],{"class":239}," [\n",[222,700,701],{"class":224,"line":270},[222,702,703],{"class":243},"      {\n",[222,705,706,709,711,713,716,718],{"class":224,"line":304},[222,707,708],{"class":250},"        name",[222,710,254],{"class":243},[222,712,383],{"class":243},[222,714,715],{"class":292},"My Font",[222,717,289],{"class":243},[222,719,391],{"class":243},[222,721,722,725,727,729,732,734],{"class":224,"line":310},[222,723,724],{"class":250},"        provider",[222,726,254],{"class":243},[222,728,383],{"class":243},[222,730,731],{"class":292},"google",[222,733,289],{"class":243},[222,735,391],{"class":243},[222,737,738,741,743],{"class":224,"line":316},[222,739,740],{"class":250},"        providerOptions",[222,742,254],{"class":243},[222,744,257],{"class":243},[222,746,748,751,753],{"class":224,"line":747},8,[222,749,750],{"class":250},"          google",[222,752,254],{"class":243},[222,754,257],{"class":243},[222,756,758,761,763],{"class":224,"line":757},9,[222,759,760],{"class":250},"            experimental",[222,762,254],{"class":243},[222,764,257],{"class":243},[222,766,768,771,773],{"class":224,"line":767},10,[222,769,770],{"class":250},"              variableAxis",[222,772,254],{"class":243},[222,774,257],{"class":243},[222,776,778,781,783,786,788,791,793,795,797,800,802,805],{"class":224,"line":777},11,[222,779,780],{"class":250},"                wdth",[222,782,254],{"class":243},[222,784,785],{"class":239}," [[",[222,787,289],{"class":243},[222,789,790],{"class":292},"75",[222,792,289],{"class":243},[222,794,518],{"class":243},[222,796,383],{"class":243},[222,798,799],{"class":292},"100",[222,801,289],{"class":243},[222,803,804],{"class":239},"]]",[222,806,391],{"class":243},[222,808,810],{"class":224,"line":809},12,[222,811,812],{"class":243},"              },\n",[222,814,816],{"class":224,"line":815},13,[222,817,818],{"class":243},"            },\n",[222,820,822],{"class":224,"line":821},14,[222,823,824],{"class":243},"          },\n",[222,826,828],{"class":224,"line":827},15,[222,829,830],{"class":243},"        },\n",[222,832,834],{"class":224,"line":833},16,[222,835,836],{"class":243},"      },\n",[222,838,840,843],{"class":224,"line":839},17,[222,841,842],{"class":239},"    ]",[222,844,391],{"class":243},[222,846,848],{"class":224,"line":847},18,[222,849,313],{"class":243},[222,851,853,855],{"class":224,"line":852},19,[222,854,319],{"class":243},[222,856,322],{"class":239},[54,858,860,862],{"id":859},"throwonerror-option",[63,861,112],{}," option",[59,864,865],{},"You can now configure whether font resolution errors should throw or just warn:",[213,867,869],{"className":215,"code":868,"language":217,"meta":218,"style":218},"export default defineNuxtConfig({\n  fonts: {\n    throwOnError: true, \u002F\u002F default: false\n  },\n})\n",[63,870,871,883,891,908,912],{"__ignoreMap":218},[222,872,873,875,877,879,881],{"class":224,"line":225},[222,874,229],{"class":228},[222,876,232],{"class":228},[222,878,236],{"class":235},[222,880,240],{"class":239},[222,882,244],{"class":243},[222,884,885,887,889],{"class":224,"line":247},[222,886,251],{"class":250},[222,888,254],{"class":243},[222,890,257],{"class":243},[222,892,893,896,898,902,904],{"class":224,"line":260},[222,894,895],{"class":250},"    throwOnError",[222,897,254],{"class":243},[222,899,901],{"class":900},"sfNiH"," true",[222,903,518],{"class":243},[222,905,907],{"class":906},"sHwdD"," \u002F\u002F default: false\n",[222,909,910],{"class":224,"line":270},[222,911,313],{"class":243},[222,913,914,916],{"class":224,"line":304},[222,915,319],{"class":243},[222,917,322],{"class":239},[161,919,920],{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":218,"searchDepth":247,"depth":247,"links":922},[923,927],{"id":46,"depth":247,"text":47,"children":924},[925,926],{"id":51,"depth":260,"text":52},{"id":188,"depth":260,"text":189},{"id":425,"depth":247,"text":426,"children":928},[929,930],{"id":429,"depth":260,"text":52},{"id":573,"depth":260,"text":189},"Breaking changes and migration steps when upgrading to the latest version of @nuxt\u002Ffonts.","md",null,{},true,{"title":26,"description":931},"WavumnWS2hwqb6BgJafOnlN13bkUgASspvB1z9XfGDQ",[939,941],{"title":22,"path":23,"stem":24,"description":940,"children":-1},"Font providers are designed to be pluggable and extensible, so no matter your setup you should be able to use an existing provider or write your own.",{"title":31,"path":32,"stem":33,"description":942,"children":-1},"Find out how Nuxt Fonts works behind the scenes to optimize fonts in your project.",1788752883860]