[{"data":1,"prerenderedAt":462},["ShallowReactive",2],{"navigation":3,"-docs-integrations-elementor":136,"-docs-integrations-elementor-surround":446,"mdc--9jjek3-key":451},[4],{"title":5,"titleTemplate":6,"icon":7,"path":8,"stem":9,"children":10,"page":29},"Docs","%s · Yabe Webfont","lucide:book-marked","\u002Fdocs","docs",[11,30,52,119],{"title":12,"titleTemplate":13,"icon":14,"path":15,"stem":16,"children":17,"page":29},"Getting Started","%s · Getting Started with Yabe Webfont","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[18,24],{"title":19,"path":20,"stem":21,"titleTemplate":22,"icon":23},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,"i-lucide-info",{"title":25,"path":26,"stem":27,"titleTemplate":22,"icon":28},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",false,{"title":31,"titleTemplate":32,"icon":33,"path":34,"stem":35,"children":36,"page":29},"Fonts","%s · Fonts · Yabe Webfont","i-lucide-type","\u002Fdocs\u002Ffonts","docs\u002F2.fonts",[37,42,47],{"title":38,"path":39,"stem":40,"titleTemplate":22,"icon":41},"Adding Custom Font","\u002Fdocs\u002Ffonts\u002Fcustom-font","docs\u002F2.fonts\u002F1.custom-font","i-lucide-file-up",{"title":43,"path":44,"stem":45,"titleTemplate":22,"icon":46},"Self-hosting Google Fonts","\u002Fdocs\u002Ffonts\u002Fgoogle-fonts","docs\u002F2.fonts\u002F2.google-fonts","simple-icons:googlefonts",{"title":48,"path":49,"stem":50,"titleTemplate":22,"icon":51},"Embedding Adobe Fonts","\u002Fdocs\u002Ffonts\u002Fadobe-fonts","docs\u002F2.fonts\u002F3.adobe-fonts","simple-icons:adobefonts",{"title":53,"titleTemplate":54,"icon":55,"path":56,"stem":57,"children":58,"page":29},"Integrations","%s · Integrations · Yabe Webfont","i-lucide-puzzle","\u002Fdocs\u002Fintegrations","docs\u002F3.integrations",[59,64,69,74,79,84,89,94,99,104,109,114],{"title":60,"path":61,"stem":62,"titleTemplate":22,"icon":63},"Elementor","\u002Fdocs\u002Fintegrations\u002Felementor","docs\u002F3.integrations\u002F1.elementor","i-custom-builder-elementor",{"title":65,"path":66,"stem":67,"titleTemplate":22,"icon":68},"Classic Editor","\u002Fdocs\u002Fintegrations\u002Fclassic-editor","docs\u002F3.integrations\u002F10.classic-editor","i-lucide-pen-line",{"title":70,"path":71,"stem":72,"titleTemplate":22,"icon":73},"Zion Builder","\u002Fdocs\u002Fintegrations\u002Fzion-builder","docs\u002F3.integrations\u002F11.zion-builder","i-custom-builder-zion",{"title":75,"path":76,"stem":77,"titleTemplate":22,"icon":78},"Theme \u002F Plugin Developers","\u002Fdocs\u002Fintegrations\u002Fdeveloper","docs\u002F3.integrations\u002F12.developer","i-lucide-code-xml",{"title":80,"path":81,"stem":82,"titleTemplate":22,"icon":83},"Bricks","\u002Fdocs\u002Fintegrations\u002Fbricks","docs\u002F3.integrations\u002F2.bricks","i-custom-builder-bricks",{"title":85,"path":86,"stem":87,"titleTemplate":22,"icon":88},"Oxygen","\u002Fdocs\u002Fintegrations\u002Foxygen","docs\u002F3.integrations\u002F3.oxygen","i-custom-builder-oxygen",{"title":90,"path":91,"stem":92,"titleTemplate":22,"icon":93},"Gutenberg","\u002Fdocs\u002Fintegrations\u002Fgutenberg","docs\u002F3.integrations\u002F4.gutenberg","i-custom-builder-gutenberg",{"title":95,"path":96,"stem":97,"titleTemplate":22,"icon":98},"Breakdance","\u002Fdocs\u002Fintegrations\u002Fbreakdance","docs\u002F3.integrations\u002F5.breakdance","i-custom-builder-breakdance",{"title":100,"path":101,"stem":102,"titleTemplate":22,"icon":103},"Beaver Builder","\u002Fdocs\u002Fintegrations\u002Fbeaver-builder","docs\u002F3.integrations\u002F6.beaver-builder","i-custom-builder-beaver",{"title":105,"path":106,"stem":107,"titleTemplate":22,"icon":108},"Builderius","\u002Fdocs\u002Fintegrations\u002Fbuilderius","docs\u002F3.integrations\u002F7.builderius","i-custom-builder-builderius",{"title":110,"path":111,"stem":112,"titleTemplate":22,"icon":113},"Cwicly","\u002Fdocs\u002Fintegrations\u002Fcwicly","docs\u002F3.integrations\u002F8.cwicly","i-custom-builder-blockstudio",{"title":115,"path":116,"stem":117,"titleTemplate":22,"icon":118},"GeneratePress & GenerateBlocks","\u002Fdocs\u002Fintegrations\u002Fgeneratepress","docs\u002F3.integrations\u002F9.generatepress","i-custom-builder-generatepress",{"title":120,"titleTemplate":121,"icon":122,"path":123,"stem":124,"children":125,"page":29},"Misc","%s · Misc · Yabe Webfont","i-lucide-wrench","\u002Fdocs\u002Fmisc","docs\u002F4.misc",[126,131],{"title":127,"path":128,"stem":129,"titleTemplate":22,"icon":130},"Convert variable font TTF to WOFF2","\u002Fdocs\u002Fmisc\u002Fconvert-ttf-woff2","docs\u002F4.misc\u002F1.convert-ttf-woff2","i-lucide-file-down",{"title":132,"path":133,"stem":134,"titleTemplate":22,"icon":135},"Without the Plugin","\u002Fdocs\u002Fmisc\u002Fno-plugin","docs\u002F4.misc\u002F2.no-plugin","i-lucide-unplug",{"id":137,"title":60,"body":138,"description":439,"extension":440,"links":22,"meta":441,"navigation":442,"path":61,"seo":443,"sitemap":444,"stem":62,"titleTemplate":22,"__hash__":445},"docs\u002Fdocs\u002F3.integrations\u002F1.elementor.md",{"type":139,"value":140,"toc":422},"minimark",[141,151,156,171,176,179,186,190,207,213,230,236,240,250,256,260,263,267,278,284,295,301,313,318,322,328,333,337,345,348,356,360,370,376,387,392,395,401,406,410,413],[142,143,144,150],"p",{},[145,146,60],"a",{"href":147,"rel":148},"https:\u002F\u002Fbe.elementor.com\u002Fvisit\u002F?bta=209150&brand=elementor",[149],"nofollow"," is the most popular website building platform for WordPress with over 5 million active installs, enabling web creators to build professional, pixel-perfect websites with an intuitive visual builder.",[152,153,155],"h2",{"id":154},"using-custom-fonts-in-the-elementor","Using custom fonts in the Elementor",[142,157,158,159,162,163,166,167,170],{},"It's easy to use ",[145,160,161],{"href":49},"Adobe Fonts"," or ",[145,164,165],{"href":44},"self-hosting Google Fonts"," in Elementor visual builder. You can use any fonts you have ",[145,168,169],{"href":39},"added"," to Yabe Webfont.",[172,173,175],"h3",{"id":174},"step-1-choose-the-text-element","Step 1: Choose the text element",[142,177,178],{},"Choose the text element by clicking on the canvas or the Structure panel.",[142,180,181],{},[182,183],"img",{"alt":184,"src":185},"Choose the text element in Elementor","\u002Ftutorial\u002Fintegration\u002Felementor\u002F1.png",[172,187,189],{"id":188},"step-2-typography-settings","Step 2: Typography settings",[191,192,193],"ol",{},[194,195,196,197,201,202,206],"li",{},"On the Element's settings panel, click the ",[198,199],"icon",{"name":200},"lucide:contrast"," icon to open the ",[203,204,205],"strong",{},"Style"," tab.",[142,208,209],{},[182,210],{"alt":211,"src":212},"Open the Style tab","\u002Ftutorial\u002Fintegration\u002Felementor\u002F2.png",[191,214,216],{"start":215},2,[194,217,218,219,222,223,226,227,229],{},"Click the ",[198,220],{"name":221},"lucide:type"," icon on the right of ",[203,224,225],{},"Typography"," label to open the ",[203,228,225],{}," panel.",[142,231,232],{},[182,233],{"alt":234,"src":235},"Open the Typography panel","\u002Ftutorial\u002Fintegration\u002Felementor\u002F3.png",[172,237,239],{"id":238},"step-3-choose-the-font","Step 3: Choose the font",[142,241,218,242,245,246,249],{},[203,243,244],{},"Family"," dropdown list, then select the font family from the ",[203,247,248],{},"Yabe Webfont"," group list.",[142,251,252],{},[182,253],{"alt":254,"src":255},"Choose the font family","\u002Ftutorial\u002Fintegration\u002Felementor\u002F4.png",[152,257,259],{"id":258},"using-custom-fonts-in-the-theme-styles","Using custom fonts in the Theme Styles",[142,261,262],{},"You can also use custom fonts in the Theme Styles. Theme Styles is a global style setting that allows you to set the default style for any text elements in the Elementor.",[172,264,266],{"id":265},"step-1-typography-settings","Step 1: Typography settings",[191,268,269],{},[194,270,218,271,274,275,229],{},[198,272],{"name":273},"lucide:sliders-horizontal"," icon on the top left corner of the Elementor visual builder to open the ",[203,276,277],{},"Site Settings",[142,279,280],{},[182,281],{"alt":282,"src":283},"Open the Site Settings panel","\u002Ftutorial\u002Fintegration\u002Felementor\u002F5.png",[191,285,286],{"start":215},[194,287,218,288,290,291,294],{},[203,289,225],{}," menu item under the ",[203,292,293],{},"Theme Style"," section.",[142,296,297],{},[182,298],{"alt":299,"src":300},"Typography menu under Theme Style","\u002Ftutorial\u002Fintegration\u002Felementor\u002F6.png",[191,302,304],{"start":303},3,[194,305,306,307,222,309,226,311,229],{},"Choose the element section and click the ",[198,308],{"name":221},[203,310,225],{},[203,312,225],{},[142,314,315],{},[182,316],{"alt":234,"src":317},"\u002Ftutorial\u002Fintegration\u002Felementor\u002F7.png",[172,319,321],{"id":320},"step-2-choose-the-font","Step 2: Choose the font",[142,323,218,324,245,326,249],{},[203,325,244],{},[203,327,248],{},[142,329,330],{},[182,331],{"alt":254,"src":332},"\u002Ftutorial\u002Fintegration\u002Felementor\u002F8.png",[152,334,336],{"id":335},"using-custom-fonts-in-the-design-system","Using custom fonts in the Design System",[142,338,339,340,344],{},"You can also use custom fonts in the Design System. It has similar steps as using ",[145,341,343],{"href":342},"#using-custom-fonts-in-the-theme-styles","custom fonts in the Theme Style",".",[172,346,266],{"id":347},"step-1-typography-settings-1",[191,349,350],{},[194,351,218,352,274,354,229],{},[198,353],{"name":273},[203,355,277],{},[142,357,358],{},[182,359],{"alt":282,"src":283},[191,361,362],{"start":215},[194,363,218,364,290,367,294],{},[203,365,366],{},"Global Fonts",[203,368,369],{},"Design System",[142,371,372],{},[182,373],{"alt":374,"src":375},"Global Fonts menu under Design System","\u002Ftutorial\u002Fintegration\u002Felementor\u002F9.png",[191,377,378],{"start":303},[194,379,380,381,222,383,226,385,229],{},"Choose the item and click the ",[198,382],{"name":221},[203,384,225],{},[203,386,225],{},[142,388,389],{},[182,390],{"alt":234,"src":391},"\u002Ftutorial\u002Fintegration\u002Felementor\u002F10.png",[172,393,321],{"id":394},"step-2-choose-the-font-1",[142,396,218,397,245,399,249],{},[203,398,244],{},[203,400,248],{},[142,402,403],{},[182,404],{"alt":254,"src":405},"\u002Ftutorial\u002Fintegration\u002Felementor\u002F11.png",[152,407,409],{"id":408},"disable-the-google-fonts-in-elementor","Disable the Google Fonts in Elementor",[142,411,412],{},"Elementor uses the Google Fonts Web API to provide users with the Google Fonts collection. To be GDPR compliant, you must disable the Google Fonts in Elementor.",[142,414,415,416,421],{},"Yabe Webfont forcibly disables the Google Fonts in Elementor by taking reference from the ",[145,417,420],{"href":418,"rel":419},"https:\u002F\u002Fdevelopers.elementor.com\u002Fdocs\u002Fhooks\u002Fprint-google-fonts",[149],"official documentation",", so you don't need to do anything.",{"title":423,"searchDepth":215,"depth":215,"links":424},"",[425,430,434,438],{"id":154,"depth":215,"text":155,"children":426},[427,428,429],{"id":174,"depth":303,"text":175},{"id":188,"depth":303,"text":189},{"id":238,"depth":303,"text":239},{"id":258,"depth":215,"text":259,"children":431},[432,433],{"id":265,"depth":303,"text":266},{"id":320,"depth":303,"text":321},{"id":335,"depth":215,"text":336,"children":435},[436,437],{"id":347,"depth":303,"text":266},{"id":394,"depth":303,"text":321},{"id":408,"depth":215,"text":409},"How to use custom fonts in Elementor.","md",{},{"icon":63},{"title":60,"description":439},{"loc":61},"t_uMsol8BN-ztS92MoPfRDS98-EhoRxnSE2R6RsUg2g",[447,449],{"title":48,"path":49,"stem":50,"description":448,"icon":51,"children":-1},"How to use Adobe Fonts on a WordPress website.",{"title":65,"path":66,"stem":67,"description":450,"icon":68,"children":-1},"How to use custom fonts in the Classic Editor.",{"data":452,"body":453},{},{"type":454,"children":455},"root",[456],{"type":457,"tag":142,"props":458,"children":459},"element",{},[460],{"type":461,"value":439},"text",1782209488467]