[{"data":1,"prerenderedAt":418},["ShallowReactive",2],{"navigation":3,"-docs-fonts-google-fonts":136,"-docs-fonts-google-fonts-surround":402,"mdc--8dcrfh-key":407},[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":43,"body":138,"description":395,"extension":396,"links":22,"meta":397,"navigation":398,"path":44,"seo":399,"sitemap":400,"stem":45,"titleTemplate":22,"__hash__":401},"docs\u002Fdocs\u002F2.fonts\u002F2.google-fonts.md",{"type":139,"value":140,"toc":384},"minimark",[141,152,155,170,173,176,181,193,199,203,206,212,216,231,234,240,244,252,255,292,297,314,320,324,331,338,344,348,354,360,364,378],[142,143,144,151],"p",{},[145,146,150],"a",{"href":147,"rel":148},"https:\u002F\u002Ffonts.google.com",[149],"nofollow","Google Fonts"," is a library of over 1,500 open source font families and APIs for convenient use via CSS and Android.",[142,153,154],{},"Embedding Google Fonts in your website via the Google Fonts Web API or Google's server is a popular way to add custom fonts to a WordPress website.",[142,156,157,158,163,164,169],{},"However, Google's server requires the user's IP address and the user agent to serve the font files, as described in the ",[145,159,162],{"href":160,"rel":161},"https:\u002F\u002Fdevelopers.google.com\u002Ffonts\u002Ffaq\u002Fprivacy",[149],"Google Fonts privacy policy",". In January 2022 ",[145,165,168],{"href":166,"rel":167},"https:\u002F\u002Frewis.io\u002Furteile\u002Furteil\u002Flhm-20-01-2022-3-o-1749320\u002F",[149],"the German Court declared"," that Google Fonts is not GDPR\u002FDSGVO compliant.",[142,171,172],{},"To comply with the GDPR law, you must self-host Google Fonts on your WordPress website.",[142,174,175],{},"Don't worry! It's easy to do with Yabe Webfont. Just a few clicks, and you're done.",[177,178,180],"h2",{"id":179},"step-1-add-new-font","Step 1: Add new font",[142,182,183,184,188,189,192],{},"Go to ",[185,186,187],"strong",{},"Appearance → Yabe Webfont"," and click the ",[185,190,191],{},"Import Google Fonts"," button.",[142,194,195],{},[196,197],"img",{"alt":191,"src":198},"\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F1.png",[177,200,202],{"id":201},"step-2-search-the-font-family","Step 2: Search the font family",[142,204,205],{},"Find the font family you want to add from the list or start typing to search.",[142,207,208],{},[196,209],{"alt":210,"src":211},"Search the font family","\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F2.png",[177,213,215],{"id":214},"step-3-selecting-font-subsets","Step 3: Selecting font subsets",[142,217,218,219,224,225,230],{},"Subset is a file that contains a custom (and usually limited) collection of ",[145,220,223],{"href":221,"rel":222},"https:\u002F\u002Ffonts.google.com\u002Fknowledge\u002Fglossary\u002Fglyph",[149],"glyphs",".\nLearn more about ",[145,226,229],{"href":227,"rel":228},"https:\u002F\u002Ffonts.google.com\u002Fknowledge\u002Fglossary\u002Fsubsetting",[149],"subsetting",".",[142,232,233],{},"Some fonts have multiple subsets; you can select the ones you want to use.",[142,235,236],{},[196,237],{"alt":238,"src":239},"Selecting font subsets","\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F3.png",[177,241,243],{"id":242},"step-4-more-file-formats","Step 4: More file formats",[142,245,246,247,230],{},"You can select multiple file formats to ",[145,248,251],{"href":249,"rel":250},"https:\u002F\u002Fcaniuse.com\u002F?search=Font%20Format",[149],"support more browsers",[142,253,254],{},"Available file formats:",[256,257,258,269,283],"ul",{},[259,260,261,268],"li",{},[185,262,263,267],{},[264,265,266],"code",{},"WOFF"," (Web Open Font Format)",": a compressed file format created specifically for web fonts.",[259,270,271,277,278,230],{},[185,272,273,276],{},[264,274,275],{},"WOFF2"," (Web Open Font Format 2)",": a successor to WOFF, it offers better compression than WOFF and supports ",[145,279,282],{"href":280,"rel":281},"https:\u002F\u002Ffonts.google.com\u002Fknowledge\u002Fglossary\u002Fvariable_fonts",[149],"variable fonts",[259,284,285,291],{},[185,286,287,290],{},[264,288,289],{},"TTF"," (TrueType Font)",": an uncompressed font file format for desktop use.",[142,293,294,295,230],{},"The recommended font format is ",[264,296,275],{},[298,299,301],"callout",{"icon":130,"title":300},"Convert TTF to WOFF2",[142,302,303,304,306,307,309,310,313],{},"If you already have a ",[264,305,289],{}," font file (for example, downloaded from Google Fonts), you can convert it to ",[264,308,275],{}," right in your browser using our ",[145,311,312],{"href":128},"TTF to WOFF2 Converter",". No upload, fully private — the conversion runs locally via WebAssembly.",[142,315,316],{},[196,317],{"alt":318,"src":319},"More file formats","\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F4.png",[177,321,323],{"id":322},"step-5-using-variable-fonts-optional","Step 5: Using variable fonts (optional)",[142,325,326,327,330],{},"The ",[145,328,282],{"href":280,"rel":329},[149]," format enables a font file to hold various stylistic variations.",[142,332,333,334,337],{},"If the font family has the variable fonts format, you can use it by ticking the ",[185,335,336],{},"Variable Fonts"," checkbox.",[142,339,340],{},[196,341],{"alt":342,"src":343},"Using variable fonts","\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F5.png",[177,345,347],{"id":346},"step-6-choose-font-variants","Step 6: Choose font variants",[142,349,350,351,337],{},"You can enable\u002Fdisable the font variants you want to use. Or you can allow all variants by ticking the ",[185,352,353],{},"Variants",[142,355,356],{},[196,357],{"alt":358,"src":359},"Choose font variants","\u002Ftutorial\u002Ffont\u002Fgoogle-fonts\u002F6.png",[177,361,363],{"id":362},"step-7-publish-the-font","Step 7: Publish the font",[142,365,366,367,370,371,374,375,192],{},"Ensure the ",[185,368,369],{},"Status"," toggle is set to ",[264,372,373],{},"Published",", and click the ",[185,376,377],{},"Save",[142,379,380],{},[196,381],{"alt":382,"src":383},"Publish the font","\u002Ftutorial\u002Ffont\u002Fcustom-font\u002F9.png",{"title":385,"searchDepth":386,"depth":386,"links":387},"",2,[388,389,390,391,392,393,394],{"id":179,"depth":386,"text":180},{"id":201,"depth":386,"text":202},{"id":214,"depth":386,"text":215},{"id":242,"depth":386,"text":243},{"id":322,"depth":386,"text":323},{"id":346,"depth":386,"text":347},{"id":362,"depth":386,"text":363},"How to self-host Google Fonts on a WordPress website.","md",{},{"icon":46},{"title":43,"description":395},{"loc":44},"OvdnYKq3alohzFeB-K7xg2jI25VcmHxm5i_ErQVCn7Y",[403,405],{"title":38,"path":39,"stem":40,"description":404,"icon":41,"children":-1},"How to add custom fonts to WordPress.",{"title":48,"path":49,"stem":50,"description":406,"icon":51,"children":-1},"How to use Adobe Fonts on a WordPress website.",{"data":408,"body":409},{},{"type":410,"children":411},"root",[412],{"type":413,"tag":142,"props":414,"children":415},"element",{},[416],{"type":417,"value":395},"text",1782209488467]