In this brief tutorial we are going to take a look at how you are able to use Themer to simplify the process of finding the most suitable font(s) for your Magento or WordPress site. In this case, as an example, we will be showing how to change font on WordPress.
Why you should use Themer for this?
You will find that the approach described here has some really useful advantages over using for example Photoshop to test how one or another font suits your site’s design. For example with Themer you are easily able to:
- Navigate through all the pages of your site and click on any text element and simply choose the font that you think fits best.
- Choose from 624 (and counting) Google fonts that are all web ready and don’t require you to use any special techniques in order for them to display correctly on all browsers.
- Hit the Save button and the fonts you’ve chosen are saved to your theme (or to be more precise, saved to the Tune you are later able to attach to your theme to make your changes live and visible to the public).
This is literally all you need to do to change font on Wordpress or Magento themes’ to give your site this professional unique look with some simple changes to the typography
Now let’s take a bit closer look at this process and go through it step-by-step to see how easy it really is.
How to change font on WordPress theme using Themer?
We are going to assume you already have a working instance of Magento or WordPress set up on your server and Themer installed.
In case you haven’t downloaded Themer yet and would simply like to follow through this tutorial you are also able to so by using our demo environments here (Magento) and here (WordPress).
So let’s get this show on the road..
- Fire up your browser and log in to the admin of your WordPress or Magento.
- Choose Themer from the top (Magento) or left (WordPress) menu.
- Choose either existing Tune from the grid or click “Add new” to launch Themetuner.
- If you are using the free version of Themer for WordPress you should simply skip step 3 and click “Launch Themer” instead.
- Now this is where it gets interesting. As you can see you are now shown the theme you chose a tune for in the previous step. With a simple click on any of the text elements on your theme you can see an editor showing up to the bottom of your screen.
- When you’ve selected a text you want to change you should see a red dotted border surrounding the text block. This means you are ready to start styling the block of text you’ve chosen.
As you can see the very first setting on the style panel is “Font”. A click on the font dropdown brings up a large list of fonts you are able to select your font from. Just choose any of them now and see how this changes the font on your Theme.
- You can now repeat Step 5 on all the other text blocks on the current page. When you are done and want to move on to the next page then simply click “Save” (it is always a good practice to save your work every once in a while – same applies to Themer). Now switch your Themer from Edit mode to Navigation mode to make the links on the page functional again so you could navigate to the next page and repeat Step 5 again.
- Repeat steps 5 and 6 until you are done with the whole site.
As you’ve probably already noticed you can not only change the font family with Themer but other parameters of your text styling as well.
With the same ease you are able to change your font size, font and background color, weight, alignment and even line height or letter spacing.
You are also able to change size of the text block and move it around the page. More about this in the following tutorials.