ATTENTION

  • As mentioned in our support policy, we do not provide free support for customization query; please submit a ticket for customization fee inquiry.
  • While you don’t need to be a coding expert, you are required to have CSS knowledge to do this customization. If you’re new to CSS, we suggest this CSS font tutorial for reference or completing the web course at Codeacademy.
COMMON ERROR

  • Have inserted CSS but still unable to change the font? Most likely you have use incorrect CSS class. Please inspect the CSS class carefully with the browser inspect tool.

The following tutorial will guide you on how to change the default theme font to other Google Font. Applicable for any font element in Bluchic themes.

Part One: Get Code From Google Font

Step 1. Choose a font

To get started, go to Google Fonts directory and choose the font that you want to use (eg. Oswald). Click the Add to Collection button and click the Use button at the very bottom of the screen.

Customize Font

Step 2. Copy the embed code

You’ll be taken to a new screen.
– 2A select the font style (normal/bold/italic/etc)
– 2B copy the embed code (to be used in Header Scripts), for example:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
– 2C copy the font family (to be used in Custom CSS at later stage), for example:
font-family: 'Oswald', sans-serif;

Customize Font

Step 3. Paste the embed code

Go to Appearance – Theme Options – Extra inputs settings and paste the embed code from 2B in the Header Script(s) text box.

Customize Font

Part Two: Get CSS class for the specific elements

Step 1. Inspect CSS for specific element

It’s important to find CSS class in order to change the specific element (e.g Post Title). To find CSS class, we use Google Chrome Inspect Elements tool from Google Chrome browser.

– 1A Find the specific font element that you want to change; for this tutorial, we’re going to find the CSS for Post Title Font. Right-click on it and select Inspect element.

– 1B The source code will appear at the bottom of the page. From there, you’ll see the exact CSS class for the specific element (in this case, it’s Post Title). Copy the CSS class (Not the detailed style).

Customize Font

Step 2. Paste the CSS code

Go to Appearance – Theme Options – Extra inputs settings. Paste the CSS class (from the above Step 1) & Google Font Family (from PART ONE – Step 2C) in the Custom CSS text box. Click Save Settings button to complete the steps.

Customize Font