If you're running a WordPress website and are looking to enhance its appearance and performance without getting into the nitty-gritty technical details, Yabe Webfont is an invaluable resource that adds fonts to your website at the click of a button.
I'm not sure if it was just me, but I spent quite a while trying to figure out how to install fonts to my first WordPress site.
I went through multiple plugins and tried plenty of custom code, but most of them seemed to unnecessarily complicate things.
That's when I was reached out to about Yabe Webfont. YABE is an extremely simple GDPR-friendly Font Plugin for WordPress that lets you self-host both Google & custom fonts on your WordPress website.
Why Yabe Webfont?
When it comes to enhancing the design and performance of your WordPress website, YABE Webfont shines in a number of areas.
It's GDPR Friendly
As any website operator who caters to users from the European Union knows, the General Data Protection Regulation (GDPR) necessitates rigorous data protection and privacy measures.
With most font services like Google Fonts, you must seek visitor consent before any fonts can be displayed - an often cumbersome process. Yabe Webfont eliminates this hurdle by enabling self-hosting of Google and custom fonts.
You're thereby freed from having to display a GDPR-compliant cookie consent banner to your users, saving you headaches and time.
By serving fonts directly from your server, the plugin reduces DNS lookups and requests while also leveraging the browser cache. This contributes to a faster-loading website and reduced Cumulative Layout Shift (CLS), improving your site's Core Web Vitals (which negatively impacts your site ranking if it's low)
Easy to Use
The plugin is designed with user-friendliness in mind, requiring only a few clicks to operate. Upload your custom fonts or import Google Fonts by simply typing in the search box and hitting the import button.
The plugin is also highly adaptable, offering seamless integration with a wide range of popular page builders such as Gutenberg, Bricks, Oxygen, Breakdance, Elementor, Divi, and many others! I've personally used it on both Oxygen and Breakdance websites and it's worked quite flawless. Here's all the builders it's compatible with:
Why Self-Host Google Fonts?
There are two primary reasons: enhanced website speed and superior customization options.
- Enhanced Website Speed: When you host Google Fonts on your website, it can lead to slower loading times. A sluggish website can result in a frustrating user experience, which, in turn, might cause potential customers to abandon your site, leading to lower conversion rates. It all dwindles down from there... Self-hosting Google Fonts is a strategic solution to this problem. By doing so, you can fine-tune the loading times of your website, ensuring that it runs at optimal speeds. This leads to a more streamlined user experience, which can significantly boost conversion rates.
- Superior Customization Options: Besides the loading times, self-hosting Google Fonts unlocks a world of customization options. Web developers gain the flexibility to tailor the fonts to seamlessly blend with the website’s style and design. This means things like variations in weight and style, inclusion of specific character sets and language support, performance optimization by serving only necessary font files, subsetting fonts to reduce file size, and maintaining consistent branding through the same typography.
Self-Host Google Fonts using Yabe Webfont
So we use Yabe on this exact site – it's the easiest way I've found to add new sites to an Oxygen website while still giving you control over what you want enabled/disabled/etc.
Want to add a new font? Go to the fonts page, add, type a title & upload your font and variants. You can preview what the font will look like, change display options, and even preload it.
Importing fonts works similarly to adding a new one, but you have a prefilled list to search from if you want to integrate directly from Google Fonts. Nothing else is required on your end, just add the variants that you want.
If you're trying to buy the plugin, it's $19/year if you aren't using the plugin for commercial sites. If you're making any kind of money from your website, you should go with the agency plan for $39.
You can purchase the plugin by the year or as a 1-time payment (equivalent to 4 times the yearly price for each plan). The lifetime plans come with support for the entire lifetime of the product. Buy whichever one makes the most sense for you!
I really really like this plugin. The founder reached out to me a couple months back and let me try it on one of my sites – I was hooked.
It's just easy to use and lets you do absolutely everything you'd want any kind of font plugin to include. It's focus on simplicity yet power is why I'll continue to use this across all my sites. It's worth every penny for the tool & development team behind it. Check Yabe out and see if it's a good fit for your site!
I'm not sure if the team plans on getting rid of the lifetime plan within the coming months, but it's best to buy that now if you're concerned about a price raise/ license change in the future.