Archives for December 2017

Are you planning a bike trip and looking for ways to display live tracking of your trip on your website? Thanks to SpotWalla, you can do it using your mobile phone as a GPS device. All you need is an GPS app such as Bubble GPS app.

In this post, I’ll walk you through the steps required to display live tracking of your trip on your website.

Let’s go:

Contents:

• Sign up with SpotWalla
• Download Bubbler GPS Mobile App
• Configure Your SpotWalla Profile
• Configure Bubbler GPS App
• Create a Trip
• Embed Map on Your Website
• Go on a Test Ride

Sign up with SpotWalla

Visit SpotWalla.com and Sign up.

Download Bubbler GPS Mobile App

Download the Bubbler GPS App from Google Play Store. You will find two different versions — basic version (free) and advanced version (premium). Download the basic version if you were trying to test the app.

Enter your SpotWalla credentials to login.

Configure Your SpotWalla Profile

Login to SpotWalla website to configure your SpotWalla account.

On the top right corner, click on your username. From the drop-down menu, click on devices.

You should see My Devices page now.

Under description, you should see your device (i.e mobile device) now.

Click on your device name (e.g Redmi Note 4) to see a drop-down menu.

Click on Web API on the drop-down menu.

On the Web API page, you will see “Enable/Disable API” option. If it’s disabled, click on Enable button to enable your API. Basically, you’re enable your GPS device to send data to your SpotWalla account.

Once done, click on the “Devices” button the bottom right corner to return to your My Devices page.

On My Devices page, click on your device name and then click on “Widget”.

Look at the screenshot given below and make sure you follow the same configuration as shown in the screenshot.

Once done, click on the “Update” button.

Configure Bubbler GPS App

On your GPS Device (i.e mobile phone), you need to configure the settings to connect it to your SpotWalla account.

Click on the settings to see a menu. Click on the SpotWalla Device option to whether it detects your device or not.

If you have enabled your device in SpotWalla as shown earlier, you should see your device under “Device Currently Selected”.

Create a Trip

In order for SpotWalla to track your movement and show GPS data, you need to create a trip first.

To create a trip, head over to SpotWalla website and click on the “trips” on the drop-down menu under your username.

Click on the New button to create a new trip and configure it as per the following criteria.

Choose Your Device: If you have enabled only one phone, it will display your device on default. If you have multiple devices enabled, then choose the device you want to carry for your trip.

Trip Name: Give your Trip a name. That’s up to you.

Trip Description: Give a description. Again, that’s up to you.

Start Date/Start Time: Suppose you want to start your trip today, set the date from the calendar. Choose the current time as per your location.

End Date/End Time: I’d advise choose a future data, i.e last date of the current month. Choose any time of the day to set the end time.

Security Options: You need to make sure you set the security options to allow SpotWalla to track your GPS data and display it on your embedded map which is available for public view.

Leave everything as is if you’re creating the trip for a test ride.

Note: There’s an option that allows you to “Draw a line from one location to the next”. Make sure it’s enabled so you see lines on your map.

Now, click on the “Create” button to create the map.

Embed Map on Your Website

If you want to embed your map on website to let your website visitors track your trip live, you need to copy the appropriate code and paste it inside a widget (preferably, home page widget) on your website.

Go to Trips in the drop-down menu under your username, click on the “Trip Links” under your trip name (the one you just created), and copy the link under “Embedding”.

Alternatively, you can simply copy the code below, replace the default ID with your ID and insert inside the widget on your website.

Go on a Test Ride

This is the last step. SpotWalla requires that you move at least 100 meters distance in order to help it track and display GPS data.

However, you can move a little farther to generate more GPS data if you want.

Here are a couple of things to keep in mind while testing:

• Carry your GPS device with you while traveling for test.
• Make sure the GPS device is connected to the Internet.
• Make sure your click on the update button on your Bubbler GPS app home page at some intervals. While the GPS app is supposed to send data to SpotWalla automatically, I couldn’t confirm if it was working that way. However, if you click on the update button, it will send the data to SpotWalla map.
• Don’t click on the “End Trip” button unless you’re done testing.

