Make your site dramatically better looking with no additional cost

Support Forums for LiveMesh Themes & Plugins Forums Enigmatic Theme Support Make your site dramatically better looking with no additional cost

This topic is: not a support question

Tagged: ,

This topic contains 8 replies, has 2 voices, and was last updated by Livemesh livemesh 5 years, 4 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #572
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

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

    #575
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    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.

    #1068
    Fletch80
    fletch80
    Member
    Post count: 5

    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?

    #1069
    Fletch80
    fletch80
    Member
    Post count: 5

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

    #1070
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    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.

    #1073
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    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*/}
    
    #1076
    Fletch80
    fletch80
    Member
    Post count: 5

    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!

    #1084
    Fletch80
    fletch80
    Member
    Post count: 5

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

    #1091
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    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!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.