Use WOO Themes Canvas and Google Fonts to design your logo

I’m using a theme that only allows for an image for a logo. But I want to use a text site title. Canvas to the rescue.

I’m using the so-far-so-great Avada WordPress theme and loving it. But I wanted just a simple site title from a Google font, but it only allows an image. Hmm. No, really, I just want a text title! Sorry, no can do.

I poked around for some tool that would let me use Google fonts to build a simple site title. Of course, I could use Photoshop or Pixlr or something, but I thought what I wanted was so simple. Something that WOO Themes Canvas can do with ease.

Aha, maybe just use Canvas. So I did.

1. Set your site title and tagline in WordPress general settings

Canvas uses the actual site title and tagline of your site. If you’re just using this for a logo of another site, just put it in temporarily while you work on your logo.

Add New Post ‹ WordPress U — WordPress

It uses your WordPress site name and tagline

2. Set your styles in Canvas

Under Styling –> Header, change the size, Google font, font weight and color of your text. Do both the title and the tagline. Play with font sizes to get the tagline to fit nicely under the title (note that I didn’t do this in my example!)

Just choose your Google font for the site title and description (tagline).

Just choose your Google font for the site title and description (tagline).

3. Check your work on the live site in the header

Old school option is to just do a screen grab of the header to get the image.

Old school option is to just do a screen grab of the header to get the image.

4. Uh, actually there are only 3 steps. Below are screenshots of the logo in action over the Avada theme.

Use image as logo in non-Canvas site.

Use image as logo in non-Canvas site.

The Avada theme automatically resizes the logo when you scroll down the page and you have the header area set to sticky (so it stays visible in the screen). Hmm, maybe this is why they needed an image, so it can be resized?

Even resizes to smaller version of logo.

Even resizes to smaller version of logo.

2017-05-25T22:49:51+00:00

About the Author:

I've done the big corporate thing. I've done the creative writer thing. Now I'm happily in the middle. I like to help small businesses who are interested in "working their website before their website works them." I'm also interested in creating beautiful sites with powerful WordPress themes. Google+

One Comment

  1. Phil Ainley February 22, 2017 at 8:13 am - Reply

    Hi Bradley,
    I hope you can help me.
    1 – I am building a test website (http://fopm.co.uk/eds) and I’d like to be able to control the width of the drop down menus so they sit flush with the divider line.
    Could you tell me if there is any css that could help with that please?
    I’ve done a mega internet trawl for this but not found a solution yet.

    2 – Also, Woo Search only appears to be searching my Posts pages, do you know of a Search plugin that will search a whole website? I was thing about Advanced Woo Search, but I’m open to suggestions.

    Thanks for any help you can provide.

    Thanks and regards,
    Phil

Leave A Comment

CommentLuv badge

css.php

Pin It on Pinterest

Shares
Share This