Make your site dramatically better looking with no additional cost

[livemesh]

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; }

[livemesh]

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.

[fletch80]

If you need to add more than one custom font, do I need to do this process for each one, or can the process be combined?

[fletch80]

I want to make the logotype the Koziupack. How do I make this happen?

[livemesh]

You will need to repeat the above steps for each font till step 8 at least. After this, if you are going to use one font for heading and the other for the body only, pls use corresponding options in the options panel as seen below –

https://docs.google.com/file/d/0B9j6FQo4cSQFZVpzb3lYMzg5bjA/edit?usp=drivesdk

The step 10 is not necessary if you are not going to go for a different font-weight than that used in the theme.

If you need to use multiple fonts for headings itself or alter font size etc., you will need to input custom css into Custom CSS tab for the elements as in the below example –

#content .hentry .entry-meta { font-family: 'Trajan Pro Regular'; font-size: 12px;}

and

.entry-title, .entry-title a { font-family: 'Koziupack Regular';}

Requires some familiarity with CSS to achieve perfect typography because each font is different.

[livemesh]

To change the logo to custom font like Koziupack Regular, you will need to choose text font option in the theme options panel –

https://docs.google.com/file/d/0B9j6FQo4cSQFVk44VTgyWFROWjA/edit?usp=drivesdk

and then repeat the above steps 1 to 8 for font import, and then input the following CSS into Custom CSS tab in theme options panel –

#site-logo a {font-family:"Koziupack-500";font-size: 32px;/*Your desired font size*/}

[fletch80]

I am kind of new at all this. I followed the instructions for the logo, but my logo style has not changed. I must have done something incorrectly. Help!

[fletch80]

The logo is still not working. Everything else seems to be working just fine.

[livemesh]

Can you pls email me the URL for the site please and a temporary login to your site through my ThemeForest profile page http://themeforest.net/user/livemesh (bottom right box). I can suggest a quick fix for you by looking at what exactly is happening. Thanks!

[Author]

Posts