[{"data":1,"prerenderedAt":607},["ShallowReactive",2],{"navigation_docs":3,"-advanced":38,"-advanced-surround":602},[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":31,"body":40,"description":595,"extension":596,"links":597,"meta":598,"navigation":599,"path":32,"seo":600,"stem":33,"__hash__":601},"docs/2.advanced.md",{"type":41,"value":42,"toc":588},"minimark",[43,48,57,428,432,435,442,445,525,531,534,584],[44,45,47],"h2",{"id":46},"how-it-works","How it works",[49,50,51,52,56],"p",{},"Nuxt Fonts processes all your CSS and does the following things automatically when it encounters a ",[53,54,55],"code",{},"font-family"," declaration.",[58,59,60,99,333,343,422],"ol",{},[61,62,63,67,68,71,72,75,76,79,80,75,83,86,87,90,91,98],"li",{},[64,65,66],"strong",{},"Resolves fonts used in CSS",". It starts by looking in your ",[53,69,70],{},"public/"," directory for font files that match the name, like ",[53,73,74],{},"Roboto.woff2",", ",[53,77,78],{},"RobotoBold.ttf",", etc. Then it moves on to web font providers like ",[53,81,82],{},"google",[53,84,85],{},"bunny"," and ",[53,88,89],{},"fontshare",". Once a provider is found (in this case, probably ",[92,93,97],"a",{"href":94,"rel":95},"https://fonts.google.com",[96],"nofollow","Google Fonts","), we move on to the next step.",[61,100,101,108,109,111,112,166],{},[64,102,103,104,107],{},"Generates and injects ",[53,105,106],{},"@font-face"," rules for you."," 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 ",[53,110,55],{},".",[113,114,119],"pre",{"className":115,"code":116,"language":117,"meta":118,"style":118},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","/* If you write something like this: */\n:root {\n  font-family: Poppins;\n}\n","css","",[53,120,121,130,144,160],{"__ignoreMap":118},[122,123,126],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"sHwdD","/* If you write something like this: */\n",[122,131,133,137,141],{"class":124,"line":132},2,[122,134,136],{"class":135},"sMK4o",":",[122,138,140],{"class":139},"spNyl","root",[122,142,143],{"class":135}," {\n",[122,145,147,151,153,157],{"class":124,"line":146},3,[122,148,150],{"class":149},"sqsOY","  font-family",[122,152,136],{"class":135},[122,154,156],{"class":155},"sTEyZ"," Poppins",[122,158,159],{"class":135},";\n",[122,161,163],{"class":124,"line":162},4,[122,164,165],{"class":135},"}\n",[113,167,169],{"className":115,"code":168,"language":117,"meta":118,"style":118},"/* 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",[53,170,171,176,183,201,252,265,295,309,322,327],{"__ignoreMap":118},[122,172,173],{"class":124,"line":125},[122,174,175],{"class":128},"/* Then Nuxt fonts will add declarations that look like this at the beginning of the CSS file: */\n",[122,177,178,181],{"class":124,"line":132},[122,179,106],{"class":180},"s7zQu",[122,182,143],{"class":135},[122,184,185,187,189,192,196,199],{"class":124,"line":146},[122,186,150],{"class":149},[122,188,136],{"class":135},[122,190,191],{"class":135}," '",[122,193,195],{"class":194},"sfazB","Poppins",[122,197,198],{"class":135},"'",[122,200,159],{"class":135},[122,202,203,206,208,212,215,218,220,222,225,228,230,232,235,237,240,243,245,249],{"class":124,"line":162},[122,204,205],{"class":149},"  src",[122,207,136],{"class":135},[122,209,211],{"class":210},"s2Zo4"," local",[122,213,214],{"class":135},"(",[122,216,217],{"class":135},"\"",[122,219,195],{"class":194},[122,221,217],{"class":135},[122,223,224],{"class":135},"),",[122,226,227],{"class":210}," url",[122,229,214],{"class":135},[122,231,217],{"class":135},[122,233,234],{"class":194},"/_fonts/\u003Chash>.woff2",[122,236,217],{"class":135},[122,238,239],{"class":135},")",[122,241,242],{"class":210}," format",[122,244,214],{"class":135},[122,246,248],{"class":247},"sHdIc","woff2",[122,250,251],{"class":135},");\n",[122,253,255,258,260,263],{"class":124,"line":254},5,[122,256,257],{"class":149},"  font-display",[122,259,136],{"class":135},[122,261,262],{"class":155}," swap",[122,264,159],{"class":135},[122,266,268,271,273,276,279,282,285,288,290,293],{"class":124,"line":267},6,[122,269,270],{"class":149},"  unicode-range",[122,272,136],{"class":135},[122,274,275],{"class":155}," U+0000",[122,277,278],{"class":135},"-",[122,280,281],{"class":155},"00FF",[122,283,284],{"class":135},",",[122,286,287],{"class":155},"U+0131",[122,289,284],{"class":135},[122,291,292],{"class":128}," /* ... */",[122,294,159],{"class":135},[122,296,298,301,303,307],{"class":124,"line":297},7,[122,299,300],{"class":149},"  font-weight",[122,302,136],{"class":135},[122,304,306],{"class":305},"sbssI"," 400",[122,308,159],{"class":135},[122,310,312,315,317,320],{"class":124,"line":311},8,[122,313,314],{"class":149},"  font-style",[122,316,136],{"class":135},[122,318,319],{"class":155}," normal",[122,321,159],{"class":135},[122,323,325],{"class":124,"line":324},9,[122,326,165],{"class":135},[122,328,330],{"class":124,"line":329},10,[122,331,332],{"class":128},"/* ... plus more font-face declarations for other unicode ranges/weights */\n",[61,334,335,338,339,342],{},[64,336,337],{},"Proxies and caches font requests."," Rather than using the original source URLs (to remote servers), we generate rewrites under the ",[53,340,341],{},"/_fonts"," subpath. When accessed by your browser, we download the font from the remote server and cache it locally.",[61,344,345,348,349,351,352,357,358],{},[64,346,347],{},"Creates font fallback metrics."," If we have access to the font metrics (ascent, descent, line gap, character width, etc.) then we can generate a fallback ",[53,350,106],{}," 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 (",[92,353,356],{"href":354,"rel":355},"https://web.dev/articles/cls",[96],"read more about CLS",").",[113,359,361],{"className":115,"code":360,"language":117,"meta":118,"style":118},":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",[53,362,363,371,376,397,402,418],{"__ignoreMap":118},[122,364,365,367,369],{"class":124,"line":125},[122,366,136],{"class":135},[122,368,140],{"class":139},[122,370,143],{"class":135},[122,372,373],{"class":124,"line":132},[122,374,375],{"class":128},"  /* This will generate fallbacks for local versions of Helvetica and Arial, adjusted to match Roboto's metrics. */\n",[122,377,378,380,382,385,387,390,392,395],{"class":124,"line":146},[122,379,150],{"class":149},[122,381,136],{"class":135},[122,383,384],{"class":155}," Roboto",[122,386,284],{"class":135},[122,388,389],{"class":155}," Helvetica",[122,391,284],{"class":135},[122,393,394],{"class":155}," Arial",[122,396,159],{"class":135},[122,398,399],{"class":124,"line":162},[122,400,401],{"class":128},"  /* If you provide a generic family (like serif or sans-serif), we will use a system font from that family. */\n",[122,403,404,406,408,411,413,416],{"class":124,"line":254},[122,405,150],{"class":149},[122,407,136],{"class":135},[122,409,410],{"class":155}," Merriweather",[122,412,284],{"class":135},[122,414,415],{"class":155}," serif",[122,417,159],{"class":135},[122,419,420],{"class":124,"line":267},[122,421,165],{"class":135},[61,423,424,427],{},[64,425,426],{},"Include fonts in build."," 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.",[44,429,431],{"id":430},"module-hooks","Module Hooks",[49,433,434],{},"Nuxt Fonts exposes hooks for module authors to extend functionality.",[436,437,439],"h3",{"id":438},"fontsproviders",[53,440,441],{},"fonts:providers",[49,443,444],{},"Add or modify font providers after all modules have loaded.",[113,446,450],{"className":447,"code":448,"language":449,"meta":118,"style":118},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","nuxt.hook('fonts:providers', (providers) => {\n  providers['my-provider'] = defineFontProvider(/* ... */)\n})\n","ts",[53,451,452,485,518],{"__ignoreMap":118},[122,453,454,457,459,462,464,466,468,470,472,475,478,480,483],{"class":124,"line":125},[122,455,456],{"class":155},"nuxt",[122,458,111],{"class":135},[122,460,461],{"class":210},"hook",[122,463,214],{"class":155},[122,465,198],{"class":135},[122,467,441],{"class":194},[122,469,198],{"class":135},[122,471,284],{"class":135},[122,473,474],{"class":135}," (",[122,476,477],{"class":247},"providers",[122,479,239],{"class":135},[122,481,482],{"class":139}," =>",[122,484,143],{"class":135},[122,486,487,490,494,496,499,501,504,507,510,512,515],{"class":124,"line":132},[122,488,489],{"class":155},"  providers",[122,491,493],{"class":492},"swJcz","[",[122,495,198],{"class":135},[122,497,498],{"class":194},"my-provider",[122,500,198],{"class":135},[122,502,503],{"class":492},"] ",[122,505,506],{"class":135},"=",[122,508,509],{"class":210}," defineFontProvider",[122,511,214],{"class":492},[122,513,514],{"class":128},"/* ... */",[122,516,517],{"class":492},")\n",[122,519,520,523],{"class":124,"line":146},[122,521,522],{"class":135},"}",[122,524,517],{"class":155},[436,526,528],{"id":527},"fontspublic-asset-context",[53,529,530],{},"fonts:public-asset-context",[49,532,533],{},"Access the font resolution context, useful for modules that need font URLs during prerender (e.g., OG image generation).",[113,535,537],{"className":447,"code":536,"language":449,"meta":118,"style":118},"nuxt.hook('fonts:public-asset-context', (context) => {\n// context.renderedFontURLs: Map\u003Cfilename, sourceUrl>\n// Populated during vite build\n})\n",[53,538,539,568,573,578],{"__ignoreMap":118},[122,540,541,543,545,547,549,551,553,555,557,559,562,564,566],{"class":124,"line":125},[122,542,456],{"class":155},[122,544,111],{"class":135},[122,546,461],{"class":210},[122,548,214],{"class":155},[122,550,198],{"class":135},[122,552,530],{"class":194},[122,554,198],{"class":135},[122,556,284],{"class":135},[122,558,474],{"class":135},[122,560,561],{"class":247},"context",[122,563,239],{"class":135},[122,565,482],{"class":139},[122,567,143],{"class":135},[122,569,570],{"class":124,"line":132},[122,571,572],{"class":128},"// context.renderedFontURLs: Map\u003Cfilename, sourceUrl>\n",[122,574,575],{"class":124,"line":146},[122,576,577],{"class":128},"// Populated during vite build\n",[122,579,580,582],{"class":124,"line":162},[122,581,522],{"class":135},[122,583,517],{"class":155},[585,586,587],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":118,"searchDepth":132,"depth":132,"links":589},[590,591],{"id":46,"depth":132,"text":47},{"id":430,"depth":132,"text":431,"children":592},[593,594],{"id":438,"depth":146,"text":441},{"id":527,"depth":146,"text":530},"Find out how Nuxt Fonts works behind the scenes to optimize fonts in your project.","md",null,{},true,{"title":31,"description":595},"nxSzAlkvX1Nn0UQ5s-jiiOVD5VIterDqQleYZC4o3D4",[603,605],{"title":26,"path":27,"stem":28,"description":604,"children":-1},"Breaking changes and migration steps when upgrading to the latest version of @nuxt/fonts.",{"title":35,"path":36,"stem":37,"description":606,"children":-1},"We can never thank you enough for your contributions.",1776374035806]