Using custom fonts and colors on your WordPress site

How to customise the fonts and colors of your WordPress site

Customising the look and functionality of your site

Giving your site style using the Klasik theme

From this point onwards, the tutorials are aimed specifically at artists wishing to create a site with the Klasik WordPress theme. I’ll talk you through step by step how to build the pages so that your site displays similarly to DarenRedman.com. Of course it will still be highly unique, as the text and images will be yours, and you can choose custom colours and fonts.

This chapter is fairly long so if you prefer to tackle it in sections, here’s a list of how it is divided. Click on the links to jump to the corresponding section.

[ezcol_1half]

Giving your artist website a unique look with fonts and colours

In Planning your Artist Website we talked about choosing fonts and colours for your site to make it unique and explored some useful tools to assist you. Now, we’ll implement those choices to give your site its individual style.

I have used just one font style throughout the whole of Daren Redman’s site to give it a clean and consistent look. The Klasik theme uses Google fonts specifically and there are hundreds of options; check them out here.

The font I selected was Raleway.

[/ezcol_1half] [ezcol_1half_end]

Font options for your artist website

[/ezcol_1half_end]

Font colours

I have chosen 3 font colours: one for the main title of the site (the logo), one for all other titles on the site (like page titles and subheadings) and links and one for the main body text. You may want to use a different link colour, which would take the total to 4. Any more font colours than this and your site will start to look busy and unprofessional. You’ll need to know the Hex values for your colours. The Hex value is the code that tells browsers which colours to display on your site. The shades in your artwork are a good place to start when looking for colours.

For more guidelines see Planning the colours and fonts for your site.

I suggest you make a list of the colours you want to use and where you’d like to use them so you have a handy reference.

[ezcol_1quarter]

Select a color for your main title and links

Main logo & links
Hex value: #D6370D

[/ezcol_1quarter] [ezcol_1quarter]

Choose the colors for the subheadings of your art site

Subheadings & navigation
Hex value: #36422A

[/ezcol_1quarter] [ezcol_1quarter]

The colour of the font for the main paragraph text should be dark enough to stand out against a light background

Paragraph text
Hex value: #767575

[/ezcol_1quarter] [ezcol_1quarter_end]

Try a subtle colour for the background of your site - nothing that will upstage your artwork

Background content area
Hex value: #E8E9EA

[/ezcol_1quarter_end]

How your site will look with your new font colours

Adding custom fonts and colours in the Klasik theme

Once you have chosen the colours and fonts you wish to use on your site, you can implement them very easily in the Klassik theme.

1. Go to the WordPress dashboard. Hover over ‘Options’ and click on ‘Branding’.

Changing the branding for your artist website with the Klasik theme

2. Under ‘Custom Font’, choose the font you have selected for all the main content on your site (the paragraph text). All Google fonts are listed in the dropdown menu. On Daren’s site I used Raleway.

Select a Google font for your site content