The SpotWalla embedded map is updated every fifteen minutes or so. So expect to see your tracks only after some time.

That’s it. I hope this guide helps you set up your live tracking widget on your website. If you have any questions, please, let me know.

NOTE: If you want advanced features, you can buy the premium version of Bubbler GPS app. You can email both SpotWalla and Bubbler teams and expect to get a quick reply. Also, if you’re feeling generous, be sure to donate to SpotWalla.

Images comprise a large part of your WordPress data which plays a key role in page speed.

Therefore, it’s extremely important to know how to use images correctly in order to boost your page speed.

In this post, I’ll share with you a couple of tips that help me manipulate images in the Media library.

Here’s a list of things you need know to take control of your images in WordPress.

Contents:

• Things You Need to Know about Your Images
• Using Images as Featured Image for Your Blog
• How to Resize/Compress an Original Image in Use EZGif.com
• Resizing Images in WordPress Media Library
• How to Display the Image File Size in WordPress
• How to Display the Image File Dimension in WordPress
• How to Resize Your Images Individually
• How to Bulk Resize Your Images in Media Library
• How to Crop Your Images in Media Library
• How to Display All Image Size in Media Library

Things You Need to Know about Your Images

Most people upload images to their WordPress library without actually compressing them. I’ve seen many users trying to upload image files over 1 to 8MB in size! Those files will typically have a gigantic dimension as well, e.g. 4000px by 1000px.

Trust me! You don’t really need such heavy image files on your website.

What should you really do before uploading?

You need to resize and compress your images as per your theme specifications.

Most modern themes come with a hero image which typically requires an image to be around 2000px by 500px in dimension.

The original images captured on your mobile phones and DSLR cameras tend to have much higher size and resolution that your website requires.

Therefore, you need to compress and resize them before uploading.

There are a couple of free image compression tools you can use to resize and compress your original images.

• Picmonkey
• EZGif.com

There are many more but I’ve personally used these two tools for a long time. These tools offer many other features as well. However, I use them for image resizing, cropping and compression purposes.

Using Images as Featured Image for Your Blog

Featured images typically appear at the top of a blog post. When you share a blog post on social media (Facebook/Twitter), your featured images appear prominently on your followers’ feed as well.

Almost all WordPress themes come with a predefined size for your featured image. For example, the theme for this blog has a featured image with a dimension of 1200px by 600px.

Similarly, in the Twenty Sixteen theme by WordPress, the recommended featured image size is 1200px wide.

Therefore, if you want to use an image as your featured image, you need to resize and compress the original image using either of the two tools recommend above.

How to Resize/Compress an Original Image in Use EZGif.com

If you’re uploading just one or two images at a time, then you can simply use this free tool: https://ezgif.com/resize

Step #1: Upload your image or enter the image URL (if you want to resize an existing image). Then click on the upload button.

Step #2: *You will see the following*

Enter the recommended width and height (e.g 1200 and 600 in my case) as per your featured image specs and click on the Resize Image button.

Wait a couple of seconds to see the resized image to appear below.

As you can see, the tool reduces the file size and crop the image from the center to maintain the current aspect ratio.

Additionally, you can optimize the image losslessly, meaning you strip off the metadata but retain the original quality. This makes the image even lighter.

To do this, you can click on the optimize button and click on the checkbox against lossless. Then click on the Optimize Image button.

Now, you can right-click on the Resized and Optimized Image and save it to your desktop.

You now have a properly formatted and lightweight featured image ready for your blog posts.

Resizing Images in WordPress Media Library

If you want to resize and crop any existing image files in WordPress, you need to start with the media library.

To reach your media library, you need to go to media > library. The usual location is YourWebsiteURL.com/wp-admin/upload.php

You can see images either in grid view (default) or list view. When you click on a particular image, you can see the details of the image file such as file name, file type, dimension, file size and so on.

WordPress allows you to scale and crop images as per your needs.

However, inspecting file details and resizing them individually can be time-consuming.

By default, WordPress doesn’t show you any file information in the list view. Therefore, you need to use a few plugins or add a few code snippets to your functions.php file to display the file information in your list view.

