[{"data":1,"prerenderedAt":368},["ShallowReactive",2],{"navigation":3,"-docs-integrations-gutenberg":136,"-docs-integrations-gutenberg-surround":352,"mdc--jiqamd-key":357},[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":90,"body":138,"description":345,"extension":346,"links":22,"meta":347,"navigation":348,"path":91,"seo":349,"sitemap":350,"stem":92,"titleTemplate":22,"__hash__":351},"docs\u002Fdocs\u002F3.integrations\u002F4.gutenberg.md",{"type":139,"value":140,"toc":329},"minimark",[141,152,157,164,169,176,199,203,222,228,232,239,245,249,252,256,267,273,277,283,288,294,298,303,309,315,319,324],[142,143,144,145,151],"p",{},"The future of content and visual editing in WordPress is Gutenberg. ",[146,147,90],"a",{"href":148,"rel":149},"https:\u002F\u002Fwordpress.org\u002Fgutenberg\u002F",[150],"nofollow"," is the new default WordPress editor. It is a block-based editor that allows you to create content with much flexibility.",[153,154,156],"h2",{"id":155},"using-custom-fonts-in-the-block-editor","Using custom fonts in the Block editor",[142,158,159,160,163],{},"In the Gutenberg editor, you can use any fonts you have ",[146,161,162],{"href":39},"added"," to Yabe Webfont.",[165,166,168],"h3",{"id":167},"step-1-open-the-block-setting-panel","Step 1: Open the Block setting panel",[142,170,171],{},[172,173],"img",{"alt":174,"src":175},"Open the Block setting panel","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F1.png",[177,178,179,183,191],"ol",{},[180,181,182],"li",{},"Choose the blocks on the Gutenberg editor's canvas",[180,184,185,186,190],{},"Then click the ",[187,188],"icon",{"name":189},"lucide:panel-right"," icon on the top right corner of the screen",[180,192,193,194,198],{},"And switch to the ",[195,196,197],"strong",{},"Block"," tab.",[165,200,202],{"id":201},"step-2-enable-the-font-family-tools","Step 2: Enable the Font Family tools",[142,204,205,206,209,210,213,214,217,218,221],{},"Click the ",[187,207],{"name":208},"fa6-solid:ellipsis-vertical"," icon on the right of the ",[195,211,212],{},"Typography"," heading title, and click ",[195,215,216],{},"Font Family"," from the dropdown list under the ",[195,219,220],{},"TOOLS"," group to enable the Font Family tools.",[142,223,224],{},[172,225],{"alt":226,"src":227},"Enable the Font Family tools","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F2.png",[165,229,231],{"id":230},"step-3-select-the-font-family","Step 3: Select the font family",[142,233,234,235,238],{},"Open the ",[195,236,237],{},"FONT"," dropdown list, and select the font family you want to use. The block you have selected will be updated immediately.",[142,240,241],{},[172,242],{"alt":243,"src":244},"Select the font family","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F3.png",[153,246,248],{"id":247},"using-custom-fonts-in-the-site-editor","Using custom fonts in the Site Editor",[142,250,251],{},"Yabe Webfont also supports custom fonts in the Site Editor, a part of the Gutenberg editor.",[165,253,255],{"id":254},"step-1-open-the-styles-setting-panel","Step 1: Open the Styles setting panel",[142,257,258,259,262,263,266],{},"On the top right of the screen, click the ",[187,260],{"name":261},"lucide:contrast"," icon to open the ",[195,264,265],{},"Styles"," setting panel.",[142,268,269],{},[172,270],{"alt":271,"src":272},"Open the Styles setting panel","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F4.png",[165,274,276],{"id":275},"step-2-choose-the-styles-profile","Step 2: Choose the Styles profile",[142,278,205,279,282],{},[195,280,281],{},"Browse styles"," menu to open the list of styles profiles, and choose the one you want to use.",[142,284,285],{},[172,286],{"alt":281,"src":287},"\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F5.png",[142,289,290],{},[172,291],{"alt":292,"src":293},"Choose a styles profile","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F6.png",[165,295,297],{"id":296},"step-3-typography-settings","Step 3: Typography settings",[142,299,205,300,302],{},[195,301,212],{}," menu to open the typography settings, and choose the element you want to customize.",[142,304,305],{},[172,306],{"alt":307,"src":308},"Typography settings","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F7.png",[142,310,311],{},[172,312],{"alt":313,"src":314},"Choose the element","\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F8.png",[165,316,318],{"id":317},"step-4-select-the-font-family","Step 4: Select the font family",[142,320,234,321,323],{},[195,322,237],{}," dropdown list, and select the font family you want to use. The element on the canvas will be updated immediately.",[142,325,326],{},[172,327],{"alt":243,"src":328},"\u002Ftutorial\u002Fintegration\u002Fgutenberg\u002F9.png",{"title":330,"searchDepth":331,"depth":331,"links":332},"",2,[333,339],{"id":155,"depth":331,"text":156,"children":334},[335,337,338],{"id":167,"depth":336,"text":168},3,{"id":201,"depth":336,"text":202},{"id":230,"depth":336,"text":231},{"id":247,"depth":331,"text":248,"children":340},[341,342,343,344],{"id":254,"depth":336,"text":255},{"id":275,"depth":336,"text":276},{"id":296,"depth":336,"text":297},{"id":317,"depth":336,"text":318},"How to use custom fonts in the Gutenberg editor.","md",{},{"icon":93},{"title":90,"description":345},{"loc":91},"n1-MQq0A4gy6hl4APEuMM2dlRPn-2Is6SsWtykFwyRE",[353,355],{"title":85,"path":86,"stem":87,"description":354,"icon":88,"children":-1},"How to use custom fonts in Oxygen.",{"title":95,"path":96,"stem":97,"description":356,"icon":98,"children":-1},"How to use custom fonts in Breakdance.",{"data":358,"body":359},{},{"type":360,"children":361},"root",[362],{"type":363,"tag":142,"props":364,"children":365},"element",{},[366],{"type":367,"value":345},"text",1782209488467]