How to Add Custom Fonts to your Genesis Child Theme

How to Add Custom Fonts to your Genesis Child Theme

Adding a unique font to your website is a great way to make your design stand out online.

In this post, I´ll walk you through the step-by-step process for adding any font to your website.

How to Add Custom Fonts to your Genesis Child Theme

UPLOADING AND USING CUSTOM FONTS IN GENESIS CHILD THEMES

1) Download the font to your computer and extract files if necessary.

Dafont and FontSquirrel are a great source of fonts that are free for commercial use.

I have several posts with awesome fonts for your project:

If you would like a more premium/unique font, you can use Creative Market.

The font I’m using in this tutorial, Simplicité, was purchase on Creative Market ($19)

 

How to Add Custom Fonts to your Genesis Child Theme 02

2) Create a WebFont Kit for cross-browsing

Upload your .ttf or .otf file to the Webfont Generator and then download your Web Font Kit.

You´ll di

How to Add Custom Fonts to your Genesis Child Theme 03

Now your fonts are ready for the web, you can add them to WordPress. Thankfully, as is often the case with WordPress, this is a relatively simple process thanks to the power of plugins. Let’s dive in.

Typically this kit will include multiple file extensions such as  (.woff), (.woff2) and (.css).

3) Upload the font files to your website

Upload your font file to wp-content/themes/your-theme/fonts directory. Create a separate fonts folder if you don’t have one yet.

You can use an FTP client like FileZilla or Hosting File Manager for this task. In our example,

You have to upload (.woff) (.woff2) archives.

I have uploaded hv_simplicite_regular-webfont.woff and hv_simplicite_regular-webfont.woff2 archives using the File Manager in hPanel.

To upload a file through cPanel’s File Manager, please do the following:

  1. Login to cPanel and open the File Manager.
  2. Navigate to the folder where you want the upload to be located.
  3. Click on the Upload icon from the top toolbar.

File Manager - Upload Button

 

 

 

 

 

 

 

4) Tell WordPress where to find the font

Open the CSS file in a text editor such as Textedit, NotePad or Sublime.