How to Display the Image File Size in WordPress

Add the following code snippet to your functions.php file.

How to Display the Image File Dimension in WordPress

In order to show the file size, add the following code snippet to your functions.php file.

Go back to your media library, click on the list view and you should now see file size as well as file dimension information there.

What’s more, you can actually sort the files based on their dimensions. This will help you prioritize your image resizing tasks.

Now, you’re ready to resize and compress your existing images in your media library.

How to Resize Your Images Individually

If you want to resize only a few selected images manually, you could do so by clicking on editing option.

In order to resize a particular image file, you need to view its original dimension first.

Here’s what you need to remember:

Option #1: Crop the original image if its dimension is just slightly higher than that of your featured image.

Option #2: If its dimension is more than two times, it’s better to resize the image first and bring it down before cropping it.

How to Bulk Resize Your Images in Media Library

If you want to bulk resize (not crop) your existing images in the media library, you can use this nifty plugin called Imsanity.

It’s free and pretty straightforward.

Simply, install, activate and enter the value in the dimension area, and you’re good to go.

Please, remember this plugin doesn’t crop your image — it simply resizes your images.

How to Crop Your Images in Media Library

To crop an image you need to click on the edit button first. Then, you need to click on the image itself to select the desired area for cropping.

After selecting the portion to crop, click on the crop button at the left upper corner of the tool, and then click on the SAVE button at the bottom.

As explained earlier, you can directly crop an original image to resize it as per your featured image specs. This also reduces the file size, resulting in a lightweight image file.

How to Display All Image Size in Media Library

When you upload an image to your WordPress site, WordPress auto-generates various versions of the same image as per your theme requirements.

However, WordPress doesn’t display information related those files by default.

Thankfully, by installing this plugin, you can view the information and permalinks of those files. The lightweight plugin can complement Regenerate Thumbnails plugin.

That’s it! I hope you will own the medial library like a boss moving forward.

If you hav any questions, let me know in the comments below. Don’t forget to share this post with your friends on social media.

Image optimization is one of the most important aspects of maintaining a healthy WordPress site. From boosting page speed to enhancing the user experience, optimized images help you reduce your annual hosting cost and improve ROI.

In this post, I attempt to address some of the most pressing needs of WordPress users in terms of image optimization and compression. So, let’s dive right in.

Contents:

• List of Best Image Optimizer WordPress Plugins
• Best Free Image Optimizer Tool: The Two-Pronged Approach
• Optimize Images for Google PageSpeed Insights
• WebP Image Format: Why Google Recommends it

List of Best Image Optimizer WordPress Plugins

When it comes WordPress image optimization, there are many freemium plugins vying for your attention, offering a wide range of features to accommodate diverse users. Here’s a review of the most popular image compression plugins in WordPress.

• WP Smush Image Compression and Optimization
• CW Image Optimizer
• Shortpixel Image Optimizer
• EWWW Image Optimizer
• Tiny PNG
• Imagify
• Kraken

So why are these image optimizer WordPress plugins so popular?

I tried each one of them and here’s what I found:

WP Smush Image Compression and Optimization

With over 900,000 active installations, WP Smush is arguably the most popular plugin for WordPress image compression and optimization out there. The only problem is that, like any premium plugin, it has a limitation for free users.

CW Image Optimizer

Although CW Image Optimizer is not as popular as WP Smush or EWWW, it still does the job for you. Unlike any other plugins, it doesn’t upload your images to a third-party. So, if you have privacy concerns about other plugins, this is a good option for you.

Shortpixel Image Optimizer

With over 60,000 active installations, Shortpixel Image Optimizer boast of some unique features and benefits. It offers you 100 monthly free credits after which you need to buy their packages for additional credits. If you’re planning to pay for an image optimization plugin, read their in-depth analysis of all popular image optimization plugins.

EWWW Image Optimizer

EWWW Image Optimizer boasts of over 600,000 active installations. It offers a slew of benefits including Automatic Resizing, Bulk Optimize, WebP images, CDN support to name a few. It offers 500 monthly free credits.

Tiny PNG

