[{"data":1,"prerenderedAt":1693},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Ffont":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":55,"body":318,"description":1687,"extension":1688,"meta":1689,"navigation":14,"order":56,"path":54,"section":31,"seo":1690,"sidebar":14,"stem":1691,"toc":14,"__hash__":1692},"docs\u002Fdocs\u002Fcomponents\u002Ffont.md",{"type":319,"value":320,"toc":1667},"minimark",[321,325,333,340,345,348,480,498,501,668,689,700,771,776,782,835,839,846,956,960,963,1047,1050,1059,1117,1122,1141,1145,1156,1221,1225,1231,1294,1314,1318,1325,1359,1362,1432,1435,1441,1494,1498,1501,1515,1526,1532,1535,1544,1550,1552,1562,1575,1577,1587,1594,1596,1605,1615,1617,1627,1632,1634,1643,1659,1664],[322,323,55],"h1",{"id":324},"font",[326,327,328,332],"p",{},[329,330,331],"code",{},"\u003CFont>"," makes it trivial to use web fonts in emails by loading the CSS for it from the provider you specify and automatically registering a Tailwind utility class for it.",[334,335,337],"callout",{"type":336},"info",[326,338,339],{},"Web font support in email clients is limited, use this as a progressive enhancement.",[341,342,344],"h2",{"id":343},"usage","Usage",[326,346,347],{},"Drop the component anywhere in your template:",[349,350,356],"pre",{"className":351,"code":352,"filename":353,"language":354,"meta":355,"style":355},"language-vue shiki shiki-themes laserwave has-diff","\u003Ctemplate>\n  \u003CLayout>\n    \u003CFont family=\"Roboto\" \u002F> \u002F\u002F [!code ++]\n    \u003CContainer>\n      \u003Ch1 class=\"font-roboto\">Hello\u003C\u002Fh1>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","emails\u002Fexample.vue","vue","",[329,357,358,373,382,415,423,454,463,472],{"__ignoreMap":355},[359,360,362,366,370],"span",{"class":361,"line":18},"line",[359,363,365],{"class":364},"sGGKt","\u003C",[359,367,369],{"class":368},"sb4Pa","template",[359,371,372],{"class":364},">\n",[359,374,375,378,380],{"class":361,"line":13},[359,376,377],{"class":364},"  \u003C",[359,379,76],{"class":368},[359,381,372],{"class":364},[359,383,387,390,392,396,399,402,406,408,412],{"class":384,"line":32},[361,385,386],"diff","add",[359,388,389],{"class":364},"    \u003C",[359,391,55],{"class":368},[359,393,395],{"class":394},"sZNF3"," family",[359,397,398],{"class":364},"=",[359,400,401],{"class":364},"\"",[359,403,405],{"class":404},"sXiT_","Roboto",[359,407,401],{"class":364},[359,409,411],{"class":410},"sLaUg"," \u002F",[359,413,414],{"class":364},">",[359,416,417,419,421],{"class":361,"line":27},[359,418,389],{"class":364},[359,420,51],{"class":368},[359,422,372],{"class":364},[359,424,425,428,430,433,435,437,440,442,444,447,450,452],{"class":361,"line":52},[359,426,427],{"class":364},"      \u003C",[359,429,322],{"class":368},[359,431,432],{"class":394}," class",[359,434,398],{"class":364},[359,436,401],{"class":364},[359,438,439],{"class":404},"font-roboto",[359,441,401],{"class":364},[359,443,414],{"class":364},[359,445,446],{"class":410},"Hello",[359,448,449],{"class":364},"\u003C\u002F",[359,451,322],{"class":368},[359,453,372],{"class":364},[359,455,456,459,461],{"class":361,"line":128},[359,457,458],{"class":364},"    \u003C\u002F",[359,460,51],{"class":368},[359,462,372],{"class":364},[359,464,465,468,470],{"class":361,"line":124},[359,466,467],{"class":364},"  \u003C\u002F",[359,469,76],{"class":368},[359,471,372],{"class":364},[359,473,474,476,478],{"class":361,"line":48},[359,475,449],{"class":364},[359,477,369],{"class":368},[359,479,372],{"class":364},[326,481,482,483,486,487,490,491,494,495,497],{},"With the above example, Maizzle will inject a stylesheet ",[329,484,485],{},"\u003Clink>"," into ",[329,488,489],{},"\u003Chead>"," and will configure a ",[329,492,493],{},"--font-roboto"," in Tailwind so that the ",[329,496,439],{}," utility just works.",[326,499,500],{},"Result:",[349,502,506],{"className":503,"code":504,"language":505,"meta":355,"style":355},"language-html shiki shiki-themes laserwave","\u003Chead>\n  \u003Clink\n    href=\"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@400&display=swap\"\n    rel=\"stylesheet\"\n    media=\"screen\"\n  >\n  \u003Cstyle>\n    @import \"@maizzle\u002Ftailwindcss\";\n\n    @theme {\n      --font-roboto: Roboto, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n","html",[329,507,508,517,524,539,553,567,572,581,601,606,616,649,654,661],{"__ignoreMap":355},[359,509,510,512,515],{"class":361,"line":18},[359,511,365],{"class":364},[359,513,514],{"class":368},"head",[359,516,372],{"class":364},[359,518,519,521],{"class":361,"line":13},[359,520,377],{"class":364},[359,522,523],{"class":368},"link\n",[359,525,526,529,531,533,536],{"class":361,"line":32},[359,527,528],{"class":394},"    href",[359,530,398],{"class":364},[359,532,401],{"class":364},[359,534,535],{"class":404},"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Roboto:wght@400&display=swap",[359,537,538],{"class":364},"\"\n",[359,540,541,544,546,548,551],{"class":361,"line":27},[359,542,543],{"class":394},"    rel",[359,545,398],{"class":364},[359,547,401],{"class":364},[359,549,550],{"class":404},"stylesheet",[359,552,538],{"class":364},[359,554,555,558,560,562,565],{"class":361,"line":52},[359,556,557],{"class":394},"    media",[359,559,398],{"class":364},[359,561,401],{"class":364},[359,563,564],{"class":404},"screen",[359,566,538],{"class":364},[359,568,569],{"class":361,"line":128},[359,570,571],{"class":364},"  >\n",[359,573,574,576,579],{"class":361,"line":124},[359,575,377],{"class":364},[359,577,578],{"class":368},"style",[359,580,372],{"class":364},[359,582,583,586,590,593,596,598],{"class":361,"line":48},[359,584,585],{"class":364},"    @",[359,587,589],{"class":588},"s0ZPN","import",[359,591,592],{"class":364}," \"",[359,594,595],{"class":404},"@maizzle\u002Ftailwindcss",[359,597,401],{"class":364},[359,599,600],{"class":364},";\n",[359,602,603],{"class":361,"line":23},[359,604,605],{"emptyLinePlaceholder":14},"\n",[359,607,608,610,613],{"class":361,"line":140},[359,609,585],{"class":364},[359,611,612],{"class":588},"theme",[359,614,615],{"class":364}," {\n",[359,617,618,621,624,627,629,632,634,637,639,642,644,647],{"class":361,"line":56},[359,619,620],{"class":410},"      --font-roboto: Roboto",[359,622,623],{"class":364},",",[359,625,626],{"class":368}," ui-sans-serif",[359,628,623],{"class":364},[359,630,631],{"class":368}," system-ui",[359,633,623],{"class":364},[359,635,636],{"class":410}," -apple-system",[359,638,623],{"class":364},[359,640,641],{"class":410}," \"Segoe UI\"",[359,643,623],{"class":364},[359,645,646],{"class":368}," sans-serif",[359,648,600],{"class":410},[359,650,651],{"class":361,"line":80},[359,652,653],{"class":410},"    }\n",[359,655,656,658],{"class":361,"line":36},[359,657,467],{"class":410},[359,659,660],{"class":368},"style>\n",[359,662,663,665],{"class":361,"line":73},[359,664,449],{"class":410},[359,666,667],{"class":368},"head>\n",[334,669,670],{"type":336},[326,671,672,673,676,677,680,681,684,685,688],{},"The ",[329,674,675],{},"--font-{slug}"," variable is merged into the same ",[329,678,679],{},"\u003Cstyle>"," block that imports Tailwind, so the ",[329,682,683],{},"font-{slug}"," utility is generated in the same compilation pass. Without a Tailwind import, Maizzle emits a plain ",[329,686,687],{},".font-{slug} { font-family: ... }"," rule instead, so the class still works.",[326,690,691,692,695,696,699],{},"You may also use the ",[329,693,694],{},"useFont"," composable directly in ",[329,697,698],{},"\u003Cscript setup>",":",[349,701,704],{"className":702,"code":703,"filename":353,"language":354,"meta":355,"style":355},"language-vue shiki shiki-themes laserwave","\u003Cscript setup>\n  useFont({ family: 'Roboto', weights: [400, 600] })\n\u003C\u002Fscript>\n",[329,705,706,718,763],{"__ignoreMap":355},[359,707,708,710,713,716],{"class":361,"line":18},[359,709,365],{"class":364},[359,711,712],{"class":368},"script",[359,714,715],{"class":394}," setup",[359,717,372],{"class":364},[359,719,720,723,726,728,730,733,735,738,740,743,745,748,752,754,757,760],{"class":361,"line":13},[359,721,722],{"class":394},"  useFont",[359,724,725],{"class":364},"({",[359,727,395],{"class":588},[359,729,699],{"class":364},[359,731,732],{"class":364}," '",[359,734,405],{"class":404},[359,736,737],{"class":364},"'",[359,739,623],{"class":364},[359,741,742],{"class":588}," weights",[359,744,699],{"class":364},[359,746,747],{"class":364}," [",[359,749,751],{"class":750},"s0EtI","400",[359,753,623],{"class":364},[359,755,756],{"class":750}," 600",[359,758,759],{"class":364},"]",[359,761,762],{"class":364}," })\n",[359,764,765,767,769],{"class":361,"line":32},[359,766,449],{"class":364},[359,768,712],{"class":368},[359,770,372],{"class":364},[772,773,775],"h3",{"id":774},"weights","Weights",[326,777,778,779,781],{},"Pass an array of weights to the ",[329,780,774],{}," prop:",[349,783,785],{"className":702,"code":784,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u003CFont family=\"Roboto\" :weights=\"[400, 600, 700]\" \u002F>\n\u003C\u002Ftemplate>\n",[329,786,787,795,827],{"__ignoreMap":355},[359,788,789,791,793],{"class":361,"line":18},[359,790,365],{"class":364},[359,792,369],{"class":368},[359,794,372],{"class":364},[359,796,797,799,801,803,805,807,809,811,814,816,818,821,823,825],{"class":361,"line":13},[359,798,377],{"class":364},[359,800,55],{"class":368},[359,802,395],{"class":394},[359,804,398],{"class":364},[359,806,401],{"class":364},[359,808,405],{"class":404},[359,810,401],{"class":364},[359,812,813],{"class":394}," :weights",[359,815,398],{"class":364},[359,817,401],{"class":364},[359,819,820],{"class":404},"[400, 600, 700]",[359,822,401],{"class":364},[359,824,411],{"class":410},[359,826,372],{"class":364},[359,828,829,831,833],{"class":361,"line":32},[359,830,449],{"class":364},[359,832,369],{"class":368},[359,834,372],{"class":364},[772,836,838],{"id":837},"italic","Italic",[326,840,841,842,845],{},"Use the ",[329,843,844],{},"styles"," prop to load italic variants alongside (or instead of) the regular weight:",[349,847,849],{"className":702,"code":848,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u003C!-- Both normal and italic for each weight -->\n  \u003CFont family=\"Roboto\" :weights=\"[400, 700]\" :styles=\"['normal', 'italic']\" \u002F>\n\n  \u003C!-- Italic only -->\n  \u003CFont family=\"Roboto\" :styles=\"['italic']\" \u002F>\n\u003C\u002Ftemplate>\n",[329,850,851,859,865,908,912,917,948],{"__ignoreMap":355},[359,852,853,855,857],{"class":361,"line":18},[359,854,365],{"class":364},[359,856,369],{"class":368},[359,858,372],{"class":364},[359,860,861],{"class":361,"line":13},[359,862,864],{"class":863},"sVsQ9","  \u003C!-- Both normal and italic for each weight -->\n",[359,866,867,869,871,873,875,877,879,881,883,885,887,890,892,895,897,899,902,904,906],{"class":361,"line":32},[359,868,377],{"class":364},[359,870,55],{"class":368},[359,872,395],{"class":394},[359,874,398],{"class":364},[359,876,401],{"class":364},[359,878,405],{"class":404},[359,880,401],{"class":364},[359,882,813],{"class":394},[359,884,398],{"class":364},[359,886,401],{"class":364},[359,888,889],{"class":404},"[400, 700]",[359,891,401],{"class":364},[359,893,894],{"class":394}," :styles",[359,896,398],{"class":364},[359,898,401],{"class":364},[359,900,901],{"class":404},"['normal', 'italic']",[359,903,401],{"class":364},[359,905,411],{"class":410},[359,907,372],{"class":364},[359,909,910],{"class":361,"line":27},[359,911,605],{"emptyLinePlaceholder":14},[359,913,914],{"class":361,"line":52},[359,915,916],{"class":863},"  \u003C!-- Italic only -->\n",[359,918,919,921,923,925,927,929,931,933,935,937,939,942,944,946],{"class":361,"line":128},[359,920,377],{"class":364},[359,922,55],{"class":368},[359,924,395],{"class":394},[359,926,398],{"class":364},[359,928,401],{"class":364},[359,930,405],{"class":404},[359,932,401],{"class":364},[359,934,894],{"class":394},[359,936,398],{"class":364},[359,938,401],{"class":364},[359,940,941],{"class":404},"['italic']",[359,943,401],{"class":364},[359,945,411],{"class":410},[359,947,372],{"class":364},[359,949,950,952,954],{"class":361,"line":124},[359,951,449],{"class":364},[359,953,369],{"class":368},[359,955,372],{"class":364},[772,957,959],{"id":958},"multiple-fonts","Multiple fonts",[326,961,962],{},"Of course, you may register more than one font:",[349,964,966],{"className":702,"code":965,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u003CFont family=\"Inter\" :weights=\"[400, 700]\" \u002F>\n  \u003CFont family=\"JetBrains Mono\" :weights=\"[400]\" \u002F>\n\u003C\u002Ftemplate>\n",[329,967,968,976,1007,1039],{"__ignoreMap":355},[359,969,970,972,974],{"class":361,"line":18},[359,971,365],{"class":364},[359,973,369],{"class":368},[359,975,372],{"class":364},[359,977,978,980,982,984,986,988,991,993,995,997,999,1001,1003,1005],{"class":361,"line":13},[359,979,377],{"class":364},[359,981,55],{"class":368},[359,983,395],{"class":394},[359,985,398],{"class":364},[359,987,401],{"class":364},[359,989,990],{"class":404},"Inter",[359,992,401],{"class":364},[359,994,813],{"class":394},[359,996,398],{"class":364},[359,998,401],{"class":364},[359,1000,889],{"class":404},[359,1002,401],{"class":364},[359,1004,411],{"class":410},[359,1006,372],{"class":364},[359,1008,1009,1011,1013,1015,1017,1019,1022,1024,1026,1028,1030,1033,1035,1037],{"class":361,"line":32},[359,1010,377],{"class":364},[359,1012,55],{"class":368},[359,1014,395],{"class":394},[359,1016,398],{"class":364},[359,1018,401],{"class":364},[359,1020,1021],{"class":404},"JetBrains Mono",[359,1023,401],{"class":364},[359,1025,813],{"class":394},[359,1027,398],{"class":364},[359,1029,401],{"class":364},[359,1031,1032],{"class":404},"[400]",[359,1034,401],{"class":364},[359,1036,411],{"class":410},[359,1038,372],{"class":364},[359,1040,1041,1043,1045],{"class":361,"line":27},[359,1042,449],{"class":364},[359,1044,369],{"class":368},[359,1046,372],{"class":364},[772,1048,1049],{"id":1049},"font-display",[326,1051,1052,1053,1055,1056,781],{},"Set the ",[329,1054,1049],{}," strategy with the ",[329,1057,1058],{},"display",[349,1060,1062],{"className":702,"code":1061,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u002F\u002F [!code word:display=\"optional\"]\n  \u003CFont family=\"Roboto\" display=\"optional\" \u002F>\n\u003C\u002Ftemplate>\n",[329,1063,1064,1072,1109],{"__ignoreMap":355},[359,1065,1066,1068,1070],{"class":361,"line":18},[359,1067,365],{"class":364},[359,1069,369],{"class":368},[359,1071,372],{"class":364},[359,1073,1074,1076,1078,1080,1082,1084,1086,1088,1091,1094,1097,1099,1103,1105,1107],{"class":361,"line":32},[359,1075,377],{"class":364},[359,1077,55],{"class":368},[359,1079,395],{"class":394},[359,1081,398],{"class":364},[359,1083,401],{"class":364},[359,1085,405],{"class":404},[359,1087,401],{"class":364},[359,1089,1090],{"class":394}," ",[359,1092,1058],{"class":1093},"highlighted-word sZNF3",[359,1095,398],{"class":1096},"highlighted-word sGGKt",[359,1098,401],{"class":1096},[359,1100,1102],{"class":1101},"highlighted-word sXiT_","optional",[359,1104,401],{"class":1096},[359,1106,411],{"class":410},[359,1108,372],{"class":364},[359,1110,1111,1113,1115],{"class":361,"line":27},[359,1112,449],{"class":364},[359,1114,369],{"class":368},[359,1116,372],{"class":364},[326,1118,1119,1121],{},[329,1120,1049],{}," controls how the browser handles text while a custom font is loading.",[326,1123,1124,1125,1128,1129,1131,1132,1140],{},"Values like ",[329,1126,1127],{},"swap"," show fallback text immediately and swap in the custom font when it arrives, while ",[329,1130,1102],{}," lets the browser skip the custom font on slow connections to avoid layout shift. See the ",[1133,1134,1139],"a",{"href":1135,"rel":1136,"target":1138},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face\u002Ffont-display",[1137],"nofollow","_blank","MDN reference"," for the full list of strategies.",[772,1142,1144],{"id":1143},"bunny-fonts","Bunny Fonts",[326,1146,841,1147,1150,1151,1155],{},[329,1148,1149],{},"provider"," prop to load fonts from ",[1133,1152,1144],{"href":1153,"rel":1154,"target":1138},"https:\u002F\u002Ffonts.bunny.net",[1137],", a privacy-friendly Google Fonts alternative:",[349,1157,1159],{"className":702,"code":1158,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u002F\u002F [!code word:provider=\"bunny\"]\n  \u003CFont family=\"Open Sans\" provider=\"bunny\" :weights=\"[400, 700]\" \u002F>\n\u003C\u002Ftemplate>\n",[329,1160,1161,1169,1213],{"__ignoreMap":355},[359,1162,1163,1165,1167],{"class":361,"line":18},[359,1164,365],{"class":364},[359,1166,369],{"class":368},[359,1168,372],{"class":364},[359,1170,1171,1173,1175,1177,1179,1181,1184,1186,1188,1190,1192,1194,1197,1199,1201,1203,1205,1207,1209,1211],{"class":361,"line":32},[359,1172,377],{"class":364},[359,1174,55],{"class":368},[359,1176,395],{"class":394},[359,1178,398],{"class":364},[359,1180,401],{"class":364},[359,1182,1183],{"class":404},"Open Sans",[359,1185,401],{"class":364},[359,1187,1090],{"class":394},[359,1189,1149],{"class":1093},[359,1191,398],{"class":1096},[359,1193,401],{"class":1096},[359,1195,1196],{"class":1101},"bunny",[359,1198,401],{"class":1096},[359,1200,813],{"class":394},[359,1202,398],{"class":364},[359,1204,401],{"class":364},[359,1206,889],{"class":404},[359,1208,401],{"class":364},[359,1210,411],{"class":410},[359,1212,372],{"class":364},[359,1214,1215,1217,1219],{"class":361,"line":27},[359,1216,449],{"class":364},[359,1218,369],{"class":368},[359,1220,372],{"class":364},[772,1222,1224],{"id":1223},"custom-url","Custom URL",[326,1226,1227,1228,781],{},"If you self-host or use a provider that builds its own URLs, pass it through the ",[329,1229,1230],{},"url",[349,1232,1234],{"className":702,"code":1233,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u003CFont\n    family=\"Acme Sans\"\n    url=\"https:\u002F\u002Fcdn.example.com\u002Ffonts\u002Facme-sans.css\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[329,1235,1236,1244,1251,1265,1279,1286],{"__ignoreMap":355},[359,1237,1238,1240,1242],{"class":361,"line":18},[359,1239,365],{"class":364},[359,1241,369],{"class":368},[359,1243,372],{"class":364},[359,1245,1246,1248],{"class":361,"line":13},[359,1247,377],{"class":364},[359,1249,1250],{"class":368},"Font\n",[359,1252,1253,1256,1258,1260,1263],{"class":361,"line":32},[359,1254,1255],{"class":394},"    family",[359,1257,398],{"class":364},[359,1259,401],{"class":364},[359,1261,1262],{"class":404},"Acme Sans",[359,1264,538],{"class":364},[359,1266,1267,1270,1272,1274,1277],{"class":361,"line":27},[359,1268,1269],{"class":394},"    url",[359,1271,398],{"class":364},[359,1273,401],{"class":364},[359,1275,1276],{"class":404},"https:\u002F\u002Fcdn.example.com\u002Ffonts\u002Facme-sans.css",[359,1278,538],{"class":364},[359,1280,1281,1284],{"class":361,"line":52},[359,1282,1283],{"class":410},"  \u002F",[359,1285,372],{"class":364},[359,1287,1288,1290,1292],{"class":361,"line":128},[359,1289,449],{"class":364},[359,1291,369],{"class":368},[359,1293,372],{"class":364},[334,1295,1297],{"type":1296},"warning",[326,1298,1299,1300,1302,1303,1305,1306,1305,1308,1310,1311,1313],{},"When ",[329,1301,1230],{}," is set, the ",[329,1304,1149],{},", ",[329,1307,774],{},[329,1309,1058],{},", and ",[329,1312,844],{}," props are ignored — encode them in the URL yourself.",[772,1315,1317],{"id":1316},"fallbacks","Fallbacks",[326,1319,1320,1321,1324],{},"Multi-word family names are automatically wrapped in double quotes, and a category-aware fallback stack is appended. For example, ",[329,1322,1323],{},"\u003CFont family=\"Open Sans\" \u002F>"," produces:",[349,1326,1330],{"className":1327,"code":1328,"language":1329,"meta":355,"style":355},"language-css shiki shiki-themes laserwave","--font-open-sans: \"Open Sans\", ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif;\n","css",[329,1331,1332],{"__ignoreMap":355},[359,1333,1334,1337,1339,1341,1343,1345,1347,1349,1351,1353,1355,1357],{"class":361,"line":18},[359,1335,1336],{"class":410},"--font-open-sans: \"Open Sans\"",[359,1338,623],{"class":364},[359,1340,626],{"class":368},[359,1342,623],{"class":364},[359,1344,631],{"class":368},[359,1346,623],{"class":364},[359,1348,636],{"class":410},[359,1350,623],{"class":364},[359,1352,641],{"class":410},[359,1354,623],{"class":364},[359,1356,646],{"class":368},[359,1358,600],{"class":410},[326,1360,1361],{},"Maizzle picks the fallback stack based on the family name:",[1363,1364,1365,1378],"table",{},[1366,1367,1368],"thead",{},[1369,1370,1371,1375],"tr",{},[1372,1373,1374],"th",{},"Category",[1372,1376,1377],{},"Default fallback",[1379,1380,1381,1392,1402,1412,1422],"tbody",{},[1369,1382,1383,1387],{},[1384,1385,1386],"td",{},"Sans-serif",[1384,1388,1389],{},[329,1390,1391],{},"ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", sans-serif",[1369,1393,1394,1397],{},[1384,1395,1396],{},"Serif",[1384,1398,1399],{},[329,1400,1401],{},"ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif",[1369,1403,1404,1407],{},[1384,1405,1406],{},"Monospace",[1384,1408,1409],{},[329,1410,1411],{},"ui-monospace, Menlo, Consolas, monospace",[1369,1413,1414,1417],{},[1384,1415,1416],{},"Display",[1384,1418,1419],{},[329,1420,1421],{},"Impact, \"Arial Black\", system-ui, sans-serif",[1369,1423,1424,1427],{},[1384,1425,1426],{},"Handwriting",[1384,1428,1429],{},[329,1430,1431],{},"\"Segoe Script\", \"Brush Script MT\", cursive",[326,1433,1434],{},"For unknown family names, the sans-serif stack is used.",[326,1436,1437,1438,781],{},"You may override the fallback with the ",[329,1439,1440],{},"fallback",[349,1442,1444],{"className":702,"code":1443,"filename":353,"language":354,"meta":355,"style":355},"\u003Ctemplate>\n  \u003CFont family=\"Roboto\" fallback=\"Verdana, sans-serif\" \u002F>\n\u003C\u002Ftemplate>\n",[329,1445,1446,1454,1486],{"__ignoreMap":355},[359,1447,1448,1450,1452],{"class":361,"line":18},[359,1449,365],{"class":364},[359,1451,369],{"class":368},[359,1453,372],{"class":364},[359,1455,1456,1458,1460,1462,1464,1466,1468,1470,1473,1475,1477,1480,1482,1484],{"class":361,"line":13},[359,1457,377],{"class":364},[359,1459,55],{"class":368},[359,1461,395],{"class":394},[359,1463,398],{"class":364},[359,1465,401],{"class":364},[359,1467,405],{"class":404},[359,1469,401],{"class":364},[359,1471,1472],{"class":394}," fallback",[359,1474,398],{"class":364},[359,1476,401],{"class":364},[359,1478,1479],{"class":404},"Verdana, sans-serif",[359,1481,401],{"class":364},[359,1483,411],{"class":410},[359,1485,372],{"class":364},[359,1487,1488,1490,1492],{"class":361,"line":32},[359,1489,449],{"class":364},[359,1491,369],{"class":368},[359,1493,372],{"class":364},[341,1495,1497],{"id":1496},"props","Props",[772,1499,1500],{"id":1500},"family",[326,1502,1503,1504,1507,1510,1511],{},"Type: ",[329,1505,1506],{},"String",[1508,1509],"br",{},"\nDefault: ",[1512,1513,1514],"em",{},"required",[326,1516,1517,1518,1521,1522,1525],{},"A single font family name, e.g. ",[329,1519,1520],{},"\"Roboto\""," or ",[329,1523,1524],{},"\"Open Sans\"",". Your IDE will suggest names from a list of 25 popular Google Fonts.",[326,1527,1528,1529,1531],{},"For fallback fonts, use the ",[329,1530,1440],{}," prop instead of a comma-separated list here.",[772,1533,774],{"id":1534},"weights-1",[326,1536,1503,1537,1540,1510,1542],{},[329,1538,1539],{},"Number[]",[1508,1541],{},[329,1543,1032],{},[326,1545,1546,1547,1549],{},"Font weights to load. Sorted ascending before the URL is built. Ignored when ",[329,1548,1230],{}," is set.",[772,1551,844],{"id":844},[326,1553,1503,1554,1557,1510,1559],{},[329,1555,1556],{},"Array\u003C'normal' | 'italic'>",[1508,1558],{},[329,1560,1561],{},"['normal']",[326,1563,1564,1565,1568,1569,1572,1573,1549],{},"Font styles to load. Including ",[329,1566,1567],{},"'italic'"," switches the URL to the ",[329,1570,1571],{},"ital,wght"," axis. Ignored when ",[329,1574,1230],{},[772,1576,1058],{"id":1058},[326,1578,1503,1579,1582,1510,1584],{},[329,1580,1581],{},"'auto' | 'block' | 'swap' | 'fallback' | 'optional'",[1508,1583],{},[329,1585,1586],{},"'swap'",[326,1588,672,1589,1591,1592,1549],{},[329,1590,1049],{}," value appended to the stylesheet URL. Ignored when ",[329,1593,1230],{},[772,1595,1440],{"id":1440},[326,1597,1503,1598,1600,1510,1602],{},[329,1599,1506],{},[1508,1601],{},[1512,1603,1604],{},"category default",[326,1606,1607,1608,1610,1611,1614],{},"Custom font-family fallback stack for the ",[329,1609,675],{}," declaration. When omitted, a category-aware stack is chosen automatically — see ",[1133,1612,1317],{"href":1613},"#fallbacks"," for the table.",[772,1616,1149],{"id":1149},[326,1618,1503,1619,1622,1510,1624],{},[329,1620,1621],{},"'google' | 'bunny'",[1508,1623],{},[329,1625,1626],{},"'google'",[326,1628,1629,1630,1549],{},"Which font provider to build the stylesheet URL for. Ignored when ",[329,1631,1230],{},[772,1633,1230],{"id":1230},[326,1635,1503,1636,1638,1510,1640],{},[329,1637,1506],{},[1508,1639],{},[329,1641,1642],{},"''",[326,1644,1645,1646,1649,1650,1305,1652,1305,1654,1310,1656,1658],{},"A pre-built stylesheet URL. When set, it's used as-is for the ",[329,1647,1648],{},"\u003Clink href>"," and the ",[329,1651,1149],{},[329,1653,774],{},[329,1655,1058],{},[329,1657,844],{}," props are ignored.",[334,1660,1661],{"type":336},[326,1662,1663],{},"Fonts are deduplicated by family name. If you register the same family more than once, only the first registration wins.",[578,1665,1666],{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}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 pre.shiki code .s0ZPN, html code.shiki .s0ZPN{--shiki-default:#40B4C4}html pre.shiki code .s0EtI, html code.shiki .s0EtI{--shiki-default:#B381C5}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}",{"title":355,"searchDepth":13,"depth":13,"links":1668},[1669,1678],{"id":343,"depth":13,"text":344,"children":1670},[1671,1672,1673,1674,1675,1676,1677],{"id":774,"depth":32,"text":775},{"id":837,"depth":32,"text":838},{"id":958,"depth":32,"text":959},{"id":1049,"depth":32,"text":1049},{"id":1143,"depth":32,"text":1144},{"id":1223,"depth":32,"text":1224},{"id":1316,"depth":32,"text":1317},{"id":1496,"depth":13,"text":1497,"children":1679},[1680,1681,1682,1683,1684,1685,1686],{"id":1500,"depth":32,"text":1500},{"id":1534,"depth":32,"text":774},{"id":844,"depth":32,"text":844},{"id":1058,"depth":32,"text":1058},{"id":1440,"depth":32,"text":1440},{"id":1149,"depth":32,"text":1149},{"id":1230,"depth":32,"text":1230},"Loads a web font in your email and registers a Tailwind utility class for it.","md",{},{"title":55,"description":1687},"docs\u002Fcomponents\u002Ffont","aAtZsHlDFLF4k-LpUZtgmq5sgeJAcOPrK64773-zzpQ",1781015438632]