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