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