3. Next scroll down to ‘Background colour’. The background colour will fill the space between your main content area and the edge of the browser. Remember to keep this colour subtle – nothing that will upstage your artwork. I chose a light grey for Daren’s site (#E8E9EA). Remember to enter to the Hex value.

Homepage of your new artist website with the new font and colour settings

4. Now, under ‘Content color’ choose the colour for the main content area. Again something light that will make the images stand out is preferable. I chose a very subtle off-white colour (#fdfdfd). If you don’t want any distinction between the background and the content area, set them both to the same colour.

Content colour of your WordPress site

5. Now set the ‘Bucket’ and ‘On Hover’ colours. I recommend you choose the same colour for both. This is the colour that will show as a background when you hover over the images on the homepage when their title appears. To keep a consistent look, I chose the same grey that I used for the background of the entire site.

Hover colour should be light enough for the text to stand out

6. Finally on this page, choose the colour for the footer icons. The footer icons are social media icons that link to your social media profiles (such as Facebook and Twitter). We’ll choose which social media networks to link to later. For now, enter the colour you’d like them to be. I chose a dark green that I picked out from one of Daren’s pieces of artwork (#36422A).

The social icons will display in the colour you select in your WordPress theme settings

Once you have completed all the fields the ‘Branding’ page should look something like this (but with your own choice of colours replacing the ones I have used). Don’t worry about the settings I’ve ignored (like ‘Background pattern’) – just leave them as they are.

The Klasik theme settings screen in WordPress

7, Click ‘Save Options’ under ‘Publish’ in the top right hand corner of the screen.

The branding page of the Kalsik theme in WordPress

Customising the header

Now you’ve set the general fonts and colours, it’s time to get more specific, starting with the header – the area that appears at the top of every page on your site.

1. Go to Options>Header.

How to customise the header on your new artist website

The first option is to upload a custom favicon. The favicon is the tiny image that displays in the address bar next to the site URL. If you don’t upload a custom favicon, the logo of your hosting provider will be displayed (in our case Bluehost).

For branding purposes I’d recommend designing a simple favicon measuring 50×50 pixels using the same colours and fonts you’ve chosen for the rest of the site. You can do this fairly simply in Adobe Photoshop or Illustrator. If you don’t have either of those programmes, a quick Google search for free graphic design programmes will return many useful results. Alternatively if you’d like TextileArtist.org to design you a favicon and a site logo get in touch here.

2. Once you have a custom favicon, simply click ‘Add image’.

Add an image to your header in the Klasik portfolio theme for WordPress

3. On the next screen click on ‘Upload’.

Upload a logo for your artist portfolio header

Then drag and drop the image from your computer into the window.

Drag and drop the favicon image file into WordPress

[ezcol_1third]

Enter some information in the ‘Title’ field. It’s also a good idea to enter information in the ‘Alternative text’ field (the text that will display if the image is unavailable) and the ‘Description’ field. Try to use words that are pertinent to you as an artist (what might people search for in Google when looking for an artist like you?). We’ll explore search engine optimization (how to be found in Google and in other search engines) more thoroughly later on, but for now go with your instinct. As a basic, I simply entered Daren Redman textile artist – this tells Google the site is about a textile artist called Daren Redman. Ignore the ‘Caption’ field for the favicon.

[/ezcol_1third] [ezcol_2third_end]

Give the image a title and some alt text

[/ezcol_2third_end]

4. You will now go through the same process with a ‘Logo’ if you have one (contact us here if you’d like us to design one for you). The logo I designed for DarenRedman.com is 250 pixels wide and 40 pixels high. Upload it using the same process as for the favicon.

Add a header image in WordPress

5. Don’t worry if you don’t have a logo – you don’t need one. If you want to simply enter text to use in place of a logo, enter the name of your site under ‘Text logo’.

Then set the colour, the font and the font size for the logo. You can adjust all of this later if needs be, but to start off try setting the size to somewhere between 15 and 20. The site logo can be a good place to be creative with fonts; if you want the logo to stand out try using something different and slightly more elaborate to whatever you selected as the main font.

If you don't have a specially designed logo, select a colour for your site heading in the Klasik theme settings

6. Finally enter the Hex values for the ‘Sub-menu color’ and the ‘Sub-menu hover color’. I’d suggest using the same colour as your ‘Container color’ (that you entered under Options>Branding) for the ‘Sub-menu’ and perhaps the same as your ‘Background colour’ (again under Options>Branding) for the ‘Sub-menu’ hover. This will give the site consistency, making it simple and slick.

7. Click ‘Save options’ (in the top right hand corner of the page).

Customising the footer

You now need to go through the same process for the footer (the area at the bottom of every page on your website).

1. Go to Options>Footer.

What would you like to appear in the footer of your WordPress visual artist portfolio

2. If you want any copyright information to appear on your site enter it under ‘Copyright text’ and it will appear after the rest of your content in the footer of every page. In the case of an artist, this text might address image protection and permissions.

Create some text for the footer of your site

3. Then scroll down and choose which social media networks you belong to so that you can link them up with your site. Do this by clicking ‘Add row’, selecting the appropriate social network from the drop-down menu and entering the URL of your profile on that network (whatever appears in the address bar when you’re on your Facebook profile page for example).

Add social icons to the footer of your WordPress site

4. Click ‘Save options’ (top right-hand corner).

Adjusting the main options

You now need to adjust the main Klassik theme options in order for the site to display correctly.

1. In the WordPress dashboard, hover over ‘Options’ in the right hand menu and click on ‘Main’.

Go to the main styling options for the Klasik theme in WordPress

2. Check the box that says ‘Disable all likes’. This will take away the functionality for visitors to click a ‘like’ button. This is the domain of social media, not a professional artist website.

Check the box to disable page like

3. Having said that, if you are planning on including a blog on your site, the next option will allow visitors to share your articles; this can only be a good thing as it gives your art more exposure. So select the social media platforms you’d like your blog posts to be shared on.

Select which platforms you'd like your blog posts to be shared on

Leave everything else on this page as it is.

4. Next click ‘Save options’ (top right-hand corner).

Further customisation using CSS

Now, in order to make site wide changes to the look of your site, we’re nearly done. However, if you want to achieve a similar look to DarenRedman.com you’ll need to do a few extras. Stay on the page you’ve just been on: Options>Main.

Scroll down to the box for Custom CSS. CSS stands for cascading style sheet and it is a form of code that lets search engines know how to display your site (which fonts and colours to use and where, for example).

Add custom CSS to your WordPress site to further customise its look and feel

I’ll share with you what I added to this box to customise Daren Redman’s site and what the results were.

Add a shadow to the main container

Firstly, I added a box shadow to the container area to give it a little more depth.

[ezcol_1half]

An artist website without shadow around the main content area

Without shadow

[/ezcol_1half] [ezcol_1half_end]

An art portfolio site with shadow around the main content area
With shadow

[/ezcol_1half_end]

To do this type in this code into the ‘Custom CSS’ box:

CSS to customise an art site

‘.container’ identifies which element of the page you want to adjust. The rest of the code adds the shadow.

Remember to click on ‘Save Options’ after every CSS update you perform.

Customising the look of the Navigation

[ezcol_1half]

1. By default the navigation font is grey. I wanted to tie it in more with the rest of my site colours and add a couple more effects.

[/ezcol_1half] [ezcol_1half_end]

The navigation bar of your portfolio site

[/ezcol_1half_end]

To do this type in this code into Custom CSS (underneath the last piece of code you entered for the box shadow).

CSS to customise the look of the top navigation menu

‘nav ul li a’ specifies that you want to change the default settings for the navigation. Here you are transforming the navigation text so that it is capitalised {text-transform: uppercase;}, you are adjusting the colour of the text {font-color:#36422a;}, and changing the size of the navigation text {font-size: 13px;}. Depending on which font you are using, you may need to play with the font size. Remember to change the Hex value of the colour to your own custom colour.

Note the American spelling of ‘color’ for CSS. This is important as browsers won’t recognise the English spelling.

2. Add the following code to change the colour of the line that appears when you hover over a menu item. Remember to change the Hex code to that of your own preferred colour.

CSS to give your top menu a custom look

3, Click ‘Save options’.

Customising the look of links

Any text that links to another page on the internet (whether that be to another page on the same site or a different site entirely) is called a link. These generally display in a different colour to your main body text in order to stand out and let visitors know they are clickable. By default in the Klassik theme, links are in bold. I felt this looked a little clunky with the font I had chosen (Raleway) and wanted to change it. I also wanted to alter the colour of links.

A call to action is a good idea on the home page of your visual artist website

Sepcifying the colour and stroke of link text on your artist website

‘a’ is the CSS code for all links. Here I changed the colour of links {color: #36422a;}, specified  that I didn’t want them to display as bold {font-weight: normal;} and changed the colour of the link text when visitors hover over it with their mousepad {color:#D6370D;}. Again, remember to replace the Hex values with your own choices.

Changing the colour and look of headings and sub-titles

The last site-wide styling change we need to make is to headings. Heading sizes and colours are set with CSS. There are generally 6 different sizes of headings (h1-h6). I didn’t want to change the default sizes, just the colour. I also wanted to capitalise headings; the font I selected is quite light and capitalisation makes headings stand out a little.

Change the colour of headings to make them stand out more with CSS

OK

Your site won’t look anything like DarenRedman.com just yet as we haven’t added any content. But now we have a strong basis, we’ll start making it unique to you as an artist in the next section by building the homepage.

border

Go to Chapter 6 – Creating your home page >>>

<<< Go back to Chapter 4 – Basic WordPress settings

Does building a site from scratch fill you with dread?
Don’t worry – we’re here to help.

Click here to learn more about TextileArtist.org’s web design service
or register your interest below.

[mc4wp_form]

Hello and welcome to TextileArtist.org

TextileArtist.org is a place for textile artists and art enthusiasts to be inspired, learn from the best, promote their work and communicate with like-minded creatives.

NEWSLETTER FOR TEXTILE & FIBER ARTISTS

JOIN A COMMUNITY OF 60,000 STITCHERS

Share in the creative secrets of the world's most celebrated embroidery artists.

And discover how to create breathtaking art with textiles and stitch.

All Inspiration. No Spam.

Thank you for subscribing to our newsletter

What the artists say

"Textileartist.org is an invaluable resource. I am constantly sending students there and sharing it with other practitioners".

Nigel Cheney
Lecturer in Embroidered Textiles at NCAD

"The beauty of TextileArtist.org is that whenever you visit you'll discover something that you didn't already know".

Rachel Parker
Textile Study Group Graduate of the year 2012

"TextileArtist.org gives contemporary textile practice a voice; leading artists, useful guides and a forum for textiles".

Cas Holmes
Textile Artist and teacher

"This website is exactly what we need in the textiles world. A fantastic inspirational resource".

Carol Naylor
Textile and Embroidery Artist

  Get updates from TextileArtist.org via RSS or Email