[{"data":1,"prerenderedAt":869},["ShallowReactive",2],{"navigation_docs":3,"-get-started-providers":38,"-get-started-providers-surround":864},[4,30,34],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Getting Started","/get-started","1.get-started",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"Installation","/get-started/installation","1.get-started/1.installation",{"title":14,"path":15,"stem":16},"Configuration","/get-started/configuration","1.get-started/2.configuration",{"title":18,"path":19,"stem":20},"Usage","/get-started/usage","1.get-started/3.usage",{"title":22,"path":23,"stem":24},"Providers","/get-started/providers","1.get-started/4.providers",{"title":26,"path":27,"stem":28},"Upgrade Guide","/get-started/upgrade","1.get-started/5.upgrade",false,{"title":31,"path":32,"stem":33},"Advanced","/advanced","2.advanced",{"title":35,"path":36,"stem":37},"Contributing","/contributing","3.contributing",{"id":39,"title":22,"body":40,"description":858,"extension":859,"links":860,"meta":861,"navigation":441,"path":23,"seo":862,"stem":24,"__hash__":863},"docs/1.get-started/4.providers.md",{"type":41,"value":42,"toc":846},"minimark",[43,48,52,59,84,140,150,155,165,170,178,183,197,202,210,216,221,229,234,242,245,380,383,388,392,402,408,688,695,842],[44,45,47],"h2",{"id":46},"built-in-providers","Built-In Providers",[49,50,51],"p",{},"Nuxt Fonts ships with a number of built-in providers.",[53,54,56],"h3",{"id":55},"local",[57,58,55],"code",{},[49,60,61,62,65,66,69,70,69,73,69,76,79,80,83],{},"The local provider deeply scans your ",[57,63,64],{},"public/"," directories (including of your layers) for font files (supporting ",[57,67,68],{},"ttf",", ",[57,71,72],{},"woff",[57,74,75],{},"woff2",[57,77,78],{},"eot"," or ",[57,81,82],{},"otf"," extensions).",[49,85,86,87,90,91,94,95,98,99,102,103,106,107,110,111,69,114,117,118,121,122,125,126,128,129,132,133,135,136,139],{},"Then, when you use a ",[57,88,89],{},"font-family"," in your CSS, we check to see whether it matches one of these files. By default, we expect the font file to be the ",[57,92,93],{},"400"," weight, ",[57,96,97],{},"normal"," style, and ",[57,100,101],{},"latin"," subset. To indicate different weights and styles, please include that information in the filename. For example ",[57,104,105],{},"comic-sans-ms.woff2"," (400/normal/latin; defaults), ",[57,108,109],{},"comic-sans-ms-700-italic-cyrillic.woff2"," (700/italic/cyrillic). Keywords like ",[57,112,113],{},"light",[57,115,116],{},"bold",", or ",[57,119,120],{},"black"," are accepted in place of a weight number: ",[57,123,124],{},"comic-sans-ms-bold.woff2",". ",[57,127,89],{}," values with spaces and/or caps will lookup hyphenated lowercase filenames as well, eg ",[57,130,131],{},"font-family: 'Comic Sans MS'"," will look for ",[57,134,105],{}," as well as ",[57,137,138],{},"Comic\\ Sans\\ MS.woff2"," on disk.",[141,142,144,145,149],"warning",{"to":143},"/get-started/configuration#font-options","Please note that the local provider will only attempt to load styles and weights that were configured in the ",[146,147,148],"em",{},"Font Options",".",[53,151,153],{"id":152},"google",[57,154,152],{},[49,156,157,164],{},[158,159,163],"a",{"href":160,"rel":161},"https://fonts.google.com/",[162],"nofollow","Google Fonts"," is one of the best known public font APIs.",[53,166,168],{"id":167},"googleicons",[57,169,167],{},[49,171,172,177],{},[158,173,176],{"href":174,"rel":175},"https://fonts.google.com/icons",[162],"Google Fonts Icons"," adds support for Material Symbols and Material Icons.",[53,179,181],{"id":180},"bunny",[57,182,180],{},[49,184,185,190,191,196],{},[158,186,189],{"href":187,"rel":188},"https://fonts.bunny.net/",[162],"Bunny Fonts"," is provided by ",[158,192,195],{"href":193,"rel":194},"https://bunny.net/",[162],"bunny.net"," and is a drop-in Google Fonts compatible API, focusing on privacy.",[53,198,200],{"id":199},"fontshare",[57,201,199],{},[49,203,204,209],{},[158,205,208],{"href":206,"rel":207},"https://www.fontshare.com/",[162],"Fontshare"," is a free font service with 100+ professional-grade fonts from the Indian Type Foundry (ITF).",[141,211,213,214,149],{"to":212},"https://www.fontshare.com/licenses/itf-ffl","You should read their terms in full before using a font through ",[57,215,199],{},[53,217,219],{"id":218},"fontsource",[57,220,218],{},[49,222,223,228],{},[158,224,227],{"href":225,"rel":226},"https://fontsource.org/docs/getting-started/introduction",[162],"Fontsource"," is a collection of open-source fonts that are designed for self-hosting in web applications.",[53,230,232],{"id":231},"adobe",[57,233,231],{},[49,235,236,241],{},[158,237,240],{"href":238,"rel":239},"https://fonts.adobe.com/",[162],"Adobe Fonts"," is a font service for both personal and commercial use included with Creative Cloud subscriptions.",[49,243,244],{},"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.",[246,247,252],"pre",{"className":248,"code":249,"language":250,"meta":251,"style":251},"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","",[57,253,254,278,306,317,327,359,365,371],{"__ignoreMap":251},[255,256,259,263,266,270,274],"span",{"class":257,"line":258},"line",1,[255,260,262],{"class":261},"s7zQu","export",[255,264,265],{"class":261}," default",[255,267,269],{"class":268},"s2Zo4"," defineNuxtConfig",[255,271,273],{"class":272},"sTEyZ","(",[255,275,277],{"class":276},"sMK4o","{\n",[255,279,281,285,288,291,294,298,300,303],{"class":257,"line":280},2,[255,282,284],{"class":283},"swJcz","  modules",[255,286,287],{"class":276},":",[255,289,290],{"class":272}," [",[255,292,293],{"class":276},"'",[255,295,297],{"class":296},"sfazB","@nuxt/fonts",[255,299,293],{"class":276},[255,301,302],{"class":272},"]",[255,304,305],{"class":276},",\n",[255,307,309,312,314],{"class":257,"line":308},3,[255,310,311],{"class":283},"  fonts",[255,313,287],{"class":276},[255,315,316],{"class":276}," {\n",[255,318,320,323,325],{"class":257,"line":319},4,[255,321,322],{"class":283},"    adobe",[255,324,287],{"class":276},[255,326,316],{"class":276},[255,328,330,333,335,337,339,342,344,347,350,353,355,357],{"class":257,"line":329},5,[255,331,332],{"class":283},"      id",[255,334,287],{"class":276},[255,336,290],{"class":272},[255,338,293],{"class":276},[255,340,341],{"class":296},"\u003Csome-id>",[255,343,293],{"class":276},[255,345,346],{"class":276},",",[255,348,349],{"class":276}," '",[255,351,352],{"class":296},"\u003Canother-kit-id>",[255,354,293],{"class":276},[255,356,302],{"class":272},[255,358,305],{"class":276},[255,360,362],{"class":257,"line":361},6,[255,363,364],{"class":276},"    },\n",[255,366,368],{"class":257,"line":367},7,[255,369,370],{"class":276},"  }\n",[255,372,374,377],{"class":257,"line":373},8,[255,375,376],{"class":276},"}",[255,378,379],{"class":272},")\n",[141,381,382],{},"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.",[141,384,213,386,149],{"to":385},"https://www.adobe.com/legal/terms.html",[57,387,231],{},[44,389,391],{"id":390},"custom-providers","Custom Providers",[49,393,394,395,149],{},"The core of the provider API in Nuxt Fonts has been extracted to a common library that can be used by any framework - ",[158,396,399],{"href":397,"rel":398},"https://github.com/unjs/unifont",[162],[57,400,401],{},"unifont",[49,403,404,405,407],{},"The provider API is likely to evolve in the next few releases of ",[57,406,401],{},", but at the moment it looks like this:",[246,409,411],{"className":248,"code":410,"language":250,"meta":251,"style":251},"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",[57,412,413,437,443,481,487,494,516,540,547,558,564,574,608,616,630,646,652,658,664,670,676,681],{"__ignoreMap":251},[255,414,415,418,421,424,427,430,432,434],{"class":257,"line":258},[255,416,417],{"class":261},"import",[255,419,420],{"class":276}," {",[255,422,423],{"class":272}," defineFontProvider",[255,425,426],{"class":276}," }",[255,428,429],{"class":261}," from",[255,431,349],{"class":276},[255,433,401],{"class":296},[255,435,436],{"class":276},"'\n",[255,438,439],{"class":257,"line":280},[255,440,442],{"emptyLinePlaceholder":441},true,"\n",[255,444,445,447,449,451,453,455,458,460,462,466,469,473,476,479],{"class":257,"line":308},[255,446,262],{"class":261},[255,448,265],{"class":261},[255,450,423],{"class":268},[255,452,273],{"class":272},[255,454,293],{"class":276},[255,456,457],{"class":296},"some-custom-provider",[255,459,293],{"class":276},[255,461,346],{"class":276},[255,463,465],{"class":464},"spNyl"," async",[255,467,468],{"class":276}," (",[255,470,472],{"class":471},"sHdIc","options",[255,474,475],{"class":276},")",[255,477,478],{"class":464}," =>",[255,480,316],{"class":276},[255,482,483],{"class":257,"line":319},[255,484,486],{"class":485},"sHwdD","  // do some setup\n",[255,488,489,492],{"class":257,"line":329},[255,490,491],{"class":261},"  return",[255,493,316],{"class":276},[255,495,496,499,502,504,507,509,512,514],{"class":257,"line":361},[255,497,498],{"class":464},"    async",[255,500,501],{"class":283}," resolveFont ",[255,503,273],{"class":276},[255,505,506],{"class":471},"fontFamily",[255,508,346],{"class":276},[255,510,511],{"class":471}," options",[255,513,475],{"class":276},[255,515,316],{"class":276},[255,517,518,521,523,525,528,530,533,535,538],{"class":257,"line":367},[255,519,520],{"class":261},"      if",[255,522,468],{"class":283},[255,524,506],{"class":272},[255,526,527],{"class":276}," ===",[255,529,349],{"class":276},[255,531,532],{"class":296},"My Font Family",[255,534,293],{"class":276},[255,536,537],{"class":283},") ",[255,539,277],{"class":276},[255,541,542,545],{"class":257,"line":373},[255,543,544],{"class":261},"        return",[255,546,316],{"class":276},[255,548,550,553,555],{"class":257,"line":549},9,[255,551,552],{"class":283},"          fonts",[255,554,287],{"class":276},[255,556,557],{"class":283}," [\n",[255,559,561],{"class":257,"line":560},10,[255,562,563],{"class":276},"            {\n",[255,565,567,570,572],{"class":257,"line":566},11,[255,568,569],{"class":283},"              src",[255,571,287],{"class":276},[255,573,557],{"class":283},[255,575,577,580,583,585,587,590,592,594,597,599,601,603,605],{"class":257,"line":576},12,[255,578,579],{"class":276},"                {",[255,581,582],{"class":283}," url",[255,584,287],{"class":276},[255,586,349],{"class":276},[255,588,589],{"class":296},"https://cdn.org/my-font.woff2",[255,591,293],{"class":276},[255,593,346],{"class":276},[255,595,596],{"class":283}," format",[255,598,287],{"class":276},[255,600,349],{"class":276},[255,602,75],{"class":296},[255,604,293],{"class":276},[255,606,607],{"class":276}," },\n",[255,609,611,614],{"class":257,"line":610},13,[255,612,613],{"class":283},"              ]",[255,615,305],{"class":276},[255,617,619,622,624,628],{"class":257,"line":618},14,[255,620,621],{"class":283},"              weight",[255,623,287],{"class":276},[255,625,627],{"class":626},"sbssI"," 400",[255,629,305],{"class":276},[255,631,633,636,638,640,642,644],{"class":257,"line":632},15,[255,634,635],{"class":283},"              style",[255,637,287],{"class":276},[255,639,349],{"class":276},[255,641,97],{"class":296},[255,643,293],{"class":276},[255,645,305],{"class":276},[255,647,649],{"class":257,"line":648},16,[255,650,651],{"class":276},"            }\n",[255,653,655],{"class":257,"line":654},17,[255,656,657],{"class":283},"          ]\n",[255,659,661],{"class":257,"line":660},18,[255,662,663],{"class":276},"        }\n",[255,665,667],{"class":257,"line":666},19,[255,668,669],{"class":276},"      }\n",[255,671,673],{"class":257,"line":672},20,[255,674,675],{"class":276},"    }\n",[255,677,679],{"class":257,"line":678},21,[255,680,370],{"class":276},[255,682,684,686],{"class":257,"line":683},22,[255,685,376],{"class":276},[255,687,379],{"class":272},[49,689,690,691,694],{},"Module authors can also add their own providers (or remove existing ones) in the ",[57,692,693],{},"fonts:providers"," hook which is called by Nuxt Fonts after all modules have run.",[246,696,698],{"className":248,"code":697,"language":250,"meta":251,"style":251},"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",[57,699,700,727,739,743,785,790,797,816,821,825,829,836],{"__ignoreMap":251},[255,701,702,705,707,710,712,714,716,718,720,723,725],{"class":257,"line":258},[255,703,704],{"class":272},"nuxt",[255,706,149],{"class":276},[255,708,709],{"class":268},"hook",[255,711,273],{"class":272},[255,713,293],{"class":276},[255,715,693],{"class":296},[255,717,293],{"class":276},[255,719,346],{"class":276},[255,721,722],{"class":471}," providers",[255,724,478],{"class":464},[255,726,316],{"class":276},[255,728,729,732,734,736],{"class":257,"line":280},[255,730,731],{"class":276},"  delete",[255,733,722],{"class":272},[255,735,149],{"class":276},[255,737,738],{"class":272},"adobe\n",[255,740,741],{"class":257,"line":308},[255,742,442],{"emptyLinePlaceholder":441},[255,744,745,748,751,753,756,758,761,764,766,768,770,772,774,776,778,781,783],{"class":257,"line":319},[255,746,747],{"class":272},"  providers",[255,749,750],{"class":283},"[",[255,752,293],{"class":276},[255,754,755],{"class":296},"custom-provider",[255,757,293],{"class":276},[255,759,760],{"class":283},"] ",[255,762,763],{"class":276},"=",[255,765,423],{"class":268},[255,767,273],{"class":283},[255,769,293],{"class":276},[255,771,755],{"class":296},[255,773,293],{"class":276},[255,775,346],{"class":276},[255,777,465],{"class":464},[255,779,780],{"class":276}," ()",[255,782,478],{"class":464},[255,784,316],{"class":276},[255,786,787],{"class":257,"line":329},[255,788,789],{"class":485},"    /** some setup */\n",[255,791,792,795],{"class":257,"line":361},[255,793,794],{"class":261},"    return",[255,796,316],{"class":276},[255,798,799,802,804,806,808,810,812,814],{"class":257,"line":367},[255,800,801],{"class":464},"      async",[255,803,501],{"class":283},[255,805,273],{"class":276},[255,807,506],{"class":471},[255,809,346],{"class":276},[255,811,511],{"class":471},[255,813,475],{"class":276},[255,815,316],{"class":276},[255,817,818],{"class":257,"line":373},[255,819,820],{"class":485},"        /** resolve font faces */\n",[255,822,823],{"class":257,"line":549},[255,824,669],{"class":276},[255,826,827],{"class":257,"line":560},[255,828,675],{"class":276},[255,830,831,834],{"class":257,"line":566},[255,832,833],{"class":276},"  }",[255,835,379],{"class":283},[255,837,838,840],{"class":257,"line":576},[255,839,376],{"class":276},[255,841,379],{"class":272},[843,844,845],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":251,"searchDepth":280,"depth":280,"links":847},[848,857],{"id":46,"depth":280,"text":47,"children":849},[850,851,852,853,854,855,856],{"id":55,"depth":308,"text":55},{"id":152,"depth":308,"text":152},{"id":167,"depth":308,"text":167},{"id":180,"depth":308,"text":180},{"id":199,"depth":308,"text":199},{"id":218,"depth":308,"text":218},{"id":231,"depth":308,"text":231},{"id":390,"depth":280,"text":391},"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.","md",null,{},{"title":22,"description":858},"oQOv5o6_BVhjJaYMnOOxXKPzdybZ_dLYNKqTcjnX8cU",[865,867],{"title":18,"path":19,"stem":20,"description":866,"children":-1},"Use Nuxt Fonts with any CSS framework or library.",{"title":26,"path":27,"stem":28,"description":868,"children":-1},"Breaking changes and migration steps when upgrading to the latest version of @nuxt/fonts.",1770982877296]