[{"data":1,"prerenderedAt":1570},["ShallowReactive",2],{"/guides/custom-fonts":3,"surround":1564},{"id":4,"title":5,"body":6,"date":1555,"description":1556,"extension":1557,"meta":1558,"navigation":479,"path":1559,"seo":1560,"sitemap":1561,"stem":1562,"__hash__":1563},"guides/guides/custom-fonts.md","Using custom web fonts in Maizzle email templates",{"type":7,"value":8,"toc":1542},"minimark",[9,13,19,28,40,43,48,51,73,80,83,86,90,93,100,105,116,316,323,327,339,510,514,518,521,531,632,639,642,646,653,656,690,698,731,735,747,753,808,816,826,835,938,946,998,1008,1017,1086,1100,1130,1140,1144,1147,1156,1277,1283,1287,1294,1297,1516,1520,1539],[10,11,5],"h1",{"id":12},"using-custom-web-fonts-in-maizzle-email-templates",[14,15,18],"p",{"className":16},[17],"text-sm","Last updated: May 30, 2022",[14,20,21,22,27],{},"It's super easy to ",[23,24,26],"a",{"href":25},"/docs/examples/google-fonts","use Google Fonts in your Maizzle email templates",", but what if you need to use a custom web font?",[14,29,30,31,35,36,39],{},"Maybe your brand uses a custom font that isn't available through Google Fonts, or maybe you're just developing Shopify notification email templates (where the usual ",[32,33,34],"code",{},"@import"," and ",[32,37,38],{},"\u003Clink>"," techniques aren't supported).",[14,41,42],{},"In this tutorial, you'll learn how to add your own custom fonts to emails in Maizzle.",[44,45,47],"h2",{"id":46},"initial-setup","Initial setup",[14,49,50],{},"First, let's scaffold a new project:",[52,53,58],"pre",{"className":54,"code":55,"language":56,"meta":57,"style":57},"language-sh shiki shiki-themes tailwind-css tailwind-css","npx create-maizzle\n","sh","",[32,59,60],{"__ignoreMap":57},[61,62,65,69],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sizJ4","npx",[61,70,72],{"class":71},"sfCc6"," create-maizzle\n",[14,74,75,76,79],{},"In the interactive setup wizard, specify the directory name to create the project in, i.e. ",[32,77,78],{},"./example-font-face",", and select the Default Starter.",[14,81,82],{},"Choose Yes when prompted to Install dependencies.",[14,84,85],{},"Once it finishes installing dependencies, open the project folder in your favorite editor.",[44,87,89],{"id":88},"register-font-face","Register @font-face",[14,91,92],{},"Imagine we have a display font called Barosan, which we're hosting on our website.",[14,94,95,96,99],{},"We'll use ",[32,97,98],{},"@font-face"," to register our custom font family - we can do this in the Template or in the Layout that we extend.",[101,102,104],"h3",{"id":103},"add-in-template","Add in Template",[14,106,107,108,111,112,115],{},"Open ",[32,109,110],{},"emails/transactional.html"," and add this before the ",[32,113,114],{},"\u003Cx-main>"," tag:",[52,117,121],{"className":118,"code":119,"filename":110,"language":120,"meta":57,"style":57},"language-html shiki shiki-themes tailwind-css tailwind-css","\u003Cpush name=\"head\">\n  \u003Cstyle>\n    @font-face {\n      font-family: 'Barosan';\n      font-style: normal;\n      font-weight: 400;\n      src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n    }\n  \u003C/style>\n\u003C/push>\n","html",[32,122,123,150,161,172,193,207,220,290,296,306],{"__ignoreMap":57},[61,124,125,129,132,136,139,142,145,147],{"class":63,"line":64},[61,126,128],{"class":127},"soJEP","\u003C",[61,130,131],{"class":67},"push",[61,133,135],{"class":134},"sQMLp"," name",[61,137,138],{"class":127},"=",[61,140,141],{"class":134},"\"",[61,143,144],{"class":71},"head",[61,146,141],{"class":134},[61,148,149],{"class":127},">\n",[61,151,153,156,159],{"class":63,"line":152},2,[61,154,155],{"class":127},"  \u003C",[61,157,158],{"class":67},"style",[61,160,149],{"class":127},[61,162,164,168],{"class":63,"line":163},3,[61,165,167],{"class":166},"sO3Gh","    @font-face",[61,169,171],{"class":170},"shy1k"," {\n",[61,173,175,179,182,185,188,190],{"class":63,"line":174},4,[61,176,178],{"class":177},"sO1gY","      font-family",[61,180,181],{"class":166},": ",[61,183,184],{"class":134},"'",[61,186,187],{"class":71},"Barosan",[61,189,184],{"class":134},[61,191,192],{"class":166},";\n",[61,194,196,199,201,205],{"class":63,"line":195},5,[61,197,198],{"class":177},"      font-style",[61,200,181],{"class":166},[61,202,204],{"class":203},"snKqK","normal",[61,206,192],{"class":166},[61,208,210,213,215,218],{"class":63,"line":209},6,[61,211,212],{"class":177},"      font-weight",[61,214,181],{"class":166},[61,216,217],{"class":71},"400",[61,219,192],{"class":166},[61,221,223,226,228,231,234,236,239,241,244,247,250,252,254,257,259,261,263,266,268,272,274,277,279,281,284,286,288],{"class":63,"line":222},7,[61,224,225],{"class":177},"      src",[61,227,181],{"class":166},[61,229,230],{"class":203},"local",[61,232,233],{"class":170},"(",[61,235,184],{"class":134},[61,237,238],{"class":71},"Barosan Regular",[61,240,184],{"class":134},[61,242,243],{"class":170},")",[61,245,246],{"class":166},",",[61,248,249],{"class":203}," local",[61,251,233],{"class":170},[61,253,184],{"class":134},[61,255,256],{"class":71},"Barosan-Regular",[61,258,184],{"class":134},[61,260,243],{"class":170},[61,262,246],{"class":166},[61,264,265],{"class":203}," url",[61,267,233],{"class":170},[61,269,271],{"class":270},"srhaB","https://example.com/fonts/barosan.woff2",[61,273,243],{"class":170},[61,275,276],{"class":203}," format",[61,278,233],{"class":170},[61,280,184],{"class":134},[61,282,283],{"class":71},"woff2",[61,285,184],{"class":134},[61,287,243],{"class":170},[61,289,192],{"class":166},[61,291,293],{"class":63,"line":292},8,[61,294,295],{"class":170},"    }\n",[61,297,299,302,304],{"class":63,"line":298},9,[61,300,301],{"class":127},"  \u003C/",[61,303,158],{"class":67},[61,305,149],{"class":127},[61,307,309,312,314],{"class":63,"line":308},10,[61,310,311],{"class":127},"\u003C/",[61,313,131],{"class":67},[61,315,149],{"class":127},[14,317,318,319,322],{},"This adds a separate ",[32,320,321],{},"\u003Cstyle>"," tag in the compiled email HTML, right after the main one.",[101,324,326],{"id":325},"add-in-layout","Add in Layout",[14,328,329,330,332,333,336,337,115],{},"If you prefer a single ",[32,331,321],{}," tag in your email template, you can register the font in the Layout instead. Open ",[32,334,335],{},"layouts/main.html"," and update the ",[32,338,321],{},[52,340,346],{"className":341,"code":342,"filename":335,"highlights":343,"language":344,"meta":345,"style":57},"language-css shiki shiki-themes tailwind-css tailwind-css has-diff","   \u003Cstyle>\n     @font-face { /* [!code ++] */\n       font-family: 'Barosan'; /* [!code ++] */\n       font-style: normal; /* [!code ++] */\n       font-weight: 400; /* [!code ++] */\n       src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2'); /* [!code ++] */\n     } /* [!code ++] */\n\n     @tailwind components;\n     @tailwind utilities;\n   \u003C/style>\n",[152,163,174,195,209,222],"css","no-copy",[32,347,348,358,370,387,399,411,469,475,481,491,500],{"__ignoreMap":57},[61,349,350,353,355],{"class":63,"line":64},[61,351,352],{"class":71},"   \u003C",[61,354,158],{"class":67},[61,356,149],{"class":357},"sbQc2",[61,359,364,367],{"class":360,"line":152},[63,361,362,363],"highlight","diff","add",[61,365,366],{"class":166},"     @font-face",[61,368,369],{"class":170}," {",[61,371,373,376,378,380,382,384],{"class":372,"line":163},[63,361,362,363],[61,374,375],{"class":177},"       font-family",[61,377,181],{"class":166},[61,379,184],{"class":71},[61,381,187],{"class":177},[61,383,184],{"class":71},[61,385,386],{"class":166},"; ",[61,388,390,393,395,397],{"class":389,"line":174},[63,361,362,363],[61,391,392],{"class":177},"       font-style",[61,394,181],{"class":166},[61,396,204],{"class":203},[61,398,386],{"class":166},[61,400,402,405,407,409],{"class":401,"line":195},[63,361,362,363],[61,403,404],{"class":177},"       font-weight",[61,406,181],{"class":166},[61,408,217],{"class":71},[61,410,386],{"class":166},[61,412,414,417,419,421,423,425,427,429,431,433,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467],{"class":413,"line":209},[63,361,362,363],[61,415,416],{"class":177},"       src",[61,418,181],{"class":166},[61,420,230],{"class":203},[61,422,233],{"class":170},[61,424,184],{"class":71},[61,426,238],{"class":177},[61,428,184],{"class":71},[61,430,243],{"class":170},[61,432,246],{"class":166},[61,434,249],{"class":203},[61,436,233],{"class":170},[61,438,184],{"class":71},[61,440,256],{"class":177},[61,442,184],{"class":71},[61,444,243],{"class":170},[61,446,246],{"class":166},[61,448,265],{"class":203},[61,450,233],{"class":170},[61,452,271],{"class":270},[61,454,243],{"class":170},[61,456,276],{"class":203},[61,458,233],{"class":170},[61,460,184],{"class":71},[61,462,283],{"class":177},[61,464,184],{"class":71},[61,466,243],{"class":170},[61,468,386],{"class":166},[61,470,472],{"class":471,"line":222},[63,361,362,363],[61,473,474],{"class":170},"     }",[61,476,477],{"class":63,"line":292},[61,478,480],{"emptyLinePlaceholder":479},true,"\n",[61,482,483,486,489],{"class":63,"line":298},[61,484,485],{"class":166},"     @tailwind",[61,487,488],{"class":71}," components",[61,490,192],{"class":166},[61,492,493,495,498],{"class":63,"line":308},[61,494,485],{"class":166},[61,496,497],{"class":71}," utilities",[61,499,192],{"class":166},[61,501,503,506,508],{"class":63,"line":502},11,[61,504,505],{"class":71},"   \u003C/",[61,507,158],{"class":67},[61,509,149],{"class":357},[511,512,513],"alert",{},"\nYou can use the same technique to load font files from Google Fonts - it's currently the only way to get them working in Shopify notifications. To find out the URL of a Google Font (and actually, its entire `@font-face` CSS) simply access the URL they give you, in a new browser tab.\n",[44,515,517],{"id":516},"tailwind-css-utility","Tailwind CSS utility",[14,519,520],{},"Now that we're importing the font, we should register a Tailwind CSS utility for it.",[14,522,107,523,526,527,530],{},[32,524,525],{},"tailwind.config.js",", scroll down to ",[32,528,529],{},"fontFamily",", and add a new font:",[52,532,537],{"className":533,"code":534,"filename":525,"highlights":535,"language":536,"meta":57,"style":57},"language-js shiki shiki-themes tailwind-css tailwind-css has-diff","export default {\n  theme: {\n    extend: {\n      fontFamily: {\n        barosan: ['Barosan', '-apple-system', '\"Segoe UI\"', 'sans-serif'], /* [!code ++] */\n      }\n    },\n  },\n}\n",[195],"js",[32,538,539,550,560,569,578,612,617,622,627],{"__ignoreMap":57},[61,540,541,544,547],{"class":63,"line":64},[61,542,543],{"class":67},"export",[61,545,546],{"class":67}," default",[61,548,171],{"class":549},"sprQ5",[61,551,552,555,558],{"class":63,"line":152},[61,553,554],{"class":71},"  theme",[61,556,557],{"class":549},":",[61,559,171],{"class":549},[61,561,562,565,567],{"class":63,"line":163},[61,563,564],{"class":71},"    extend",[61,566,557],{"class":549},[61,568,171],{"class":549},[61,570,571,574,576],{"class":63,"line":174},[61,572,573],{"class":71},"      fontFamily",[61,575,557],{"class":549},[61,577,171],{"class":549},[61,579,581,584,586,589,592,594,597,599,602,604,607,610],{"class":580,"line":195},[63,361,362,363],[61,582,583],{"class":71},"        barosan",[61,585,557],{"class":549},[61,587,588],{"class":71}," [",[61,590,591],{"class":71},"'Barosan'",[61,593,246],{"class":549},[61,595,596],{"class":71}," '-apple-system'",[61,598,246],{"class":549},[61,600,601],{"class":71}," '\"Segoe UI\"'",[61,603,246],{"class":549},[61,605,606],{"class":71}," 'sans-serif'",[61,608,609],{"class":71},"]",[61,611,246],{"class":549},[61,613,614],{"class":63,"line":209},[61,615,616],{"class":549},"      }\n",[61,618,619],{"class":63,"line":222},[61,620,621],{"class":549},"    },\n",[61,623,624],{"class":63,"line":292},[61,625,626],{"class":549},"  },\n",[61,628,629],{"class":63,"line":298},[61,630,631],{"class":549},"}\n",[14,633,634,635,638],{},"Of course, you can change the other fonts in the stack. For example, display fonts often fallback to ",[32,636,637],{},"cursive",".",[14,640,641],{},"Great! We're now ready to use the utility class in our email template.",[44,643,645],{"id":644},"quick-use","Quick use",[14,647,648,649,652],{},"Add the ",[32,650,651],{},"font-barosan"," class on elements that you want to use your custom font.",[14,654,655],{},"For example, you can add it on a heading:",[52,657,659],{"className":118,"code":658,"language":120,"meta":57,"style":57},"\u003Ch2 class=\"font-barosan\">An article title\u003C/h2>\n",[32,660,661],{"__ignoreMap":57},[61,662,663,665,667,670,672,674,676,678,681,684,686,688],{"class":63,"line":64},[61,664,128],{"class":127},[61,666,44],{"class":67},[61,668,669],{"class":134}," class",[61,671,138],{"class":127},[61,673,141],{"class":134},[61,675,651],{"class":71},[61,677,141],{"class":134},[61,679,680],{"class":127},">",[61,682,683],{"class":71},"An article title",[61,685,311],{"class":127},[61,687,44],{"class":67},[61,689,149],{"class":127},[14,691,692,693,697],{},"With ",[23,694,696],{"href":695},"/docs/transformers/inline-css","CSS inlining"," enabled, that would result in:",[52,699,701],{"className":118,"code":700,"language":120,"meta":57,"style":57},"\u003Ch2 style=\"font-family: Barosan, -apple-system, 'Segoe UI', sans-serif;\">An article title\u003C/h2>\n",[32,702,703],{"__ignoreMap":57},[61,704,705,707,709,712,714,716,719,721,723,725,727,729],{"class":63,"line":64},[61,706,128],{"class":127},[61,708,44],{"class":67},[61,710,711],{"class":134}," style",[61,713,138],{"class":127},[61,715,141],{"class":134},[61,717,718],{"class":71},"font-family: Barosan, -apple-system, 'Segoe UI', sans-serif;",[61,720,141],{"class":134},[61,722,680],{"class":127},[61,724,683],{"class":71},[61,726,311],{"class":127},[61,728,44],{"class":67},[61,730,149],{"class":127},[44,732,734],{"id":733},"advanced-use","Advanced use",[14,736,737,738,740,741,638],{},"Repeatedly writing that ",[32,739,651],{}," class on all elements isn't just impractical, it also increases HTML file size (especially when inlining), which then leads to ",[23,742,746],{"href":743,"rel":744},"https://github.com/hteumeuleu/email-bugs/issues/41",[745],"nofollow","Gmail clipping",[14,748,749,752],{},[32,750,751],{},"font-family"," is inherited, which means you can just add the utility to the top element:",[52,754,756],{"className":118,"code":755,"filename":110,"language":120,"meta":57,"style":57},"\u003Cx-main>\n  \u003Ctable class=\"font-barosan\">\n    \u003C!-- your email HTML... -->\n  \u003C/table>\n\u003C/x-main>\n",[32,757,758,767,786,792,800],{"__ignoreMap":57},[61,759,760,762,765],{"class":63,"line":64},[61,761,128],{"class":127},[61,763,764],{"class":67},"x-main",[61,766,149],{"class":127},[61,768,769,771,774,776,778,780,782,784],{"class":63,"line":152},[61,770,155],{"class":127},[61,772,773],{"class":67},"table",[61,775,669],{"class":134},[61,777,138],{"class":127},[61,779,141],{"class":134},[61,781,651],{"class":71},[61,783,141],{"class":134},[61,785,149],{"class":127},[61,787,788],{"class":63,"line":163},[61,789,791],{"class":790},"smVoC","    \u003C!-- your email HTML... -->\n",[61,793,794,796,798],{"class":63,"line":174},[61,795,301],{"class":127},[61,797,773],{"class":67},[61,799,149],{"class":127},[61,801,802,804,806],{"class":63,"line":195},[61,803,311],{"class":127},[61,805,764],{"class":67},[61,807,149],{"class":127},[14,809,810,811,638],{},"However, that could trigger ",[23,812,815],{"href":813,"rel":814},"https://www.caniemail.com/search/?s=font#font-face-cite-note-5",[745],"Outlook's Times New Roman bug",[14,817,818,819,822,823,825],{},"We can work around that by making use of Tailwind's ",[32,820,821],{},"screen"," variants and an Outlook ",[32,824,751],{}," fallback to reduce bloat and write less code 👌",[14,827,828,829,832,833,557],{},"First, let's register a new ",[32,830,831],{},"@media"," query - we will call it ",[32,834,821],{},[52,836,839],{"className":533,"code":837,"filename":525,"highlights":838,"language":536,"meta":57,"style":57},"export default {\n  theme: {\n    screens: {\n      sm: {max: '600px'},\n      xs: {max: '425px'},\n      screen: {raw: 'screen'}, // [!code ++]\n    }\n  }\n}\n",[209],[32,840,841,849,857,866,886,904,925,929,934],{"__ignoreMap":57},[61,842,843,845,847],{"class":63,"line":64},[61,844,543],{"class":67},[61,846,546],{"class":67},[61,848,171],{"class":549},[61,850,851,853,855],{"class":63,"line":152},[61,852,554],{"class":71},[61,854,557],{"class":549},[61,856,171],{"class":549},[61,858,859,862,864],{"class":63,"line":163},[61,860,861],{"class":71},"    screens",[61,863,557],{"class":549},[61,865,171],{"class":549},[61,867,868,871,873,875,878,880,883],{"class":63,"line":174},[61,869,870],{"class":71},"      sm",[61,872,557],{"class":549},[61,874,369],{"class":549},[61,876,877],{"class":71},"max",[61,879,557],{"class":549},[61,881,882],{"class":71}," '600px'",[61,884,885],{"class":549},"},\n",[61,887,888,891,893,895,897,899,902],{"class":63,"line":195},[61,889,890],{"class":71},"      xs",[61,892,557],{"class":549},[61,894,369],{"class":549},[61,896,877],{"class":71},[61,898,557],{"class":549},[61,900,901],{"class":71}," '425px'",[61,903,885],{"class":549},[61,905,907,910,912,914,917,919,922],{"class":906,"line":209},[63,361,362,363],[61,908,909],{"class":71},"      screen",[61,911,557],{"class":549},[61,913,369],{"class":549},[61,915,916],{"class":71},"raw",[61,918,557],{"class":549},[61,920,921],{"class":71}," 'screen'",[61,923,924],{"class":549},"},",[61,926,927],{"class":63,"line":222},[61,928,295],{"class":549},[61,930,931],{"class":63,"line":292},[61,932,933],{"class":549},"  }\n",[61,935,936],{"class":63,"line":298},[61,937,631],{"class":549},[14,939,940,941,945],{},"We can now use it on the outermost",[942,943,944],"sup",{},"1"," element:",[52,947,949],{"className":118,"code":948,"filename":110,"language":120,"meta":57,"style":57},"\u003Cx-main>\n  \u003Ctable class=\"screen:font-barosan\">\n    \u003C!-- your email HTML... -->\n  \u003C/table>\n\u003C/x-main>\n",[32,950,951,959,978,982,990],{"__ignoreMap":57},[61,952,953,955,957],{"class":63,"line":64},[61,954,128],{"class":127},[61,956,764],{"class":67},[61,958,149],{"class":127},[61,960,961,963,965,967,969,971,974,976],{"class":63,"line":152},[61,962,155],{"class":127},[61,964,773],{"class":67},[61,966,669],{"class":134},[61,968,138],{"class":127},[61,970,141],{"class":134},[61,972,973],{"class":71},"screen:font-barosan",[61,975,141],{"class":134},[61,977,149],{"class":127},[61,979,980],{"class":63,"line":163},[61,981,791],{"class":790},[61,983,984,986,988],{"class":63,"line":174},[61,985,301],{"class":127},[61,987,773],{"class":67},[61,989,149],{"class":127},[61,991,992,994,996],{"class":63,"line":195},[61,993,311],{"class":127},[61,995,764],{"class":67},[61,997,149],{"class":127},[511,999,1000,1003,1004,1007],{},[942,1001,1002],{},"\n1\n","\n Don't add it to the \n",[32,1005,1006],{},"\u003Cbody>","\n - some email clients remove or replace this tag.\n",[14,1009,1010,1011,1013,1014,1016],{},"This will tuck the ",[32,1012,751],{}," away in an ",[32,1015,831],{}," query:",[52,1018,1021],{"className":1019,"code":1020,"language":344,"meta":57,"style":57},"language-css shiki shiki-themes tailwind-css tailwind-css","/* Compiled CSS. Maizzle replaces escaped \\: with - */\n@media screen {\n  .screen-font-barosan {\n    font-family: Barosan, -apple-system, \"Segoe UI\", sans-serif !important;\n  }\n}\n",[32,1022,1023,1028,1037,1044,1078,1082],{"__ignoreMap":57},[61,1024,1025],{"class":63,"line":64},[61,1026,1027],{"class":790},"/* Compiled CSS. Maizzle replaces escaped \\: with - */\n",[61,1029,1030,1032,1035],{"class":63,"line":152},[61,1031,831],{"class":166},[61,1033,1034],{"class":203}," screen",[61,1036,171],{"class":170},[61,1038,1039,1042],{"class":63,"line":163},[61,1040,1041],{"class":67},"  .screen-font-barosan",[61,1043,171],{"class":170},[61,1045,1046,1049,1051,1053,1055,1058,1060,1063,1066,1068,1070,1073,1076],{"class":63,"line":174},[61,1047,1048],{"class":177},"    font-family",[61,1050,181],{"class":166},[61,1052,187],{"class":270},[61,1054,246],{"class":166},[61,1056,1057],{"class":203}," -apple-system",[61,1059,246],{"class":166},[61,1061,1062],{"class":71}," \"",[61,1064,1065],{"class":177},"Segoe UI",[61,1067,141],{"class":71},[61,1069,246],{"class":166},[61,1071,1072],{"class":203}," sans-serif",[61,1074,1075],{"class":67}," !important",[61,1077,192],{"class":166},[61,1079,1080],{"class":63,"line":195},[61,1081,933],{"class":170},[61,1083,1084],{"class":63,"line":209},[61,1085,631],{"class":170},[14,1087,1088,1089,1091,1092,1095,1096,1099],{},"Since Outlook on Windows doesn't read ",[32,1090,831],{}," queries, define a fallback",[942,1093,1094],{},"2"," for it in the ",[32,1097,1098],{},"\u003Chead>"," of your Layout:",[52,1101,1103],{"className":118,"code":1102,"filename":335,"language":120,"meta":57,"style":57},"\u003C!--[if mso]>\n\u003Cstyle>\n  td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif;}\n\u003C/style>\n\u003C![endif]-->\n",[32,1104,1105,1110,1115,1120,1125],{"__ignoreMap":57},[61,1106,1107],{"class":63,"line":64},[61,1108,1109],{"class":790},"\u003C!--[if mso]>\n",[61,1111,1112],{"class":63,"line":152},[61,1113,1114],{"class":790},"\u003Cstyle>\n",[61,1116,1117],{"class":63,"line":163},[61,1118,1119],{"class":790},"  td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: \"Segoe UI\", sans-serif;}\n",[61,1121,1122],{"class":63,"line":174},[61,1123,1124],{"class":790},"\u003C/style>\n",[61,1126,1127],{"class":63,"line":195},[61,1128,1129],{"class":790},"\u003C![endif]-->\n",[511,1131,1132,1135,1136,1139],{},[942,1133,1134],{},"\n2\n","\n The Maizzle Starter includes this fallback in the \n",[32,1137,1138],{},"main.html","\n Layout by default.\n",[44,1141,1143],{"id":1142},"outlook-bugs","Outlook bugs",[14,1145,1146],{},"Custom fonts aren't supported in Outlook 2007-2019 on Windows - most of these email clients will fallback to Times New Roman if you try to use one.",[14,1148,1149,1150,1152,1153,1155],{},"To avoid this, you can wrap the ",[32,1151,98],{}," declaration in a ",[32,1154,831],{}," query, so that Outlook will ignore it:",[52,1157,1159],{"className":1019,"code":1158,"language":344,"meta":57,"style":57},"@media screen {\n  @font-face {\n    font-family: 'Barosan';\n    font-style: normal;\n    font-weight: 400;\n    src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n  }\n}\n",[32,1160,1161,1169,1176,1190,1201,1212,1269,1273],{"__ignoreMap":57},[61,1162,1163,1165,1167],{"class":63,"line":64},[61,1164,831],{"class":166},[61,1166,1034],{"class":203},[61,1168,171],{"class":170},[61,1170,1171,1174],{"class":63,"line":152},[61,1172,1173],{"class":166},"  @font-face",[61,1175,171],{"class":170},[61,1177,1178,1180,1182,1184,1186,1188],{"class":63,"line":163},[61,1179,1048],{"class":177},[61,1181,181],{"class":166},[61,1183,184],{"class":71},[61,1185,187],{"class":177},[61,1187,184],{"class":71},[61,1189,192],{"class":166},[61,1191,1192,1195,1197,1199],{"class":63,"line":174},[61,1193,1194],{"class":177},"    font-style",[61,1196,181],{"class":166},[61,1198,204],{"class":203},[61,1200,192],{"class":166},[61,1202,1203,1206,1208,1210],{"class":63,"line":195},[61,1204,1205],{"class":177},"    font-weight",[61,1207,181],{"class":166},[61,1209,217],{"class":71},[61,1211,192],{"class":166},[61,1213,1214,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1267],{"class":63,"line":209},[61,1215,1216],{"class":177},"    src",[61,1218,181],{"class":166},[61,1220,230],{"class":203},[61,1222,233],{"class":170},[61,1224,184],{"class":71},[61,1226,238],{"class":177},[61,1228,184],{"class":71},[61,1230,243],{"class":170},[61,1232,246],{"class":166},[61,1234,249],{"class":203},[61,1236,233],{"class":170},[61,1238,184],{"class":71},[61,1240,256],{"class":177},[61,1242,184],{"class":71},[61,1244,243],{"class":170},[61,1246,246],{"class":166},[61,1248,265],{"class":203},[61,1250,233],{"class":170},[61,1252,271],{"class":270},[61,1254,243],{"class":170},[61,1256,276],{"class":203},[61,1258,233],{"class":170},[61,1260,184],{"class":71},[61,1262,283],{"class":177},[61,1264,184],{"class":71},[61,1266,243],{"class":170},[61,1268,192],{"class":166},[61,1270,1271],{"class":63,"line":222},[61,1272,933],{"class":170},[61,1274,1275],{"class":63,"line":292},[61,1276,631],{"class":170},[14,1278,1279,1280,1282],{},"Also, note that ",[32,1281,751],{}," isn't inherited on child elements in Outlook.",[44,1284,1286],{"id":1285},"extra-weights","Extra weights",[14,1288,1289,1290,1293],{},"If your font comes with dedicated files for other weights, don't just slap ",[32,1291,1292],{},"font-bold"," on an element.",[14,1295,1296],{},"Instead, import both the regular and bold versions of your font:",[52,1298,1300],{"className":1019,"code":1299,"language":344,"meta":57,"style":57},"@font-face {\n  font-family: 'Barosan';\n  font-style: normal;\n  font-weight: 400;\n  src: local('Barosan Regular'), local('Barosan-Regular'), url(https://example.com/fonts/barosan.woff2) format('woff2');\n}\n\n@font-face {\n  font-family: 'Barosan';\n  font-style: normal;\n  font-weight: 700;\n  src: local('Barosan Bold'), local('Barosan-Bold'), url(https://example.com/fonts/barosan-bold.woff2) format('woff2');\n}\n",[32,1301,1302,1308,1323,1334,1345,1402,1406,1410,1416,1430,1440,1451,1511],{"__ignoreMap":57},[61,1303,1304,1306],{"class":63,"line":64},[61,1305,98],{"class":166},[61,1307,171],{"class":170},[61,1309,1310,1313,1315,1317,1319,1321],{"class":63,"line":152},[61,1311,1312],{"class":177},"  font-family",[61,1314,181],{"class":166},[61,1316,184],{"class":71},[61,1318,187],{"class":177},[61,1320,184],{"class":71},[61,1322,192],{"class":166},[61,1324,1325,1328,1330,1332],{"class":63,"line":163},[61,1326,1327],{"class":177},"  font-style",[61,1329,181],{"class":166},[61,1331,204],{"class":203},[61,1333,192],{"class":166},[61,1335,1336,1339,1341,1343],{"class":63,"line":174},[61,1337,1338],{"class":177},"  font-weight",[61,1340,181],{"class":166},[61,1342,217],{"class":71},[61,1344,192],{"class":166},[61,1346,1347,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400],{"class":63,"line":195},[61,1348,1349],{"class":177},"  src",[61,1351,181],{"class":166},[61,1353,230],{"class":203},[61,1355,233],{"class":170},[61,1357,184],{"class":71},[61,1359,238],{"class":177},[61,1361,184],{"class":71},[61,1363,243],{"class":170},[61,1365,246],{"class":166},[61,1367,249],{"class":203},[61,1369,233],{"class":170},[61,1371,184],{"class":71},[61,1373,256],{"class":177},[61,1375,184],{"class":71},[61,1377,243],{"class":170},[61,1379,246],{"class":166},[61,1381,265],{"class":203},[61,1383,233],{"class":170},[61,1385,271],{"class":270},[61,1387,243],{"class":170},[61,1389,276],{"class":203},[61,1391,233],{"class":170},[61,1393,184],{"class":71},[61,1395,283],{"class":177},[61,1397,184],{"class":71},[61,1399,243],{"class":170},[61,1401,192],{"class":166},[61,1403,1404],{"class":63,"line":209},[61,1405,631],{"class":170},[61,1407,1408],{"class":63,"line":222},[61,1409,480],{"emptyLinePlaceholder":479},[61,1411,1412,1414],{"class":63,"line":292},[61,1413,98],{"class":166},[61,1415,171],{"class":170},[61,1417,1418,1420,1422,1424,1426,1428],{"class":63,"line":298},[61,1419,1312],{"class":177},[61,1421,181],{"class":166},[61,1423,184],{"class":71},[61,1425,187],{"class":177},[61,1427,184],{"class":71},[61,1429,192],{"class":166},[61,1431,1432,1434,1436,1438],{"class":63,"line":308},[61,1433,1327],{"class":177},[61,1435,181],{"class":166},[61,1437,204],{"class":203},[61,1439,192],{"class":166},[61,1441,1442,1444,1446,1449],{"class":63,"line":502},[61,1443,1338],{"class":177},[61,1445,181],{"class":166},[61,1447,1448],{"class":71},"700",[61,1450,192],{"class":166},[61,1452,1454,1456,1458,1460,1462,1464,1467,1469,1471,1473,1475,1477,1479,1482,1484,1486,1488,1490,1492,1495,1497,1499,1501,1503,1505,1507,1509],{"class":63,"line":1453},12,[61,1455,1349],{"class":177},[61,1457,181],{"class":166},[61,1459,230],{"class":203},[61,1461,233],{"class":170},[61,1463,184],{"class":71},[61,1465,1466],{"class":177},"Barosan Bold",[61,1468,184],{"class":71},[61,1470,243],{"class":170},[61,1472,246],{"class":166},[61,1474,249],{"class":203},[61,1476,233],{"class":170},[61,1478,184],{"class":71},[61,1480,1481],{"class":177},"Barosan-Bold",[61,1483,184],{"class":71},[61,1485,243],{"class":170},[61,1487,246],{"class":166},[61,1489,265],{"class":203},[61,1491,233],{"class":170},[61,1493,1494],{"class":270},"https://example.com/fonts/barosan-bold.woff2",[61,1496,243],{"class":170},[61,1498,276],{"class":203},[61,1500,233],{"class":170},[61,1502,184],{"class":71},[61,1504,283],{"class":177},[61,1506,184],{"class":71},[61,1508,243],{"class":170},[61,1510,192],{"class":166},[61,1512,1514],{"class":63,"line":1513},13,[61,1515,631],{"class":170},[44,1517,1519],{"id":1518},"resources","Resources",[1521,1522,1523,1532],"ul",{},[1524,1525,1526,1531],"li",{},[23,1527,1530],{"href":1528,"rel":1529},"https://litmus.com/blog/the-ultimate-guide-to-web-fonts",[745],"The Ultimate Guide to Web Fonts"," on Litmus",[1524,1533,1534],{},[23,1535,1538],{"href":1536,"rel":1537},"https://www.caniemail.com/features/css-at-font-face/",[745],"@font-face support in email",[158,1540,1541],{},"html pre.shiki code .sizJ4, html code.shiki .sizJ4{--shiki-light:#EC4899;--shiki-dark:#EC4899}html pre.shiki code .sfCc6, html code.shiki .sfCc6{--shiki-light:#1D4ED8;--shiki-dark:#1D4ED8}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 .soJEP, html code.shiki .soJEP{--shiki-light:#CBD5E1;--shiki-dark:#CBD5E1}html pre.shiki code .sQMLp, html code.shiki .sQMLp{--shiki-light:#0EA5E9;--shiki-dark:#0EA5E9}html pre.shiki code .sO3Gh, html code.shiki .sO3Gh{--shiki-light:#6366F1;--shiki-dark:#6366F1}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}html pre.shiki code .sbQc2, html code.shiki .sbQc2{--shiki-light:#64748B;--shiki-dark:#64748B}html pre.shiki code .sprQ5, html code.shiki .sprQ5{--shiki-light:#44403C;--shiki-dark:#44403C}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}",{"title":57,"searchDepth":152,"depth":152,"links":1543},[1544,1545,1549,1550,1551,1552,1553,1554],{"id":46,"depth":152,"text":47},{"id":88,"depth":152,"text":89,"children":1546},[1547,1548],{"id":103,"depth":163,"text":104},{"id":325,"depth":163,"text":326},{"id":516,"depth":152,"text":517},{"id":644,"depth":152,"text":645},{"id":733,"depth":152,"text":734},{"id":1142,"depth":152,"text":1143},{"id":1285,"depth":152,"text":1286},{"id":1518,"depth":152,"text":1519},"2020-01-31T00:00:00.000Z","Learn how to include custom web fonts in your email templates and use them efficiently through Tailwind CSS utilities.","md",{},"/guides/custom-fonts",{"title":5,"description":1556},{"loc":1559},"guides/custom-fonts","0273ukA0_vcOFyqCMFYlqpg9TKCeI1-mcjPLSnrWnLE",[1565,1569],{"title":1566,"path":1567,"stem":1568,"children":-1},"How to add PrismJS syntax highlighting to HTML emails","/guides/syntax-highlighting-prismjs","guides/syntax-highlighting-prismjs",null,1780318597172]