You´ll find a code like this:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('hv_simplicite_regular-webfont.woff2') format('woff2'),
url('hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Replace the existing source URL with the new URL you created by uploading each file.

After update:

@font-face {
font-family: 'customfont';
src: url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/yourtheme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

 

Then, go to Appearance > Customize > Additional CSS  > add the following code.

Replace the existing source URL with the new URL you created by uploading each file.

By default, the source URL location is set within the downloaded Web Font Kit. It needs to be replaced by the location on your server.

Here’s my font:

@font-face {
font-family: 'hv_simpliciteregular';
src: url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff2') format('woff2'),
url('wp-content/themes/Meryl_Theme/fonts/hv_simplicite_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Importantly, make sure you change the font name and the URL (copy the URL for the font file on your server).

You can then go ahead and use CSS rules to update the fonts on your site. Here’s an example of how to apply the custom font to Header 3 and paragraph sections…

5) Assign the font to elements style (headings, body, etc..)

Now you have to define which elements will use the new font.

To assign to the headings:

h1, h2, h3 {
font-family: 'font name';
}

To assign the font to the body (all content):

body {
font-family: 'font name';
}

For example, I want to assign the font to theme title´s:

Here’s the final result:

5 easy ways to improve WordPress site loading speed

5 easy ways to improve WordPress site loading speed

The biggest advantage of lowering your website’s loading time is that it will help tremendously in improving site’s usability and user experience which is essential for today’s online business.

There are many ways to get started with top-end optimization. Here are 5 ideas to get you going.

1. Get a good Web Host

The major factor that influences the speed of a website is the hosting of your WordPress website. I have used many servers but the best option in terms of speed and service is without a doubt SiteGround. They provide excellent loading speed and customer support guaranteed 24/7.

2. Use an effective catching plugin

WordPress pages are “dynamic.” This means they’re built on the fly every time someone visits a post or page on your website. To build your pages, WordPress has to run a process to find the required information, put it all together, and then display it to your user. A cache plugin generates static pages and improves the site pagespeed 2-5x faster. The cached pages are stored in the memory and when a user makes a request the pages are delivered from the cache. By this the php execution and the database requests are skipped. There are a lot of good WordPress caching plugins available, but I recommend using either WP Fastest cache (free) or LiteSpeed Cache (free) plugin. WP Fastest Cache was rated the #1 (free) cache plugin in this Facebook poll.

3. Compress your images

According to httparchive, in August 2016 the images are more than 64% of the weight of an average website. Usually they tend to weigh more than all of your CSS, JS and HTML combined! If you have a website with lots of images you must optimize them to reduce the size. By reducing the image size, you´ll reduce web page size overall and save server´s bandwidth. There are multiple ways to optimize the images, but doing without losing quality is the smart way. In this article, I’ve covered three types of tools.

Compressor

Compress and reduce your image size up to 90% with Compressor while maintaining high-quality resolution. It supports JPEG, PNG, GIF & SVG and files size limit is 10 MB.

WebP Express

WebP is a raster image format from Google that’s designed specifically for the web. It provides lossless and lossy compression that allows web designers to show richer images at smaller file sizes. WebP lossy images use predictive coding to encode the image. It reduces the file sizes by looking at the neighboring pixels to predict the values, and then only encodes the differences. Lossy images are up to 34% smaller than the comparable image as a JPEG and 26% than the same as PNG.

4. Avoid using unnecessary plugins

Excess plugins can make your job harder and more complicated than it needs to be and could affect the performance as well as the security of a website. Actually, many times we have installed and activated plugins that we do not even know what they do or how to configure them. So why do we have them there without doing anything consuming resources?

5. Keep your site up-to-date

WordPress is updated frequently. Each update will not only offer new features but it will also fix security issues and bugs. Your WordPress theme and plugins may have regular updates, too. As a website owner, it’s your responsibility to keep your WordPress site, theme, and plugins updated to the latest versions. Not doing so may make your site slow and unreliable, and make you vulnerable to security threats.

How to fix blurry photos in WooCommerce

How to fix blurry photos in WooCommerce

Many people who have bought some of my WordPress themes ask me How to fix blurry photos in WooCommerce so I´ve decided to make a really fast instructional tutorial.

If you’re having issues with your WooCommerce product images being too small, blurry or too big, this may be because of the image you’ve uploaded do not match your WooCommerce product image settings.

 

 

  1. First of all you should enter site admin panel and navigate to Appearance > Customizer  in your WordPress dashboard.

2. Click on the WooCommerce option and select select Product Images.

3. Under the Products Images tab you should see the Display option, which defines the product images dimensions Width X Height in pixels. We need to change them.

Main Image Width  is for your images on the shop page and for widgets.
Thumbnail with Single is for your images on the single product pages.
Thumbnail cropping 

4. The minimum suggest width for main images is 600px and > 300 px for thumbnails

5. Once you have made your changes to the image dimensions, click ‘Save Changes’.

6. If you change the image dimensions after you have uploaded product images, you will need to download and run the Regenerate Thumbnails plugin just once Regenerate Thumbnails – this is to ensure that all affected images are resized to match the new dimensions.

The end!

That concludes my tutorial for fixing the blurry product images on your WooCommerce shop.

 

How to add an image link in your WordPress sidebar + FREE banners

How to add an image link in your WordPress sidebar + FREE banners

Recently one of my customers asked me How to add an image link in your WordPress sidebar. By default, WordPress has only a text widget so you need adding HTML code manually. But, no worries, if you don’t know HTML, I will show you an easy trick to get around that.

This is really useful if you want put a logo, sponsors and internal links to your website.

 

How to add an image link in your WordPress sidebar

  • In your dashboard, create a new post or page and  and add an image from your library or computer.

how-to-add-an-image-link-in-your-wordpress-sidebar-01-lovely-confetti-tutorial

  • Once you have uploaded and inserted your image, click on the image and then click on the pencil icon (see below).

how-to-add-an-image-link-in-your-wordpress-sidebar-02-lovely-confetti-tutorial

  • A new window will pop up with information about your image. Now you can select Link to – custom URL and enter your URL.  If you want your image to open in a new window, set the target”open link in a new tab”.

how-to-add-an-image-link-in-your-wordpress-sidebar-03-lovely-confetti-tutorial

  • Tab over to the text mode and copy all HTML code.

how-to-add-an-image-link-in-your-wordpress-sidebar-04-lovely-confetti-tutorial

3. Go to Appearance > Widgets and drag-drop a text widget to your sidebar where you want to display the image, add a title text if you like and paste code.

how-to-add-an-image-link-in-your-wordpress-sidebar-03-lovely-confetti-tutorial

  • Delete that post or  save it as a draft for easier editing in case you decide to change things up again in the future.
  • Now visit your site and click on the linked image to verify that the link works as expected.

how-to-add-an-image-link-in-your-wordpress-sidebar-06-lovely-confetti-tutorial

  • You can add more images, delete the spaces between the photos and copy/paste code like my example.

FREE BANNER IMAGES FOR YOUR WORDPRESS SIDEBAR:

And as a bonus, you can download these free banners images in .png and .psd format if you want edit text, colors and images!

free-banners-free-library-how-to-add-an-image-link-to-wordpress-sidebar-lovely-confetti-tutorials

Join our mailing list to get access to our free resource library and download these free bannes instantly!

Get these FREE image banners

How to add a pin it button to your WordPress site + Free button images

How to add a pin it button to your WordPress site + Free button images

In this this posts I show you How to add a Pin it button to your WordPress site. I love Pinterest, I believe It’s a great tool for promoting and driving traffic to your blog.

I confess spend hours there just scanning and pinning. It´s perfect if you are planning your ideal wardrobe or styling for an event, your next living room remodel, or finding a delicious dish to take along to a party, your next DIY project,…

If you’re looking for an easy way to pin images in your blog posts and pages, there is an awesome plugin called jQuery Pin It Button For Images,  that will help you with that. I love this plugin because it allows:

  • Upload your own Pin it button.
  • Choose position where you want show up “pin it” button.
  • Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  • Disable showing the button on certain posts and pages.
  • Choose level of transparency when you hover over images.

HOW TO ADD A PIN IT BUTTON TO YOUR WORDPRESS SITE:

Install jQuery Pin It Button For Images Plugin

  1. In your WordPress dashboard, hover over Plugins.
  2. Choose “Add new”.
  3. Type “jQuery Pin It Button For Images” in the box and press “Search Plugins”.
  4. Once you have located the plugin, click Install Now.

How to add a pin it button to your WordPress site - Tutorial - 01 - Lovely Confetti WordPress Themes

Configure jQuery Pin It Button For Images Plugin

Selection:

  1. Go to dashboard > Settings and select “jQuery Pin it button images options” and click on the tab Selection at the top of the page.
  2. Choose if you want to show the “Pin it” button on home page, single posts, single pages or category pages.
  3. Save changes.

Visual:

  1. Go to Visual at the top of the page to access the second page of settings.
  2. Asign transparency value, for example 0.5.
  3. Check the box “Use custom image” and then upload your custom Pin it button using the button below.

5. Now you can choose the pin it button position where you want it (Top left, Top right, Bottom left, Botton right or middle) and adjust margins. (I usually choose top left and 20px for margins).

6. Else It´s possible optimize your pin it button for retina displays. In this case, make sure you upload a “Pin it” button that is twice the size you want it to display.

7. Now, save changes.

 

FREE PIN IT BUTTON IMAGES FOR YOUR SITE:

And as a bonus, you can download my free “Pin it” button images for you! If you like these, subscribe to my free library and download the zip files (.png and .psd) so you can change colors in Photoshop to match your brand and use them on your site.

free-pin-it-buttons

Get this Free Pin it buttons

Pin It on Pinterest