Tiny PNG plugin has more than 100,000 active installations and pretty good reviews. Having reviewed positively by many users, this is definitely worth considering.

Imagify

Offering 25 MB monthly bonus, Imagify is a premium image optimization plugin that is just as popular as any other freemium plugins out there. With a massive 90,000+ active installation to brag about, this is an image compression plugin for serious WordPress users.

Kraken

Kraken is yet another contender in the WordPress image optimization world, with over 30,000 active installations. It offers 100 MB free monthly quota after which you can buy their monthly subscription.

Best Free Image Optimizer Tool: The Two-Pronged Approach

Personally, I believe in not using any image optimizer WordPress plugins for image compression. However, if your WordPress site already has a ridiculously high number of uncompressed images, then using a plugin to smush them may seem like the only solution.

However, if your WordPress site has only about 400-500 images, I suggest a two-pronged approach:

Tiny PNG Plugin: Run the Tiny PNG Plugin for the existing images. Once done, deactivate and uninstall it.

EZGif.com: Use this free image optimizer tool to resize and optimize your images before uploading them to media folder in future. Make sure to convert your .png files into the .jpg format using the PNG to JPG converter.

Optimize Images for Google PageSpeed Insights

When you test your website speed on Google’s PageSpeed Insights, you will often come across images that need to be further optimized and compressed.

If you’re testing your homepage URL, you will see all image files that have room for optimization.

If your goal is to optimize only those URLs so you could get rid of the warning and improve your PageSpeed score, then you can resize them within your media folder itself.

Here’s what you need to do:

Step #1: Add this code snippet to your functions.php file to display sizes of image files in WordPress media folder.

Step #2: Visit the URLs that PageSpeed Insights tool suggest optimizing.

Step #3: Install and activate EWWW Image Optimizer plugin.

Step #4: Locate those images in your media folder and click on the “Optimize Now” button to compress your images.

Optional Step: If you can compress your images to the recommended size, your job is done. However, if the PageSpeed Insights tool still shows some to be uncompressed, then you can optimize them manually.

Download those images, optimize them using ezgift.com tool (or similar tools of your choice) and then insert them in their respective posts again.

You should now see the “Optimize Images” warning vanish in the PageSpeed Insights test results.

WebP Image Format: Why Google Recommends it

Developed by Google, WebP is a brand-new image file format which provides superior lossless and lossy compression for images on the web.

According to Google Developer’s Team, WebP lossless images are 26% smaller in size compared to PNGs and 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

No wonder then why Google recommend using images in WebP file format.

However, there’s a problem.

Because this format has been developed by Google, not many popular browsers have support for this format.

But if you really want to experiment with this new image format, there’s a workaround for WordPress users.

Here’s what you need to do:

Add the following rules to your .htaccess file.

This rule essentially rewrites your .jpg/.png files and make them available for any supported browsers to display. The file name, however, remains the same. This is a win-win.

Did you find this guide useful?

Please, share your thoughts with us and this article with your friends.

Do you want to improve your WordPress site speed?

Well, that’s a silly question! Who wouldn’t want to boost their site speed and improve user experience!

However, the problem is it’s not really that easy to improve your score on Google PageSpeed Insights, especially if you’re looking to hit a 100/100.

To be honest, you should focus more on improving your user experience which is an ideal mix of site speed as well as great content.

Speaking of Page Speed, there are three different tools that are way more popular than others. They are:

• Google PageSpeed Insights
• Pingdom
• Gtmetrix

Each of these tools measures your page speed differently. However, for the most part, they factor in similar factors while evaluating your page speed.

You should aim at getting a green mark (safe zone) in all of these tools rather than obsessive over the elusive perfect 100.

With that in mind, let’s delve a little deeper into the Page Speed Insights.

Optimize Images: Reduce Your Page Size by 80%

Many content creators upload full-size images regardless of the actual size displayed in their articles.

This affects the page speed to a great extent.

If you’re testing your site speed on Pingdom, you will see that images can take up a sizable portion of your page size. In the screenshot below, you can see the images account for more than 80% of the overall page size. I can certainly take care of the page speed simply by optimizing the existing images on my homepage.

