Install Custom Fonts – Make your site dramatically better looking with no additional cost

Folks out there who bought the theme – just wanted to provide a way for you to make things much better on your site with some minimal work on your part. Here is how to do it –

1) Create an account in http://myfonts.com.

2) Login to your account and go to http://www.myfonts.com/fonts/exljbris/museo-slab/.

3) Choose the Museo Slab 500 font (costs $0), hit ‘Add to Cart’ button visible when you hover over the font selection.

4) In the Add to Cart popup window, among the choice available – Desktop and Web, choose ‘Web – To use the font on a website using @font-face CSS’.

5) Hitting ‘Add to Cart’ in the popup window, will take you to cart page. Hit ‘Proceed to checkout’ button and then place your order in the subsequent page. This should open up a page with ‘Download’ button.

6) Download the webfont kit. Extract the zip file, and locate the webfonts folder containing three files with extensions – ttf, eot, woff. Transfer these files to a folder to your hosting server. Best place would be to a separate directory named something like ‘webfonts’ inside the /wp-content/ folder. Guaranteed to stay when the WordPress or the theme is updated.

7) In the files extracted on your desktop, also locate a CSS file named ‘MyFontsWebfontsKit.css’ that code that looks something like this –

@font-face {
font-family: 'MuseoSlab-500';
src: url('webfonts/26B0C6_0_0.eot');
src: url('webfonts/26B0C6_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/26B0C6_0_0.woff') format('woff'),url('webfonts/26B0C6_0_0.ttf') format('truetype');
}

8) Copy the above code to the Custom CSS tab in the theme options panel. Change the src: url('webfonts/ to something like http://mydomain.com/wp-content/webfonts/. Your code should look something like –

@font-face {
font-family: 'MuseoSlab-500';
src: url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.eot');
src: url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.eot?#iefix') format('embedded-opentype'),url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.woff') format('woff'),url('http://mydomain.com/wp-content/webfonts/26B0C6_0_0.ttf') format('truetype');
}

9) Enter ‘MuseoSlab-500’ as Custom Heading Font in Fonts Tab in Enigmatic theme options panel.

10) Last, insert the following code into Custom CSS tab in the options panel for the new font to take effect.

h1, h2, h3, h4, h5, h6, #before-content-area h1, #before-content-area h2 , #sitemap-template h2, #archives-template h2, .archive h2, #portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title, #retina-text h3 { font-weight: 500; }

#content .hentry .entry-meta, .entry-title, .entry-title a { font-family: 'MuseoSlab-500'; }

#portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title { font-size: 16px; }

The basic idea behind the above procedure is quite simple – just download the fonts toolkit from myfonts.com and then make them part of your Custom CSS.

Fonts like Museo Slab are much better than anything you can find on Google Fonts. While the above font does not cost anything, I encourage you to check out some paid fonts as well in the site. Many of them are worth their money.

Posted in: 2. General