[{"data":1,"prerenderedAt":1524},["ShallowReactive",2],{"docs-side-nav":3,"docs-header-nav":197,"/docs/examples/google-fonts":270,"docs-bottom-nav":1451},{"id":4,"extension":5,"items":6,"meta":194,"stem":195,"__hash__":196},"navigation/data/navigation.json","json",[7,34,46,70,104,155,170],{"name":8,"items":9},"Getting Started",[10,13,16,19,22,25,28,31],{"title":11,"path":12},"What is Maizzle?","/docs/introduction",{"title":14,"path":15},"Installation","/docs/installation",{"title":17,"path":18},"Editor Setup","/docs/editor-setup",{"title":20,"path":21},"Compatibility","/docs/compatibility",{"title":23,"path":24},"Upgrade Guide","/docs/upgrade-guide",{"title":26,"path":27},"Resources","/resources",{"title":29,"path":30},"Glossary","/glossary",{"title":32,"path":33},"CLI","/docs/cli",{"name":35,"items":36},"Concepts",[37,40,43],{"title":38,"path":39},"Environments","/docs/environments",{"title":41,"path":42},"Tailwind CSS","/docs/tailwindcss",{"title":44,"path":45},"Build Process","/docs/build-process",{"name":47,"items":48},"Configuration",[49,52,55,58,61,64,67],{"title":50,"path":51},"CSS","/docs/configuration/css",{"title":53,"path":54},"Build","/docs/configuration/build",{"title":56,"path":57},"Server","/docs/configuration/server",{"title":59,"path":60},"Components","/docs/configuration/components",{"title":62,"path":63},"Expressions","/docs/configuration/expressions",{"title":65,"path":66},"PostHTML","/docs/configuration/posthtml",{"title":68,"path":69},"PostCSS","/docs/configuration/postcss",{"name":71,"items":72},"Development",[73,76,79,81,83,86,89,92,95,98,101],{"title":74,"path":75},"Layouts","/docs/layouts",{"title":77,"path":78},"Templates","/docs/templates",{"title":59,"path":80},"/docs/components",{"title":62,"path":82},"/docs/expressions",{"title":84,"path":85},"Tags","/docs/tags",{"title":87,"path":88},"Assets","/docs/assets",{"title":90,"path":91},"Events","/docs/events",{"title":93,"path":94},"Functions","/docs/functions",{"title":96,"path":97},"Markdown","/docs/markdown",{"title":99,"path":100},"Plaintext","/docs/plaintext",{"title":102,"path":103},"API","/docs/api",{"name":105,"items":106},"Transformers",[107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152],{"title":108,"path":109},"What are Transformers?","/docs/transformers",{"title":111,"path":112},"Filters","/docs/transformers/filters",{"title":114,"path":115},"Inline CSS","/docs/transformers/inline-css",{"title":117,"path":118},"Safe Selectors","/docs/transformers/safe-class-names",{"title":120,"path":121},"CSS Purging","/docs/transformers/purge-css",{"title":123,"path":124},"Shorthand CSS","/docs/transformers/shorthand-css",{"title":126,"path":127},"Attribute To Style","/docs/transformers/attribute-to-style",{"title":129,"path":130},"Remove Attributes","/docs/transformers/remove-attributes",{"title":132,"path":133},"Add Attributes","/docs/transformers/add-attributes",{"title":135,"path":136},"Replace Strings","/docs/transformers/replace-strings",{"title":138,"path":139},"Widow Words","/docs/transformers/widows",{"title":141,"path":142},"URL Parameters","/docs/transformers/url-parameters",{"title":144,"path":145},"Base URL","/docs/transformers/base-url",{"title":147,"path":148},"Six HEX","/docs/transformers/six-hex",{"title":150,"path":151},"Prettify","/docs/transformers/prettify",{"title":153,"path":154},"Minify","/docs/transformers/minify",{"name":156,"items":157},"Starter Components",[158,161,164,167],{"title":159,"path":160},"Spacer","/docs/components/spacer",{"title":162,"path":163},"Divider","/docs/components/divider",{"title":165,"path":166},"Button","/docs/components/button",{"title":168,"path":169},"VML","/docs/components/vml",{"name":171,"items":172},"Examples",[173,176,179,182,185,188,191],{"title":174,"path":175},"Spacers","/docs/examples/spacers",{"title":177,"path":178},"Dividers","/docs/examples/dividers",{"title":180,"path":181},"Buttons","/docs/examples/buttons",{"title":183,"path":184},"Cards","/docs/examples/cards",{"title":186,"path":187},"Grids","/docs/examples/grids",{"title":189,"path":190},"Google Fonts","/docs/examples/google-fonts",{"title":192,"path":193},"Reverse Stack","/docs/examples/reverse-stack",{},"data/navigation","lXnN10nQFMOp0U7LPKSlEiRFYPoRC0dC5rgvZn8-pes",{"id":4,"extension":5,"items":198,"meta":269,"stem":195,"__hash__":196},[199,209,214,223,236,254,260],{"name":8,"items":200},[201,202,203,204,205,206,207,208],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":210},[211,212,213],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":215},[216,217,218,219,220,221,222],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":224},[225,226,227,228,229,230,231,232,233,234,235],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":237},[238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":255},[256,257,258,259],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":261},[262,263,264,265,266,267,268],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},{"id":271,"title":189,"body":272,"description":1444,"extension":1445,"meta":1446,"navigation":451,"path":190,"seo":1447,"sitemap":1448,"stem":1449,"__hash__":1450},"docs/docs/examples/google-fonts.md",{"type":273,"value":274,"toc":1437},"minimark",[275,279,283,286,291,294,297,506,510,516,720,731,743,747,758,761,919,929,933,936,947,954,960,1068,1071,1139,1143,1166,1169,1172,1181,1187,1415,1427,1434],[276,277,189],"h1",{"id":278},"google-fonts",[280,281,282],"p",{},"Adding Google Fonts to your Maizzle templates is very easy: you simply copy the code they provide and paste it into your Layout or Template.",[280,284,285],{},"For this example, we'll use Merriweather and Open Sans.",[287,288,290],"h2",{"id":289},"layout","Layout",[280,292,293],{},"Using the same Google Fonts in all your emails? Paste the code in your main Layout.",[280,295,296],{},"For example, add it before Tailwind CSS:",[298,299,305],"pre",{"className":300,"code":301,"filename":302,"language":303,"meta":304,"style":304},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Chead>\n  \u003C!-- Google Fonts -->\n  \u003Clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n  \u003Clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n  \u003Clink href=\"https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap\" rel=\"stylesheet\" media=\"screen\">\n\n  \u003Cstyle>\n    @tailwind components;\n    @tailwind utilities;\n  \u003C/style>\n\u003C/head>\n","layouts/main.html","html","",[306,307,308,324,331,370,403,446,453,463,476,486,496],"code",{"__ignoreMap":304},[309,310,313,317,321],"span",{"class":311,"line":312},"line",1,[309,314,316],{"class":315},"soJEP","\u003C",[309,318,320],{"class":319},"sizJ4","head",[309,322,323],{"class":315},">\n",[309,325,327],{"class":311,"line":326},2,[309,328,330],{"class":329},"smVoC","  \u003C!-- Google Fonts -->\n",[309,332,334,337,340,344,347,350,354,356,359,361,363,366,368],{"class":311,"line":333},3,[309,335,336],{"class":315},"  \u003C",[309,338,339],{"class":319},"link",[309,341,343],{"class":342},"sQMLp"," rel",[309,345,346],{"class":315},"=",[309,348,349],{"class":342},"\"",[309,351,353],{"class":352},"sfCc6","preconnect",[309,355,349],{"class":342},[309,357,358],{"class":342}," href",[309,360,346],{"class":315},[309,362,349],{"class":342},[309,364,365],{"class":352},"https://fonts.googleapis.com",[309,367,349],{"class":342},[309,369,323],{"class":315},[309,371,373,375,377,379,381,383,385,387,389,391,393,396,398,401],{"class":311,"line":372},4,[309,374,336],{"class":315},[309,376,339],{"class":319},[309,378,343],{"class":342},[309,380,346],{"class":315},[309,382,349],{"class":342},[309,384,353],{"class":352},[309,386,349],{"class":342},[309,388,358],{"class":342},[309,390,346],{"class":315},[309,392,349],{"class":342},[309,394,395],{"class":352},"https://fonts.gstatic.com",[309,397,349],{"class":342},[309,399,400],{"class":342}," crossorigin",[309,402,323],{"class":315},[309,404,406,408,410,412,414,416,419,421,423,425,427,430,432,435,437,439,442,444],{"class":311,"line":405},5,[309,407,336],{"class":315},[309,409,339],{"class":319},[309,411,358],{"class":342},[309,413,346],{"class":315},[309,415,349],{"class":342},[309,417,418],{"class":352},"https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap",[309,420,349],{"class":342},[309,422,343],{"class":342},[309,424,346],{"class":315},[309,426,349],{"class":342},[309,428,429],{"class":352},"stylesheet",[309,431,349],{"class":342},[309,433,434],{"class":342}," media",[309,436,346],{"class":315},[309,438,349],{"class":342},[309,440,441],{"class":352},"screen",[309,443,349],{"class":342},[309,445,323],{"class":315},[309,447,449],{"class":311,"line":448},6,[309,450,452],{"emptyLinePlaceholder":451},true,"\n",[309,454,456,458,461],{"class":311,"line":455},7,[309,457,336],{"class":315},[309,459,460],{"class":319},"style",[309,462,323],{"class":315},[309,464,466,470,473],{"class":311,"line":465},8,[309,467,469],{"class":468},"sO3Gh","    @tailwind",[309,471,472],{"class":352}," components",[309,474,475],{"class":468},";\n",[309,477,479,481,484],{"class":311,"line":478},9,[309,480,469],{"class":468},[309,482,483],{"class":352}," utilities",[309,485,475],{"class":468},[309,487,489,492,494],{"class":311,"line":488},10,[309,490,491],{"class":315},"  \u003C/",[309,493,460],{"class":319},[309,495,323],{"class":315},[309,497,499,502,504],{"class":311,"line":498},11,[309,500,501],{"class":315},"\u003C/",[309,503,320],{"class":319},[309,505,323],{"class":315},[287,507,509],{"id":508},"template","Template",[280,511,512,513,515],{},"If you only need Google Fonts in a certain Template, push to the ",[306,514,320],{}," stack:",[298,517,520],{"className":300,"code":518,"filename":519,"language":303,"meta":304,"style":304},"\u003Cx-main>\n  \u003Cpush name=\"head\">\n    \u003Clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    \u003Clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    \u003Clink\n      rel=\"stylesheet\"\n      media=\"screen\"\n      href=\"https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap\"\n    >\n  \u003C/push>\n\n  \u003Ctable class=\"font-merriweather\">\n    \u003C!-- ... -->\n  \u003C/table>\n\u003C/x-main>\n","emails/example.html",[306,521,522,531,551,580,610,617,631,644,657,662,670,674,696,702,711],{"__ignoreMap":304},[309,523,524,526,529],{"class":311,"line":312},[309,525,316],{"class":315},[309,527,528],{"class":319},"x-main",[309,530,323],{"class":315},[309,532,533,535,538,541,543,545,547,549],{"class":311,"line":326},[309,534,336],{"class":315},[309,536,537],{"class":319},"push",[309,539,540],{"class":342}," name",[309,542,346],{"class":315},[309,544,349],{"class":342},[309,546,320],{"class":352},[309,548,349],{"class":342},[309,550,323],{"class":315},[309,552,553,556,558,560,562,564,566,568,570,572,574,576,578],{"class":311,"line":333},[309,554,555],{"class":315},"    \u003C",[309,557,339],{"class":319},[309,559,343],{"class":342},[309,561,346],{"class":315},[309,563,349],{"class":342},[309,565,353],{"class":352},[309,567,349],{"class":342},[309,569,358],{"class":342},[309,571,346],{"class":315},[309,573,349],{"class":342},[309,575,365],{"class":352},[309,577,349],{"class":342},[309,579,323],{"class":315},[309,581,582,584,586,588,590,592,594,596,598,600,602,604,606,608],{"class":311,"line":372},[309,583,555],{"class":315},[309,585,339],{"class":319},[309,587,343],{"class":342},[309,589,346],{"class":315},[309,591,349],{"class":342},[309,593,353],{"class":352},[309,595,349],{"class":342},[309,597,358],{"class":342},[309,599,346],{"class":315},[309,601,349],{"class":342},[309,603,395],{"class":352},[309,605,349],{"class":342},[309,607,400],{"class":342},[309,609,323],{"class":315},[309,611,612,614],{"class":311,"line":405},[309,613,555],{"class":315},[309,615,616],{"class":319},"link\n",[309,618,619,622,624,626,628],{"class":311,"line":448},[309,620,621],{"class":342},"      rel",[309,623,346],{"class":315},[309,625,349],{"class":342},[309,627,429],{"class":352},[309,629,630],{"class":342},"\"\n",[309,632,633,636,638,640,642],{"class":311,"line":455},[309,634,635],{"class":342},"      media",[309,637,346],{"class":315},[309,639,349],{"class":342},[309,641,441],{"class":352},[309,643,630],{"class":342},[309,645,646,649,651,653,655],{"class":311,"line":465},[309,647,648],{"class":342},"      href",[309,650,346],{"class":315},[309,652,349],{"class":342},[309,654,418],{"class":352},[309,656,630],{"class":342},[309,658,659],{"class":311,"line":478},[309,660,661],{"class":315},"    >\n",[309,663,664,666,668],{"class":311,"line":488},[309,665,491],{"class":315},[309,667,537],{"class":319},[309,669,323],{"class":315},[309,671,672],{"class":311,"line":498},[309,673,452],{"emptyLinePlaceholder":451},[309,675,677,679,682,685,687,689,692,694],{"class":311,"line":676},12,[309,678,336],{"class":315},[309,680,681],{"class":319},"table",[309,683,684],{"class":342}," class",[309,686,346],{"class":315},[309,688,349],{"class":342},[309,690,691],{"class":352},"font-merriweather",[309,693,349],{"class":342},[309,695,323],{"class":315},[309,697,699],{"class":311,"line":698},13,[309,700,701],{"class":329},"    \u003C!-- ... -->\n",[309,703,705,707,709],{"class":311,"line":704},14,[309,706,491],{"class":315},[309,708,681],{"class":319},[309,710,323],{"class":315},[309,712,714,716,718],{"class":311,"line":713},15,[309,715,501],{"class":315},[309,717,528],{"class":319},[309,719,323],{"class":315},[280,721,722,723,726,727,730],{},"You'll see ",[306,724,725],{},"\u003Cstack name=\"head\" />"," in ",[306,728,729],{},"main.html"," - that's where Google Fonts will be output!",[732,733,734,735,738,739,742],"alert",{},"\nNotice the \n",[306,736,737],{},"media=\"screen\"","\n attribute on the last \n",[306,740,741],{},"\u003Clink>","\n tag - that helps avoid the Times New Roman fallback font bug in older versions of Outlook.\n",[287,744,746],{"id":745},"tailwind-css-utility","Tailwind CSS utility",[280,748,749,750,753,754,757],{},"After pasting in the code from Google Fonts, you have one more thing to do: register the ",[306,751,752],{},"fontFamily"," utilities in your ",[306,755,756],{},"tailwind.config.js",", so you can use classes generated by Tailwind.",[280,759,760],{},"For example, let's register a Tailwind utility for Open Sans:",[298,762,766],{"className":763,"code":764,"filename":756,"language":765,"meta":304,"style":304},"language-js shiki shiki-themes tailwind-css tailwind-css","export default {\n  theme: {\n    extend: {\n      fontFamily: {\n        'open-sans': ['\"Open Sans\"', 'ui-sans-serif', 'system-ui', '-apple-system', '\"Segoe UI\"', 'sans-serif'],\n        merriweather: [\"'Merriweather'\", 'ui-serif', 'Georgia', 'Cambria', '\"Times New Roman\"', 'Times', 'serif'],\n      },\n    },\n  }\n}\n","js",[306,767,768,780,790,799,808,853,899,904,909,914],{"__ignoreMap":304},[309,769,770,773,776],{"class":311,"line":312},[309,771,772],{"class":319},"export",[309,774,775],{"class":319}," default",[309,777,779],{"class":778},"sprQ5"," {\n",[309,781,782,785,788],{"class":311,"line":326},[309,783,784],{"class":352},"  theme",[309,786,787],{"class":778},":",[309,789,779],{"class":778},[309,791,792,795,797],{"class":311,"line":333},[309,793,794],{"class":352},"    extend",[309,796,787],{"class":778},[309,798,779],{"class":778},[309,800,801,804,806],{"class":311,"line":372},[309,802,803],{"class":352},"      fontFamily",[309,805,787],{"class":778},[309,807,779],{"class":778},[309,809,810,813,815,818,821,824,827,829,832,834,837,839,842,844,847,850],{"class":311,"line":405},[309,811,812],{"class":352},"        'open-sans'",[309,814,787],{"class":778},[309,816,817],{"class":352}," [",[309,819,820],{"class":352},"'\"Open Sans\"'",[309,822,823],{"class":778},",",[309,825,826],{"class":352}," 'ui-sans-serif'",[309,828,823],{"class":778},[309,830,831],{"class":352}," 'system-ui'",[309,833,823],{"class":778},[309,835,836],{"class":352}," '-apple-system'",[309,838,823],{"class":778},[309,840,841],{"class":352}," '\"Segoe UI\"'",[309,843,823],{"class":778},[309,845,846],{"class":352}," 'sans-serif'",[309,848,849],{"class":352},"]",[309,851,852],{"class":778},",\n",[309,854,855,858,860,862,865,867,870,872,875,877,880,882,885,887,890,892,895,897],{"class":311,"line":448},[309,856,857],{"class":352},"        merriweather",[309,859,787],{"class":778},[309,861,817],{"class":352},[309,863,864],{"class":352},"\"'Merriweather'\"",[309,866,823],{"class":778},[309,868,869],{"class":352}," 'ui-serif'",[309,871,823],{"class":778},[309,873,874],{"class":352}," 'Georgia'",[309,876,823],{"class":778},[309,878,879],{"class":352}," 'Cambria'",[309,881,823],{"class":778},[309,883,884],{"class":352}," '\"Times New Roman\"'",[309,886,823],{"class":778},[309,888,889],{"class":352}," 'Times'",[309,891,823],{"class":778},[309,893,894],{"class":352}," 'serif'",[309,896,849],{"class":352},[309,898,852],{"class":778},[309,900,901],{"class":311,"line":455},[309,902,903],{"class":778},"      },\n",[309,905,906],{"class":311,"line":465},[309,907,908],{"class":778},"    },\n",[309,910,911],{"class":311,"line":478},[309,912,913],{"class":778},"  }\n",[309,915,916],{"class":311,"line":488},[309,917,918],{"class":778},"}\n",[280,920,921,922,925,926,928],{},"Now you can use the ",[306,923,924],{},"font-open-sans"," and ",[306,927,691],{}," utility classes.",[287,930,932],{"id":931},"avoid-inlining","Avoid inlining",[280,934,935],{},"Although having the font-family CSS inlined on the first element in your HTML should be enough, there might be situations where that isn't desirable.",[280,937,938,939,942,943,946],{},"Email clients that support web fonts don't actually require the ",[306,940,941],{},"font-family"," CSS to be inlined in your HTML. Therefore, we can make use of Tailwind's breakpoints and tuck the class inside an ",[306,944,945],{},"@media screen {}"," query.",[280,948,949,950,953],{},"This way it doesn't get inlined and you can keep this CSS away from any email client that doesn't support ",[306,951,952],{},"@media"," queries.",[280,955,956,957,959],{},"To do this, we first register a ",[306,958,441],{}," breakpoint:",[298,961,965],{"className":962,"code":963,"filename":756,"highlights":964,"language":765,"meta":304,"style":304},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[448],[306,966,967,975,983,992,1013,1031,1055,1060,1064],{"__ignoreMap":304},[309,968,969,971,973],{"class":311,"line":312},[309,970,772],{"class":319},[309,972,775],{"class":319},[309,974,779],{"class":778},[309,976,977,979,981],{"class":311,"line":326},[309,978,784],{"class":352},[309,980,787],{"class":778},[309,982,779],{"class":778},[309,984,985,988,990],{"class":311,"line":333},[309,986,987],{"class":352},"    screens",[309,989,787],{"class":778},[309,991,779],{"class":778},[309,993,994,997,999,1002,1005,1007,1010],{"class":311,"line":372},[309,995,996],{"class":352},"      sm",[309,998,787],{"class":778},[309,1000,1001],{"class":778}," {",[309,1003,1004],{"class":352},"max",[309,1006,787],{"class":778},[309,1008,1009],{"class":352}," '600px'",[309,1011,1012],{"class":778},"},\n",[309,1014,1015,1018,1020,1022,1024,1026,1029],{"class":311,"line":405},[309,1016,1017],{"class":352},"      xs",[309,1019,787],{"class":778},[309,1021,1001],{"class":778},[309,1023,1004],{"class":352},[309,1025,787],{"class":778},[309,1027,1028],{"class":352}," '425px'",[309,1030,1012],{"class":778},[309,1032,1037,1040,1042,1044,1047,1049,1052],{"class":1033,"line":448},[311,1034,1035,1036],"highlight","diff","add",[309,1038,1039],{"class":352},"      screen",[309,1041,787],{"class":778},[309,1043,1001],{"class":778},[309,1045,1046],{"class":352},"raw",[309,1048,787],{"class":778},[309,1050,1051],{"class":352}," 'screen'",[309,1053,1054],{"class":778},"},",[309,1056,1057],{"class":311,"line":455},[309,1058,1059],{"class":778},"    }\n",[309,1061,1062],{"class":311,"line":465},[309,1063,913],{"class":778},[309,1065,1066],{"class":311,"line":478},[309,1067,918],{"class":778},[280,1069,1070],{},"We can use it like this:",[298,1072,1074],{"className":300,"code":1073,"filename":519,"language":303,"meta":304,"style":304},"\u003Cdiv class=\"screen:font-open-sans\">\n  \u003Ch1>Lorem ipsum\u003C/h1>\n  \u003Cp>Labore exercitation consequat tempor quis eu nulla amet.\u003C/p>\n\u003C/div>\n",[306,1075,1076,1096,1114,1131],{"__ignoreMap":304},[309,1077,1078,1080,1083,1085,1087,1089,1092,1094],{"class":311,"line":312},[309,1079,316],{"class":315},[309,1081,1082],{"class":319},"div",[309,1084,684],{"class":342},[309,1086,346],{"class":315},[309,1088,349],{"class":342},[309,1090,1091],{"class":352},"screen:font-open-sans",[309,1093,349],{"class":342},[309,1095,323],{"class":315},[309,1097,1098,1100,1102,1105,1108,1110,1112],{"class":311,"line":326},[309,1099,336],{"class":315},[309,1101,276],{"class":319},[309,1103,1104],{"class":315},">",[309,1106,1107],{"class":352},"Lorem ipsum",[309,1109,501],{"class":315},[309,1111,276],{"class":319},[309,1113,323],{"class":315},[309,1115,1116,1118,1120,1122,1125,1127,1129],{"class":311,"line":333},[309,1117,336],{"class":315},[309,1119,280],{"class":319},[309,1121,1104],{"class":315},[309,1123,1124],{"class":352},"Labore exercitation consequat tempor quis eu nulla amet.",[309,1126,501],{"class":315},[309,1128,280],{"class":319},[309,1130,323],{"class":315},[309,1132,1133,1135,1137],{"class":311,"line":372},[309,1134,501],{"class":315},[309,1136,1082],{"class":319},[309,1138,323],{"class":315},[287,1140,1142],{"id":1141},"font-face","@font-face",[280,1144,1145,1146,1151,1152,1154,1155,1158,1159,1161,1162,1165],{},"Some email clients or ",[1147,1148,1150],"abbr",{"title":1149},"Email Service Provider","ESP","s don't support ",[306,1153,741],{}," tags or CSS ",[306,1156,1157],{},"import()",", but do support web fonts. In such cases, you can use ",[306,1160,1142],{}," and add your Google Fonts right inside your ",[306,1163,1164],{},"\u003Cstyle>"," tag.",[280,1167,1168],{},"First, visit the URL that Google Fonts creates for you after you've selected your fonts.",[280,1170,1171],{},"In our example, it's the following:",[298,1173,1175],{"className":300,"code":1174,"language":303,"meta":304,"style":304},"https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap\n",[306,1176,1177],{"__ignoreMap":304},[309,1178,1179],{"class":311,"line":312},[309,1180,1174],{"class":352},[280,1182,1183,1184,1186],{},"You will see lots of ",[306,1185,1142],{}," declarations in there, for example",[298,1188,1192],{"className":1189,"code":1190,"language":1191,"meta":304,"style":304},"language-css shiki shiki-themes tailwind-css tailwind-css","/* latin */\n@font-face {\n  font-family: 'Merriweather';\n  font-style: normal;\n  font-weight: 400;\n  font-display: swap;\n  src: url(https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-fCZM.woff2) format('woff2');\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n","css",[306,1193,1194,1199,1206,1225,1238,1250,1262,1298,1411],{"__ignoreMap":304},[309,1195,1196],{"class":311,"line":312},[309,1197,1198],{"class":329},"/* latin */\n",[309,1200,1201,1203],{"class":311,"line":326},[309,1202,1142],{"class":468},[309,1204,779],{"class":1205},"shy1k",[309,1207,1208,1212,1215,1218,1221,1223],{"class":311,"line":333},[309,1209,1211],{"class":1210},"sO1gY","  font-family",[309,1213,1214],{"class":468},": ",[309,1216,1217],{"class":352},"'",[309,1219,1220],{"class":1210},"Merriweather",[309,1222,1217],{"class":352},[309,1224,475],{"class":468},[309,1226,1227,1230,1232,1236],{"class":311,"line":372},[309,1228,1229],{"class":1210},"  font-style",[309,1231,1214],{"class":468},[309,1233,1235],{"class":1234},"snKqK","normal",[309,1237,475],{"class":468},[309,1239,1240,1243,1245,1248],{"class":311,"line":405},[309,1241,1242],{"class":1210},"  font-weight",[309,1244,1214],{"class":468},[309,1246,1247],{"class":352},"400",[309,1249,475],{"class":468},[309,1251,1252,1255,1257,1260],{"class":311,"line":448},[309,1253,1254],{"class":1210},"  font-display",[309,1256,1214],{"class":468},[309,1258,1259],{"class":1234},"swap",[309,1261,475],{"class":468},[309,1263,1264,1267,1269,1272,1275,1279,1282,1285,1287,1289,1292,1294,1296],{"class":311,"line":455},[309,1265,1266],{"class":1210},"  src",[309,1268,1214],{"class":468},[309,1270,1271],{"class":1234},"url",[309,1273,1274],{"class":1205},"(",[309,1276,1278],{"class":1277},"srhaB","https://fonts.gstatic.com/s/merriweather/v22/u-440qyriQwlOrhSvowK_l5-fCZM.woff2",[309,1280,1281],{"class":1205},")",[309,1283,1284],{"class":1234}," format",[309,1286,1274],{"class":1205},[309,1288,1217],{"class":352},[309,1290,1291],{"class":1210},"woff2",[309,1293,1217],{"class":352},[309,1295,1281],{"class":1205},[309,1297,475],{"class":468},[309,1299,1300,1303,1305,1308,1311,1314,1316,1319,1321,1324,1326,1329,1331,1334,1336,1339,1341,1344,1346,1349,1351,1354,1356,1359,1361,1364,1366,1369,1371,1374,1376,1379,1381,1384,1386,1389,1391,1394,1396,1399,1401,1404,1406,1409],{"class":311,"line":465},[309,1301,1302],{"class":1210},"  unicode-range",[309,1304,1214],{"class":468},[309,1306,1307],{"class":1234},"U+0000",[309,1309,1310],{"class":468},"-",[309,1312,1313],{"class":1234},"00FF",[309,1315,823],{"class":468},[309,1317,1318],{"class":1234}," U+0131",[309,1320,823],{"class":468},[309,1322,1323],{"class":1234}," U+0152",[309,1325,1310],{"class":468},[309,1327,1328],{"class":1234},"0153",[309,1330,823],{"class":468},[309,1332,1333],{"class":1234}," U+02BB",[309,1335,1310],{"class":468},[309,1337,1338],{"class":1234},"02BC",[309,1340,823],{"class":468},[309,1342,1343],{"class":1234}," U+02C6",[309,1345,823],{"class":468},[309,1347,1348],{"class":1234}," U+02DA",[309,1350,823],{"class":468},[309,1352,1353],{"class":1234}," U+02DC",[309,1355,823],{"class":468},[309,1357,1358],{"class":1234}," U+2000",[309,1360,1310],{"class":468},[309,1362,1363],{"class":1234},"206F",[309,1365,823],{"class":468},[309,1367,1368],{"class":1234}," U+2074",[309,1370,823],{"class":468},[309,1372,1373],{"class":1234}," U+20AC",[309,1375,823],{"class":468},[309,1377,1378],{"class":1234}," U+2122",[309,1380,823],{"class":468},[309,1382,1383],{"class":1234}," U+2191",[309,1385,823],{"class":468},[309,1387,1388],{"class":1234}," U+2193",[309,1390,823],{"class":468},[309,1392,1393],{"class":1234}," U+2212",[309,1395,823],{"class":468},[309,1397,1398],{"class":1234}," U+2215",[309,1400,823],{"class":468},[309,1402,1403],{"class":1234}," U+FEFF",[309,1405,823],{"class":468},[309,1407,1408],{"class":1234}," U+FFFD",[309,1410,475],{"class":468},[309,1412,1413],{"class":311,"line":478},[309,1414,918],{"class":1205},[280,1416,1417,1418,1420,1421,1426],{},"Copy only the ",[306,1419,1142],{}," declarations that you need and add them either in a Template or in the Layout your templates extend (for global usage) - see our ",[1422,1423,1425],"a",{"href":1424},"/guides/custom-fonts#add-in-template","web fonts in HTML emails guide"," to learn how to do so.",[280,1428,1429,1430,1433],{},"Note that you'll still need to register the ",[1422,1431,746],{"href":1432},"#tailwind-utility"," in order to use the fonts.",[460,1435,1436],{},"html pre.shiki code .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .smVoC, html code.shiki .smVoC{--shiki-light:#94A3B8;--shiki-light-font-style:italic;--shiki-dark:#94A3B8;--shiki-dark-font-style:italic}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}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 .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 .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}html pre.shiki code .shy1k, html code.shiki .shy1k{--shiki-light:#94A3B8;--shiki-dark:#94A3B8}html pre.shiki code .sO1gY, html code.shiki .sO1gY{--shiki-light:#2563EB;--shiki-dark:#2563EB}html pre.shiki code .snKqK, html code.shiki .snKqK{--shiki-light:#324258;--shiki-dark:#324258}html pre.shiki code .srhaB, html code.shiki .srhaB{--shiki-light:#075985;--shiki-dark:#075985}",{"title":304,"searchDepth":326,"depth":326,"links":1438},[1439,1440,1441,1442,1443],{"id":289,"depth":326,"text":290},{"id":508,"depth":326,"text":509},{"id":745,"depth":326,"text":746},{"id":931,"depth":326,"text":932},{"id":1141,"depth":326,"text":1142},"Easily import and use Google Fonts in your HTML email templates.","md",{},{"title":189,"description":1444},{"loc":190},"docs/examples/google-fonts","mbyhSpsWAN2ioIj0V363k71NTq_NfIPM8_awdTIda7I",{"id":4,"extension":5,"items":1452,"meta":1523,"stem":195,"__hash__":196},[1453,1463,1468,1477,1490,1508,1514],{"name":8,"items":1454},[1455,1456,1457,1458,1459,1460,1461,1462],{"title":11,"path":12},{"title":14,"path":15},{"title":17,"path":18},{"title":20,"path":21},{"title":23,"path":24},{"title":26,"path":27},{"title":29,"path":30},{"title":32,"path":33},{"name":35,"items":1464},[1465,1466,1467],{"title":38,"path":39},{"title":41,"path":42},{"title":44,"path":45},{"name":47,"items":1469},[1470,1471,1472,1473,1474,1475,1476],{"title":50,"path":51},{"title":53,"path":54},{"title":56,"path":57},{"title":59,"path":60},{"title":62,"path":63},{"title":65,"path":66},{"title":68,"path":69},{"name":71,"items":1478},[1479,1480,1481,1482,1483,1484,1485,1486,1487,1488,1489],{"title":74,"path":75},{"title":77,"path":78},{"title":59,"path":80},{"title":62,"path":82},{"title":84,"path":85},{"title":87,"path":88},{"title":90,"path":91},{"title":93,"path":94},{"title":96,"path":97},{"title":99,"path":100},{"title":102,"path":103},{"name":105,"items":1491},[1492,1493,1494,1495,1496,1497,1498,1499,1500,1501,1502,1503,1504,1505,1506,1507],{"title":108,"path":109},{"title":111,"path":112},{"title":114,"path":115},{"title":117,"path":118},{"title":120,"path":121},{"title":123,"path":124},{"title":126,"path":127},{"title":129,"path":130},{"title":132,"path":133},{"title":135,"path":136},{"title":138,"path":139},{"title":141,"path":142},{"title":144,"path":145},{"title":147,"path":148},{"title":150,"path":151},{"title":153,"path":154},{"name":156,"items":1509},[1510,1511,1512,1513],{"title":159,"path":160},{"title":162,"path":163},{"title":165,"path":166},{"title":168,"path":169},{"name":171,"items":1515},[1516,1517,1518,1519,1520,1521,1522],{"title":174,"path":175},{"title":177,"path":178},{"title":180,"path":181},{"title":183,"path":184},{"title":186,"path":187},{"title":189,"path":190},{"title":192,"path":193},{},1780318593045]