In fact, most often, websites with a score of 80 (or more) on Google PageSpeed Insights will have a lighter page size (e.g less than 400kb). At least, that’s true for most of my blogs.

It’s a good practice to resize your current images with a tool before optimizing your website for page speed.

NOTE: When you test your website on Google PageSpeed Insights, it only factors in the images displayed on your homepage. For example, if the homepage of your website has 10 different images of which 5 are not optimized, Google will recommend compressing them. If your aim to focus only on improving page speed of your homepage, you might want to compress them manually with the use of this free image compression tool.

I use ezgif.com for compressing images before uploading them to my website. Apart from image compression, this free tool also helps you resize, crop and convert images in different formats.

Pro Tip: You can reduce the size of your images simply by converting the .png files into .jpg files with a tool like ezgif.com.

Popular Image Plugins for Image Optimization

There are many plugins that can help you with optimizing your current images. However, most of them are available with the usage limit.

EWWW Image Optimizer: I highly recommend this free image compression plugin that allows you to compress image size individually as well as in bulk. It also supports .png to .jpg conversion.

WP Smush: WP Smush is a popular plugin for image compression. However, in many cases, it won’t compress an image beyond 100kb. However, if you’re a premium member, it allows you to override this limitation and compress it further.

Tiny PNG: This plugin is one of the best when it comes to optimizing images on your WordPress site. For free users, it only compresses 500 images every month.

Optimum Image Optimizer: While this plugin doesn’t have any limitations with regards to the number of images, it doesn’t compress your images beyond 100kb. Also, it doesn’t support some specific image formats such as .gif.

NOTE: There are many other plugins for image compression. Be sure to preview their installation count and popularity before installing them.

I recommend uninstalling (and deleting) third-party plugins from your WordPress site after using them unless you plan to use them on a daily basis. There’s no point in keeping a third-party plugin idle if you’re not going to use it very regularly.

Eliminate Render-Blocking Javascript and CSS in Above-the-fold Content

In order to improve your page speed, you need to eliminate render-blocking javascript and CSS in above-the-fold content.

In plain English, this essentially means when someone visits your website on a mobile or desktop device, the priority content (e.g. text and images) in the above-the-fold area should load quickly.

Usually, most websites are built such that the javascript and CSS files load first before other content gets a chance to appear.

Needless to say, this negatively affects the user experience especially when your visitors view your website on a slow internet.

If you’re seeing this warning on Google Pagespeed Insights, you need must be using one or all of the following:

• Google Fonts
• Font Awesome

NOTE: Usually, many people enqueue scripts (e.g Google Fonts, Font Awesome) via functions.php file, which results in getting you a warning in Google Pagespeed Insights.

So, let’s see how to deal with these issues/warnings.

Remove Render-blocking Javascript:

In order to remove your render-blocking javascript, install, activate and configure the Autoptimize plugin.

Configure the plugin in the following ways:

• Under JavaScript Options uncheck “Force JavaScript in <head>?”
• Under CSS Options check “Inline all CSS?”

Don’t forget to click on the save changes button.

Remove Render-blocking CSS:

First of all, comment out or delete the code snippets for Google fonts, Font Awesome and Dashicon in your functions.php file.

Then try to install them in the following ways:

Google Fonts: To install Google Fonts asynchronously, add the following code to the footer section of your theme. To change font family, refer to Google Fonts.

Font Awesome: Enter the following code in the footer section of your theme.

Leverage Browser Caching

Google recommends setting an expiry date or a maximum age in the HTTP headers for static resources. This helps the browser make fewer round trips to server static content and results in faster page speed. If you want to learn more about this, visit Google’s guide on how to leverage browser caching.

Here’s how to do it:

The HTACCESS Method

Add the following rules to your .httaccess file.

The Plugin Method

If you’re not familiar with .htaccess, use any of the following plugins:

• WP Fastest Cache – WordPress plugin
• Browser Caching with .htaccess – WordPress plugin
• W3 Total Cache – WordPress plugin

While you can set an expiry date for files hosted on your server, you can’t really do it for any files hosted on an external server.

