Indexhibit Help

Custom Typography

Integrating custom fonts in your site is easy - you just need basic coding skills.
But before using any custom fonts for your make sure the font licence allows for web use.

In most cases you will need to paste lines of code in the style.css file (and rarely in the index.php file) of your theme. Usually font websites have instructions on how to do this.
In the following examples we are going to include a Google font and a converted font using the @font-face css declaration.


Google fonts

If, for example, you want to use Roboto from Google fonts you only need to edit the style.css file of your theme (if you're using the default Indexhibit theme, then style.css is located under ndxzsite>default>style.css).

As described in the instructions, right before the body css selector, paste:

@import url(http://fonts.googleapis.com/css?family=Roboto);

and then edit the body tag to

body {
font-size: 13px;
font-family: 'Roboto', sans-serif;
background: #fff;
color: #000;
}


@font-face css declaration

Embedding fonts using the css @font-face declaration is also easy.
First you will need to convert your font so all browsers can use it - .eot, .woff, .ttf and .svg format.
There are many webfont generators online that can do this for free, but you also have to check that the font is legally eligible for web embedding.

Τhe following example uses a version of OpenSans.
Upload your converted fonts in a folder named font on your server.
Then edit the style.css file of your theme (if you're using the default Indexhibit theme, then style.css is located under ndxzsite>default>style.css).

Right before the body css selector, paste:

@font-face{
font-family: 'OpenSans_regular';
src: url('font/OpenSans.eot');
src: url('font/OpenSans.eot?iefix') format('eot'),
url('font/OpenSans.woff') format('woff'),
url('font/OpenSans.ttf') format('truetype'),
url('font/OpenSans.svg#webfont') format('svg');
}


Do not forget to include in your file path, the folder in which you uploaded your fonts!

Then edit the body css selector:

body {
font-size: 13px;
font-family: 'OpenSans_regular', sans-serif;
background: #fff;
color: #000;
}


Note that OpenSans_regular is being used to apply the font to the css selector, and not the font file names.

Of course you can target different css selectors and use different fonts. For example:

body {
font-size: 13px;
font-family: 'MyWebFont', sans-serif;
background: #fff;
color: #000;
}
#index ul li a {
font-size: 18px;
font-family: 'MyWebFontForTheIndex', serif;
}
strong {
font-family: Helvetica, sans-serif;
}


Editing/adding the above in style.css will:
  • use the MyWebFont font throughout your site
  • use the MyWebFontForTheIndex font for all links in your #index
  • use Helvetica for all strong tags on your site