[{"data":1,"prerenderedAt":300},["ShallowReactive",2],{"navigation":3,"-docs-integrations-bricks":136,"-docs-integrations-bricks-surround":284,"mdc-bvovq6-key":289},[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":80,"body":138,"description":277,"extension":278,"links":22,"meta":279,"navigation":280,"path":81,"seo":281,"sitemap":282,"stem":82,"titleTemplate":22,"__hash__":283},"docs\u002Fdocs\u002F3.integrations\u002F2.bricks.md",{"type":139,"value":140,"toc":265},"minimark",[141,151,154,159,174,179,182,189,193,206,212,216,223,229,233,243,249,253,256],[142,143,144,150],"p",{},[145,146,80],"a",{"href":147,"rel":148},"https:\u002F\u002Fbricksbuilder.io\u002F",[149],"nofollow"," is a visual site builder for WordPress. Bricks allow you to build a beautiful site with unmatched performance, design, and customizability.",[142,152,153],{},"Yabe Webfont is fully featured and working great with Bricks. The built-in integration gives you the native experience of using custom fonts in Bricks.",[155,156,158],"h2",{"id":157},"using-custom-fonts-in-the-bricks","Using custom fonts in the Bricks",[142,160,161,162,165,166,169,170,173],{},"You can use any ",[145,163,164],{"href":39},"Custom Font",", embedding ",[145,167,168],{"href":49},"Adobe Fonts"," or ",[145,171,172],{"href":44},"self-hosting Google Fonts"," in the Bricks and cross-platform.",[175,176,178],"h3",{"id":177},"step-1-choose-the-text-element","Step 1: Choose the text element",[142,180,181],{},"Choose the text element by clicking on the canvas or the Structure panel.",[142,183,184],{},[185,186],"img",{"alt":187,"src":188},"Choose the text element in Bricks","\u002Ftutorial\u002Fintegration\u002Fbricks\u002F1.png",[175,190,192],{"id":191},"step-2-switch-to-the-style-tab","Step 2: Switch to the Style tab",[142,194,195,196,200,201,205],{},"On the Element panel, click on the ",[197,198],"icon",{"name":199},"lucide:palette"," ",[202,203,204],"strong",{},"Style"," tab.",[142,207,208],{},[185,209],{"alt":210,"src":211},"Switch to the Style tab","\u002Ftutorial\u002Fintegration\u002Fbricks\u002F2.png",[175,213,215],{"id":214},"step-3-open-the-typography-panel","Step 3: Open the Typography panel",[142,217,218,219,222],{},"Click the ",[202,220,221],{},"Typography"," menu to expand the panel.",[142,224,225],{},[185,226],{"alt":227,"src":228},"Open the Typography panel","\u002Ftutorial\u002Fintegration\u002Fbricks\u002F3.png",[175,230,232],{"id":231},"step-4-choose-the-font","Step 4: Choose the font",[142,234,218,235,238,239,242],{},[202,236,237],{},"Font family"," dropdown field to open the list, and select the font family from the ",[202,240,241],{},"Yabe Webfont"," group list.",[142,244,245],{},[185,246],{"alt":247,"src":248},"Choose the font family","\u002Ftutorial\u002Fintegration\u002Fbricks\u002F4.png",[155,250,252],{"id":251},"disable-the-google-fonts-in-bricks","Disable the Google Fonts in Bricks",[142,254,255],{},"Bricks use the Google Fonts Web API to provide users with the Google Fonts collection. To be GDPR compliant, you must disable the Google Fonts in Bricks.",[142,257,258,259,264],{},"Yabe Webfont forcibly disables the Google Fonts in Bricks by taking reference from the ",[145,260,263],{"href":261,"rel":262},"https:\u002F\u002Facademy.bricksbuilder.io\u002Farticle\u002Ffilter-bricks-assets-load_webfonts\u002F",[149],"official documentation",", so you don't need to do anything.",{"title":266,"searchDepth":267,"depth":267,"links":268},"",2,[269,276],{"id":157,"depth":267,"text":158,"children":270},[271,273,274,275],{"id":177,"depth":272,"text":178},3,{"id":191,"depth":272,"text":192},{"id":214,"depth":272,"text":215},{"id":231,"depth":272,"text":232},{"id":251,"depth":267,"text":252},"How to use custom fonts in Bricks.","md",{},{"icon":83},{"title":80,"description":277},{"loc":81},"KURwTXcfJFvKcmWeCLvzc9oaQC_BIZfkDAU7nShJJ2s",[285,287],{"title":75,"path":76,"stem":77,"description":286,"icon":78,"children":-1},"How to integrate Yabe Webfont into your theme or plugin.",{"title":85,"path":86,"stem":87,"description":288,"icon":88,"children":-1},"How to use custom fonts in Oxygen.",{"data":290,"body":291},{},{"type":292,"children":293},"root",[294],{"type":295,"tag":142,"props":296,"children":297},"element",{},[298],{"type":299,"value":277},"text",1782209488467]