If you’re seeing any warning related to Google Analytics in Google Pagespeed Insights, you can’t set an expiry date for it via the .htaccess file.

Fortunately, there’s a nice workaround.

Instead of adding the analytics tracking code in your footer, use this analytics optimization plugin.

Simply install and activate the plugin, and enter the value (e.g your tracking ID) as shown in the screenshot below:

Don’t forget to choose footer as the position of your tracking code.

Minify HTML, CSS and Javascript

In order to make a page lightweight, you need to compress your HTML, CSS and Javascript files.

This can be easily done by Autoptimize plugin which we installed earlier. Simply, head over to the Settings > Autoptimize > Autoptimize Settings and make the following changes.

• Optimize HTML Code
• Optimize JavaScript Code
• Optimize CSS Code

Don’t forget to click on the save changes button.

Enable Gzip Compression

Gzip is a method of compressing files (making them smaller) for faster network transfers. It’s also a file format.

Some hosting companies enable this feature by default. For example, my web hosting company, Webfaction has already enabled this feature.

If your web hosting company hasn’t enabled Gzip compression by default, you can enable it by adding the following rules to your .htaccess file (on Apache server) or nginx.conf file (on Nginx server).

Add the following rules to your .htaccess file

Add the following rules to your nginx.conf file

Reduce Server Response Time

This is purely a hosting related issue. If you’re seeing this warning on PageSpeed Insights, this essentially means you need to upgrade to a better server. Also, implement CDN (Content Delivery Networks) service such as Amazon CloudFront CDN service. However, getting a server response time warning doesn’t mean you cannot get a higher score (above 85-90) in PageSpeed Insights.

That’s it!

Go to PageSpeed Insights tool and run the page speed test for your website again. If you have followed the instructions correctly so far, your website should get a score above 85 in the tool.

Here’s a realistic scenario:

Before Page Speed Insights Optimization 

After Page Speed Insights Optimization

If you find this guide helpful, share it with your friends and coworkers.

Are you looking for premium fonts with a FREE Download option? Fonts play a key role in the overall design scheme of a website. Choosing the right fonts is important as it reflects the brand of your website.

While Google Fonts offers a wide range of free fonts to choose from, there are times when you want to have a unique look for your website. This is where premium web fonts come into the picture. Moreover, sometimes, the combination of Google fonts and premium web fonts can also offer your website a unique appeal.

The only problem is many premium fonts can cost you an arm and a leg when want to buy a complete bundle of fonts. Some fonts require you to pay a monthly subscription depending on your views. In short, if your website budget doesn’t let you use premium fonts, you should stick to Google Fonts.

However, for those who want to download premium fonts for a limited use, this guide can be of help.

Disclaimer: This guide is designed to help you use download commercial fonts for free as long as you use them for personal use. Downloading commercial fonts illegally is likely to cause you legal trouble. If you’re doing a school project or personal project, you can directly contact any font license distributor. Some of them can allow you to download fonts as long as your use is limited to non-commercial projects.

I highly recommend paying for commercial fonts since it’s an ethical approach and the best way to support artists.

Steps to Use Premium Web Fonts on Your Website

Here are the steps to use premium web fonts on your Website.

Step #1: Recognize the Font Family — Use this Chrome Add-on

The first step to downloading commercial fonts for free begins with recognizing the font family. This is where WhatFont chrome add-on does the job for you.

