Best WordPress Plugin for Custom Fields & Meta Boxes
Sometimes you may need a button that can show different links in different posts. That’s a button with a dynamic link. There are different ways to create it, one of them is using custom fields. Links will be saved into custom fields then pulled out and put into the button automatically. And, that’s where the Meta Box plugin comes in handy.
Continue reading "How to Create Buttons with Dynamic Link using Custom Fields" →
Nowadays, except for system fonts, Google Fonts is the optimal option for most websites for typography. However, there will be 2 disadvantages when you load Google Fonts for typical websites as instructed by Google's tutorials, or by the way to enqueue CSS in most WordPress themes:
The first drawback will make your website load slower. That'll make your Google PageSpeed Insights scores decrease, so does the SEO scores. The other will cause a bad user experience.
So, how do we solve these 2 weaknesses?
Note: the techniques in this post is outdated. Please visit the 2nd part of this series for a better method. The content in this post is still useful for reference.
Our purpose is to deal with 2 above disadvantages while loading Google fonts, to be more specific:
To do these two tasks at once, we will use the script Google Fonts provided by PerfPerfPerf. Follow up the below way:
Supposing that you need to load font Roboto into your website, we generally add the below script after the <head> section of the website (in a file header.php of the theme):
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Or enqueue into the WordPress theme as follows ( functions.php ):
add_action( 'wp_enqueue_scripts', 'themeprefix_scripts' );
function themeprefix_scripts() {
wp_enqueue_script( 'themeprefix-fonts', themeprefix_fonts_url() );
}
function themeprefix_fonts_url() {
return 'https://fonts.googleapis.com/css?family=Roboto';
}
Instead of doing so, now you only need to copy the URL of the font https://fonts.googleapis.com/css?family=Roboto and access PerfPerfPerf page, paste that URL into a URL fonts box. Then, copy the code in the text area box and paste that code into the<head> section of the website. Or if using WordPress, you can hook into wp_head as following (insert into the functions.php file of the theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
After that, load your website again. You will see that the other resources still load normally while loading the font. And when the font is loaded completely, this text will use that font.
The reason why the script of PerfPerfPerf, which has just been created recently, can solve the above problems is dependent on several up-to-date technologies on the browsers.
The working mechanism of this script is quite simple but really efficient:
preload mechanism to load the font. This one allows the browser to priory load the underground resources without any effect on loading the other ones. Now, all browsers support strongly the preload.font-display: swap mechanism to display the text first then load the font completely, turn the text's display into the wanted font. All browsers, except IE and Edge, support this attribute.In case the browser doesn’t support one of or both mechanisms, the fonts will be loaded as usual and your website is still displayed as before.
Make a point of utilizingfont-display: swap, when you inform font in CSS, you must have fall-back font in the end, as follows:
h1, h2 { font-family: Roboto, sans-serif; }
Don't write as below:
h1, h2 { font-family: Roboto; }
It will be a really suitable choice if you do it for your websites. But, for WordPress themes, there will need to get a little tweak.
Have a look at the below code which I used for the EightyDays theme of GretaThemes:
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
$url = themeprefix_fonts_url();
?>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="<?php echo esc_url( $url ); ?>" as="fetch" crossorigin="anonymous">
<script type="text/javascript">
!function(e,n,t){"use strict";var o="<?php echo esc_url( $url ); ?>",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<?php
}
function themeprefix_fonts_url() {
$fonts = array();
$subsets = 'latin-ext';
/* translators: If there are characters in your language that are not supported by Crimson Text, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Crimson Text font: on or off', 'themeprefix' ) ) { $fonts[] = 'Crimson Text:400,400i,700,700i'; } /* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */ if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
/* translators: If there are characters in your language that are not supported by Merriweather, translate this to 'off'. Do not translate into your own language. */
if ( 'off' !== _x( 'on', 'Merriweather font: on or off', 'themeprefix' ) ) {
$fonts[] = 'Merriweather:400,400i,700,700i';
}
$fonts_url = add_query_arg( array(
'family' => rawurlencode( implode( '|', $fonts ) ),
'subset' => rawurlencode( $subsets ),
), 'https://fonts.googleapis.com/css' );
return $fonts_url;
}
This code will do the following things:
on to off (or maintain them) in the WordPress theme. If you don't know how to translate a WordPress theme to another language, refer to this article.themeprefix_load_fonts. This script is copied from the above PerfPerfPerf page. It's using PHP here to change fonts URL only.Pay attention that you must replace themeprefix with the slug of your theme.
Not always do you build a theme from scratch? Most people create their websites by using themes from some theme provider or page builder plugins as Beaver Builder or Elementor. In this situation, it will be very difficult to control how to load Google Fonts as well as apply the script provided by PerfPerfPerf.
However, don’t worry, there is still a method to solve this problem. Here takes GretaThemes website as a typical example. This site utilizes Beaver Builder and its available themes to build its web. Because of using the page builder plugin, selecting the font is very easy, with just a few mouse clicks. So, how to optimize Google Fonts loading?
For this, you can view it in the theme which you are using, and in the enqueue style section. Pay attention that using page builders may cause it is impossible to get all the fonts like that. The easiest way to get all fonts is by pressing F12 when you are opening the website with Google Chrome or Firefox then see those fonts' URLs in the Network tab:
Then, copy that URL and save it to use for the below step 3.
Next, you must disable all Google Fonts loaded by theme and plugin. You can dequeue CSS files which are enqueued by theme and plugin to get it. However, it takes a lot of time because you must know the IDs of these CSS files. Regarding themes, it is also easy, but it's quite complete if you use page builder.
In place of doing that way, we can use the Autoptimize plugin. This plugin allows us to disable all Google Fonts on the website. Just go to Settings → Autoptimize and select the Extra tab, then on Google Fonts section, select Remove Google Fonts.
After Google Fonts are disabled, we need to load Google fonts manually. I want you to copy the URL fonts you get in step 1, then access to PerfPerfPerf page, paste the URL fonts into this page to generate the script.
Then, insert that script into your website by adding the following code to the functions.php file of the theme (or child theme):
add_action( 'wp_head', 'themeprefix_load_fonts' );
function themeprefix_load_fonts() {
?>
<!-- Code snippet to speed up Google Fonts rendering: googlefonts.3perf.com -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto" as="fetch" crossorigin="anonymous"> <script type="text/javascript"> !function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto",r="__3perf_googleFontsStylesheet";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- End of code snippet for Google Fonts -->
<?php
}
Pay attention to changing the above script into the one which you copy on the PerfPerfPerf page.
If you don't want to code, you can use the Slim SEO plugin to insert that code. Go to Settings → Slim SEO, then paste that script:
Note that Slim SEO is a SEO plugin for WordPress. It supports inserting webmaster verification tags or tracking scripts into the header or footer of the website. We use it to insert our scripts to load Google Fonts. But Slim SEO does more than that. It's a free WordPress SEO plugin that's lightweight, fast and has no-bloat. It's developed by the same team at Meta Box, so check it out!
In case you use Beaver Theme, to simplify, you can go to Customize → Code → Head Code and directly paste that script from PerfPerfPerf to there:
That's done!
So, we have learned about how to load Google Fonts faster for WordPress: do manually and by plugins. At the same time, we also see how to deal with the page builder plugins. With these methods, your website speed and user experience will increase significantly. So let’s get started it, apply immediately to your website, and let me know the results in the below comment section.
Beaver Themer has an amazing feature called Conditional Logic which allows you to control the visibility of rows, columns and modules on the front end based on some conditions. For example, you can hide a row for hero area if a post doesn't have featured image. With the new version of Meta Box - Beaver Themer Integrator, you're now able to show or hide rows, columns or modules when a Meta Box's field has a specific value.
Continue reading "Introducing Beaver Themer Conditional Logic Integration" →
2018 is coming to an end! We are so thankful for all of you who have supported us through this year. How were your projects in 2018? Have you had any difficulties working with the custom field? If so, keep reading and we will give you some useful suggestions. Plus, we’d love to announce we have some Christmas gifts for you. Stay tuned!
Continue reading "Meta Box’s Special Deal for Christmas and New Year 2019" →
It's no secret that at Meta Box, we like Beaver Builder and built some of our WordPress websites on that. It's an amazing page builder and is really powerful.
Continue reading "How to Remove Unnecessary Scripts and Styles in Beaver Builder" →
