[{"data":1,"prerenderedAt":398},["ShallowReactive",2],{"navigation":3,"-docs-fonts-custom-font":136,"-docs-fonts-custom-font-surround":382,"mdc-axz6zn-key":387},[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":38,"body":138,"description":375,"extension":376,"links":22,"meta":377,"navigation":378,"path":39,"seo":379,"sitemap":380,"stem":40,"titleTemplate":22,"__hash__":381},"docs\u002Fdocs\u002F2.fonts\u002F1.custom-font.md",{"type":139,"value":140,"toc":367},"minimark",[141,145,150,162,169,173,179,190,197,211,221,235,246,250,265,271,277,282,286,296,302,311,317,325,331,334,340,343,347,361],[142,143,144],"p",{},"Great news! You don't need coding skills to add custom fonts to your WordPress website. Plus, you won't have to go through the hassle of setting up SFTP to upload your font files to the server. Instead, use the WordPress media uploader to upload your font files easily. It's that simple!",[146,147,149],"h2",{"id":148},"step-1-add-new-font","Step 1: Add new font",[142,151,152,153,157,158,161],{},"Go to ",[154,155,156],"strong",{},"Appearance → Yabe Webfont"," and click the ",[154,159,160],{},"Add New"," button.",[142,163,164],{},[165,166],"img",{"alt":167,"src":168},"Add new custom font on WordPress website","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F1.png",[146,170,172],{"id":171},"step-2-provide-font-details","Step 2: Provide font details",[142,174,175],{},[165,176],{"alt":177,"src":178},"Adding font details","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F2.png",[180,181,182],"ol",{},[183,184,185,186,189],"li",{},"Give your font a family name on the ",[154,187,188],{},"Font Family"," field.",[142,191,192,193,196],{},"The family name will be used to identify the font in the CSS code. You can also change the title of your font on the ",[154,194,195],{},"Title"," field to make it easier to identify your font in the font lists.",[180,198,200],{"start":199},2,[183,201,202,203,206,207,210],{},"(Optional) Set the ",[154,204,205],{},"Font Display"," option to ",[154,208,209],{},"Block",".",[142,212,213,214,210],{},"This option controls how font files are loaded and displayed by the browser. Learn more about the ",[215,216,220],"a",{"href":217,"rel":218},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@font-face\u002Ffont-display",[219],"nofollow","\"Font Display\"",[180,222,224],{"start":223},3,[183,225,226,227,230,231,210],{},"(Optional) fill the ",[154,228,229],{},"CSS Selector | Fallback Font"," field with ",[232,233,234],"code",{},"*|sans-serif",[142,236,237,238,241,242,245],{},"The ",[232,239,240],{},"*"," selector will assign the font to all elements on your website.\nThe font will be fallback to the ",[232,243,244],{},"sans-serif"," if the font file fails to load.",[146,247,249],{"id":248},"step-3-add-font-variants","Step 3: Add font variants",[142,251,252,253,256,257,260,261,264],{},"By default, a variant is added to the font.\nOn the ",[154,254,255],{},"font-weight"," field, choose the weight from the lists. You can also use a custom weight by typing the value on the field, such as ",[232,258,259],{},"700"," or ",[232,262,263],{},"100 900"," for variable fonts.",[142,266,267],{},[165,268],{"alt":269,"src":270},"Add font variants","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F3.png",[142,272,273,274,161],{},"For additional font variants, click the ",[154,275,276],{},"Add variant",[142,278,279],{},[165,280],{"alt":276,"src":281},"\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F4.png",[146,283,285],{"id":284},"step-4-upload-font-files","Step 4: Upload font files",[180,287,288],{},[183,289,290,291,295],{},"Choose the font variant you want to upload the font file to and click the ",[292,293],"icon",{"name":294},"fa6-solid:pen-to-square"," icon to expand the variant settings panel.",[142,297,298],{},[165,299],{"alt":300,"src":301},"Expand variant settings","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F5.png",[180,303,304],{"start":199},[183,305,306,307,310],{},"Click the ",[154,308,309],{},"Upload Fonts"," button to open the WordPress media uploader.",[142,312,313],{},[165,314],{"alt":315,"src":316},"Upload Fonts button","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F6.png",[180,318,319],{"start":223},[183,320,321,322,161],{},"Upload your font files to the media library or choose the existing font files from the media library and click the ",[154,323,324],{},"Select",[142,326,327],{},[165,328],{"alt":329,"src":330},"Uploading font files with WordPress media uploader","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F7.png",[142,332,333],{},"Once the font files are uploaded, they will be assigned to the font variant.",[142,335,336],{},[165,337],{"alt":338,"src":339},"Font files assigned to variant","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F8.png",[142,341,342],{},"Continue to add font files to other variants if needed.",[146,344,346],{"id":345},"step-5-publish-the-font","Step 5: Publish the font",[142,348,349,350,353,354,357,358,161],{},"Ensure the ",[154,351,352],{},"Status"," toggle is set to ",[232,355,356],{},"Published",", and click the ",[154,359,360],{},"Save",[142,362,363],{},[165,364],{"alt":365,"src":366},"Publish the font","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F9.png",{"title":368,"searchDepth":199,"depth":199,"links":369},"",[370,371,372,373,374],{"id":148,"depth":199,"text":149},{"id":171,"depth":199,"text":172},{"id":248,"depth":199,"text":249},{"id":284,"depth":199,"text":285},{"id":345,"depth":199,"text":346},"How to add custom fonts to WordPress.","md",{},{"icon":41},{"title":38,"description":375},{"loc":39},"rla4_NAeon4tDwBXQ3mUiHuu33ThAnt3DGyGtWx98iQ",[383,385],{"title":25,"path":26,"stem":27,"description":384,"icon":28,"children":-1},"How to install Yabe Webfont on a WordPress website.",{"title":43,"path":44,"stem":45,"description":386,"icon":46,"children":-1},"How to self-host Google Fonts on a WordPress website.",{"data":388,"body":389},{},{"type":390,"children":391},"root",[392],{"type":393,"tag":142,"props":394,"children":395},"element",{},[396],{"type":397,"value":375},"text",1782209490133]