If you’re using Chrome browser, simply install WhatFont add-on and click on the text of any website. It not only tells you the exact font but shows the associated css styles such as font-size, font-weight and color hex code (e.g #fff for white and #000 for black).

Step #2: Check with a Font License Distributor — Is it FREE?

So you love a particular font and want to use it on your website?

The first thing you should do is see if it’s available for free download on Google Fonts. If it’s not there, it’s possible a commercial font and available with any font license distributor.

There are many font license distributors such as FontShop, MyFonts, Typekit, Font Squirrel and so on. However, my personal favorite font license distributor is FontSpring.

FontSpring lets you download demos and you can use the demo fonts on your website before you decide to buy them. They call it a Fair Fonts policy.

If you’re lucky, you can also find many fonts for free download — yes, they are completely free. No string attached!

Step #3: Search for the Fonts on Google — Keywords You Should Use

What if your favorite premium font is unavailable for free download? It’s time to turn to Google. Simply search for your favorite font’s name with free download and you will come across some websites that let you download those fonts free.

The other trick is to search font within Github repository. For example, if you want to download Proxima Nova, head over to Google Search and type “Proxima Nova + Github”. You will see results from Github.com with links to font files.

Step #4: Downloading and Converting Fonts for Website Use – The Right Way

Usually, the font files are in the otf file format. But you need to convert them to woff and woff2 file format to be able to use them on your website. This is where you need a font generator. A font generator essentially converts a font file with a particular file format into the desired format.

There are many FREE font generators out there. However, my favorite is Transfonter because it allows you to upload and convert any font without any restriction. I’ve used Font Squirrel font generator but in many cases, it doesn’t let you upload font files belong to a particular font family.

The process of converting a font file is pretty simple — all you have to do is click on the “Add fonts” button and then click on the “convert” button.

When the conversion is complete, click on the download button to download the font files in desired formats. Usually, the downloaded folder is zipped and include necessary files such as CSS files and a demo file apart from the font files in woff and woff2 file format. Unzip the folder and proceed to the next step.

Step #5: Uploading Web Fonts — Things You Should Keep in Mind

This is often the most important step of all. If you’re  unable to install the fonts or calling the fonts via CSS file, your fonts won’t appear on your website at all.

First of all, you should have work knowledge with any FTP client. If you’re able to do it, you can contact me to do it for you for a nominal fee.

Let’s take the example of FileZilla, the popular FTP client. Log in to your FTP client, go to your website’s active theme folder (I’m assuming you’re on a self-hosted WordPress site) and create a new folder named “fonts”.

Upload the two font files having .woff and .woff2 format to your fonts folder.

Then, open the css file in the downloaded folder, and copy the css code.

Past the css code towards the top of your styles.css file of your active theme.  Change the path of your fonts in the following way.

Example of CSS Code for Premium Font Installation:

After pasting the appropriate CSS code, save the styles.css file in your active theme.

If you want to test your new fonts on your site. Head over to Google Chrome Inspector and test your new fonts by changing the value under font-family as shown in the example above. If you’ve followed the guide correctly, your new fonts should appear. Once you have decided the font-size, font-weight and font color, you can go back to your styles.css file and apply the css code.

If you’re unable to follow any of the steps, contact me and I will help you.

If you’re a self-hosted WordPress user who turns to Google Docs to write blog posts on a daily basis (just like me), you know the drill.

After writing your draft and proofreading on Google Docs, you have to copy and paste the content into WordPress Visual Editor and clean up the extra formatted code manually.

While WordPress Visual Editor has an option to “clear the formatting”, it’s limited to what it can actually clean up. When you click Text Editor, you will see your paragraphs are wrapped in extra code and styles that you don’t really need.

You can’t leave that behind as the extra code will increase the page weight especially when you have too many paragraphs in your article.

The only option for you is to remove those styles manually. This is not only time-consuming but frustrating as well.

If you’re looking for a solution, here are four options you can try to connect Google Docs to WordPress.

Option #1: Using Jetpack Chrome Extension

This method adds a “SAVE” button to your Google Docs and lets you save your work on your WordPress blog automatically.

Requirements for this Method:

1. You should install Jetpack Plugin on your WordPress blog
2. You should connect your WordPress blog to your WordPress.com account
3. You should install a Jetpack Chrome Extension on your Chrome browser
4. You should allow the Chrome browser to access your WordPress blog

To begin with, install and activate the Jetpack plugin on your WordPress blog. Then click on “Connect to WordPress.com” button to connect your self-hosted WordPress blog to your WordPress.com account.

Head over to your Chrome browser, search and install this Chrome extension developed by the Automatic team. When prompted, click on “Allow” button to let the Chrome extension to access your documents.

In your Google Docs, click on “Add-ons” in the toolbar and then visit “WordPress.com to Google Docs > Open. Once you choose the open option, the chrome extension will ask you to choose the blog (if you have multiple blogs) you want Google Docs to connect with. Once done, you can see panel on the right-hand side of your Google Docs.

Now, you’re all set to send your content on Google Docs to your WordPress blog without worry about doing any frustrating copy-paste or clean-up job.

All you have to do is write your draft and click on the “SAVE” button.

Downside of this Method:

While this method makes it easy for you to connect your Google Docs to your WordPress blog, the Jetpack plugin can slow down your site a bit since it will send extra requests to your servers. If you’re already using Jetpack plugin on your blog or don’t care about page speed, it shouldn’t bother you. Moreover, it doesn’t export the fine name of your images. To do that, you need to upload them manually to your media folder. Perhaps, Jetpack should fix this issue in the next rollout.

Option #2: Copy-Paste Method: Cleaning Up Extra Code

If you’re not comfortable with the idea of installing Jetpack plugin and/or Chrome add-on, there’s a workaround which will save you tons of time it takes you to remove those additional styles in the WordPress Text Editor manually.

Thanks to Kinsta team who shared this trick, this method requires you to copy and paste the content thrice in the following manner:

Step #1: Copy and paste your content from Google Docs to your WordPress Visual Editor.

Step #2: Open a New Document on WordPress (preferably in another tab) and copy and paste content from your first visual editor to the second visual editor. At this point, you will see the extra styles (causing line breaks) have been automatically removed from your duplicate post.

Step #3: Copy and paste the content from the duplicate post to the visual editor of the original post. Then select the content and click on “Clear Formatting” button, you will see the extra styles in the paragraphs have been removed. However, styles for headers (H2 and H3) and hyperlinks remain intact.

Downside of this Method:

Even as this is an improved method, it can still feel messy if you consider the number of times you have to copy your content back and forth. Moreover, it doesn’t retain the styles for bold. If you’re okay with doing the extra work, this method should work like a charm for you. At least, better than installing Jetpack plugin and a Chrome add-on.

Option #3: Using Mammoth .Docx Converter Plugin

If Option #1 and #2 don’t rock your boat, this method can feel much better. The Mammoth .Docx Converter plugin lets you upload your draft to WordPress post in a file .docx format and helps you retain the styles you have used in the .docx document.

Here’s how it works.

Once you’ve written your draft on Google Docs, head over to File > Download As > Microsoft Docx, and download your draft in a .docx format.

Then in WordPress blog, install and activate the Mammoth .Docx Converter plugin. Open a new document and click on the visual editor tab. Scroll down to the bottom and you can see the option to select and insert your .docx file.

This plugin retails all the formatting you’ve done in the Google Docs draft, whether it’s headers, bold formatting or lists. Moreover, it also exports your images with their original file names.

Downside of this Method:

There’s no downside to this method as such; however, if you’re a Mac user, you wouldn’t really fancy downloading a file in .docx format merely to upload it to your WordPress visual editor. It might work for many others though. As they say, to each his own.

Option #4: Using Wordable, a Premium Service

If all of the ideas above sound like a lot of work, and you wouldn’t mind spending on a premium service (with a monthly subscription), then Wordable is just for you.

Wordable pretty much works the same way as the Jetpack Chrome plugin does, but it saves you from installing the Jetpack plugin or Chrome extension.

After signing up with Wordable, you just need to allow the service to have access to your Google Docs. Then install and activate the Wordable plugin on your WordPress blog.

Wordable adds an “Export to WordPress” button to your Google Drive, letting you export your draft in Google Docs to WordPress seamlessly.

This being a premium service does a pretty neat job in terms of retaining all your formatting. Moreover, it also saves the images to your media folder in WordPress, meaning you can compress them using any third-party plugin such as Tiny PNG.

Downside of this Method:

If you’re concerned about letting a third-party service access your Google Drive, this method may not work for you. However, knowing that many popular companies such as Copyhackers, Mention, and GrowthLab use their services, you can rest assured on the security front. Again, this method may not be suitable if you can’t set aside $19 for a monthly subscription. However, if you’re a serious blogging with a large team to collaborate, Wordable couldn’t come recommended highly enough.

So, which of the above methods do you like the most?