[{"data":1,"prerenderedAt":519},["ShallowReactive",2],{"navigation":3,"-docs-integrations-developer":136,"-docs-integrations-developer-surround":504,"mdc-z0v9g0-key":509},[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":75,"body":138,"description":497,"extension":498,"links":22,"meta":499,"navigation":500,"path":76,"seo":501,"sitemap":502,"stem":77,"titleTemplate":22,"__hash__":503},"docs\u002Fdocs\u002F3.integrations\u002F12.developer.md",{"type":139,"value":140,"toc":493},"minimark",[141,145,150,158,164,259,264,272,276,323,330,334,419,422,489],[142,143,144],"p",{},"Yabe Webfont is developer friendly. You can easily integrate Yabe Webfont into your theme or plugin with the available function.",[146,147,149],"h2",{"id":148},"get-the-font-families","Get the font families",[142,151,152,153,157],{},"To get the font families, you can use ",[154,155,156],"code",{},"\\Yabe\\Webfont\\Utils\\Font::get_fonts()"," function.",[142,159,160],{},[161,162,163],"strong",{},"Example:",[165,166,171],"pre",{"className":167,"code":168,"language":169,"meta":170,"style":170},"language-php shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","\u003C?php\n$fonts = \\Yabe\\Webfont\\Utils\\Font::get_fonts();\n\nprint_r($fonts);\n?>\n","php","",[154,172,173,186,231,238,253],{"__ignoreMap":170},[174,175,178,182],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"sDfIl","\u003C?",[174,183,185],{"class":184},"sZSNi","php\n",[174,187,189,192,195,198,201,204,207,210,212,215,217,221,224,228],{"class":176,"line":188},2,[174,190,191],{"class":180},"$",[174,193,194],{"class":184},"fonts ",[174,196,197],{"class":180},"=",[174,199,200],{"class":180}," \\",[174,202,203],{"class":184},"Yabe",[174,205,206],{"class":180},"\\",[174,208,209],{"class":184},"Webfont",[174,211,206],{"class":180},[174,213,214],{"class":184},"Utils",[174,216,206],{"class":180},[174,218,220],{"class":219},"s52Pk","Font",[174,222,223],{"class":180},"::",[174,225,227],{"class":226},"s3cPz","get_fonts",[174,229,230],{"class":180},"();\n",[174,232,234],{"class":176,"line":233},3,[174,235,237],{"emptyLinePlaceholder":236},true,"\n",[174,239,241,244,247,250],{"class":176,"line":240},4,[174,242,243],{"class":226},"print_r",[174,245,246],{"class":180},"($",[174,248,249],{"class":184},"fonts",[174,251,252],{"class":180},");\n",[174,254,256],{"class":176,"line":255},5,[174,257,258],{"class":180},"?>\n",[142,260,261],{},[161,262,263],{},"Output example:",[165,265,270],{"className":266,"code":268,"language":269,"meta":170},[267],"language-text","Array\n(\n    [0] => Array\n        (\n            [title] => Telescope\n            [family] => Annie Use Your Telescope\n            [type] => custom\n            [slug] => mvPKsIYENG\n            [css] => Array\n                (\n                    [slug] => annie-use-your-telescope\n                    [custom_property] => --ywf--family-annie-use-your-telescope\n                    [variable] => var(--ywf--family-annie-use-your-telescope)\n                )\n\n            [variants] => Array\n                (\n                    [0] => Array\n                        (\n                            [weight] => 400\n                            [style] => normal\n                        )\n\n                )\n\n            [fallback_family] =>\n        )\n\n    [1] => Array\n        (\n            [title] => Kaushan Script\n            [family] => kaushan-script\n            [type] => adobe-fonts\n            [slug] => whhq\n            [css] => Array\n                (\n                    [slug] => kaushan-script\n                    [custom_property] => --ywf--family-kaushan-script\n                    [variable] => var(--ywf--family-kaushan-script)\n                )\n\n            [variants] => Array\n                (\n                )\n\n            [fallback_family] =>\n        )\n\n    [2] => Array\n        (\n            [title] => Pacifico\n            [family] => Pacifico\n            [type] => google-fonts\n            [slug] => B4o13c17Sv\n            [css] => Array\n                (\n                    [slug] => pacifico\n                    [custom_property] => --ywf--family-pacifico\n                    [variable] => var(--ywf--family-pacifico)\n                )\n\n            [variants] => Array\n                (\n                    [0] => Array\n                        (\n                            [weight] => 400\n                            [style] => normal\n                        )\n\n                )\n\n            [fallback_family] =>\n        )\n\n)\n","text",[154,271,268],{"__ignoreMap":170},[146,273,275],{"id":274},"css-variables","CSS Variables",[165,277,279],{"className":167,"code":278,"language":169,"meta":170,"style":170},"\\Yabe\\Webfont\\Utils\\Font::css_custom_property(string $family_name): string\n",[154,280,281],{"__ignoreMap":170},[174,282,283,285,287,289,291,293,295,297,299,301,304,307,311,314,317,320],{"class":176,"line":177},[174,284,206],{"class":180},[174,286,203],{"class":184},[174,288,206],{"class":180},[174,290,209],{"class":184},[174,292,206],{"class":180},[174,294,214],{"class":184},[174,296,206],{"class":180},[174,298,220],{"class":219},[174,300,223],{"class":180},[174,302,303],{"class":226},"css_custom_property",[174,305,306],{"class":180},"(",[174,308,310],{"class":309},"smZ93","string",[174,312,313],{"class":180}," $",[174,315,316],{"class":184},"family_name",[174,318,319],{"class":180},"):",[174,321,322],{"class":309}," string\n",[142,324,325,326,329],{},"You can get the CSS variables of the font added to the Yabe Webfont.\n",[154,327,328],{},"$family_name"," is the font family name.",[142,331,332],{},[161,333,163],{},[165,335,337],{"className":167,"code":336,"language":169,"meta":170,"style":170},"\u003C?php\n$css_custom_property = \\Yabe\\Webfont\\Utils\\Font::css_custom_property('Annie Use Your Telescope');\n\necho $css_custom_property;\n\n\u002F\u002F Output: --ywf--family-annie-use-your-telescope\n?>\n",[154,338,339,345,387,391,403,407,414],{"__ignoreMap":170},[174,340,341,343],{"class":176,"line":177},[174,342,181],{"class":180},[174,344,185],{"class":184},[174,346,347,349,352,354,356,358,360,362,364,366,368,370,372,374,376,379,383,385],{"class":176,"line":188},[174,348,191],{"class":180},[174,350,351],{"class":184},"css_custom_property ",[174,353,197],{"class":180},[174,355,200],{"class":180},[174,357,203],{"class":184},[174,359,206],{"class":180},[174,361,209],{"class":184},[174,363,206],{"class":180},[174,365,214],{"class":184},[174,367,206],{"class":180},[174,369,220],{"class":219},[174,371,223],{"class":180},[174,373,303],{"class":226},[174,375,306],{"class":180},[174,377,378],{"class":180},"'",[174,380,382],{"class":381},"sGFVr","Annie Use Your Telescope",[174,384,378],{"class":180},[174,386,252],{"class":180},[174,388,389],{"class":176,"line":233},[174,390,237],{"emptyLinePlaceholder":236},[174,392,393,396,398,400],{"class":176,"line":240},[174,394,395],{"class":226},"echo",[174,397,313],{"class":180},[174,399,303],{"class":184},[174,401,402],{"class":180},";\n",[174,404,405],{"class":176,"line":255},[174,406,237],{"emptyLinePlaceholder":236},[174,408,410],{"class":176,"line":409},6,[174,411,413],{"class":412},"sWuyu","\u002F\u002F Output: --ywf--family-annie-use-your-telescope\n",[174,415,417],{"class":176,"line":416},7,[174,418,258],{"class":180},[142,420,421],{},"And you can use it in your CSS.",[165,423,427],{"className":424,"code":425,"language":426,"meta":170,"style":170},"language-css shiki shiki-themes material-theme-lighter material-theme-lighter material-theme-palenight","h1, h2, h3, h4, h5, h6\n{\n    font-family: var(--ywf--family-annie-use-your-telescope);\n}\n","css",[154,428,429,460,465,484],{"__ignoreMap":170},[174,430,431,434,437,440,442,445,447,450,452,455,457],{"class":176,"line":177},[174,432,433],{"class":219},"h1",[174,435,436],{"class":180},",",[174,438,439],{"class":219}," h2",[174,441,436],{"class":180},[174,443,444],{"class":219}," h3",[174,446,436],{"class":180},[174,448,449],{"class":219}," h4",[174,451,436],{"class":180},[174,453,454],{"class":219}," h5",[174,456,436],{"class":180},[174,458,459],{"class":219}," h6\n",[174,461,462],{"class":176,"line":188},[174,463,464],{"class":180},"{\n",[174,466,467,471,474,477,479,482],{"class":176,"line":233},[174,468,470],{"class":469},"spFsF","    font-family",[174,472,473],{"class":180},":",[174,475,476],{"class":226}," var",[174,478,306],{"class":180},[174,480,481],{"class":184},"--ywf--family-annie-use-your-telescope",[174,483,252],{"class":180},[174,485,486],{"class":176,"line":240},[174,487,488],{"class":180},"}\n",[490,491,492],"style",{},"html pre.shiki code .sDfIl, html code.shiki .sDfIl{--shiki-light:#39ADB5;--shiki-default:#39ADB5;--shiki-dark:#89DDFF}html pre.shiki code .sZSNi, html code.shiki .sZSNi{--shiki-light:#90A4AE;--shiki-default:#90A4AE;--shiki-dark:#BABED8}html pre.shiki code .s52Pk, html code.shiki .s52Pk{--shiki-light:#E2931D;--shiki-default:#E2931D;--shiki-dark:#FFCB6B}html pre.shiki code .s3cPz, html code.shiki .s3cPz{--shiki-light:#6182B8;--shiki-default:#6182B8;--shiki-dark:#82AAFF}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 .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-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 .smZ93, html code.shiki .smZ93{--shiki-light:#9C3EDA;--shiki-default:#9C3EDA;--shiki-dark:#C792EA}html pre.shiki code .sGFVr, html code.shiki .sGFVr{--shiki-light:#91B859;--shiki-default:#91B859;--shiki-dark:#C3E88D}html pre.shiki code .sWuyu, html code.shiki .sWuyu{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#90A4AE;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spFsF, html code.shiki .spFsF{--shiki-light:#8796B0;--shiki-default:#8796B0;--shiki-dark:#B2CCD6}",{"title":170,"searchDepth":188,"depth":188,"links":494},[495,496],{"id":148,"depth":188,"text":149},{"id":274,"depth":188,"text":275},"How to integrate Yabe Webfont into your theme or plugin.","md",{},{"icon":78},{"title":75,"description":497},{"loc":76},"MG_AsU0RU8w6MvFvKGxSPUGQW3BUjeKFtiQvM6z9dc0",[505,507],{"title":70,"path":71,"stem":72,"description":506,"icon":73,"children":-1},"How to use custom fonts in Zion Builder.",{"title":80,"path":81,"stem":82,"description":508,"icon":83,"children":-1},"How to use custom fonts in Bricks.",{"data":510,"body":511},{},{"type":512,"children":513},"root",[514],{"type":515,"tag":142,"props":516,"children":517},"element",{},[518],{"type":269,"value":497},1782209488467]