Support Forums for LiveMesh Themes & Plugins › Forums › Enigmatic Theme Support › Make your site dramatically better looking with no additional cost
- This topic has 8 replies, 2 voices, and was last updated 9 years, 11 months ago by
livemesh.
-
AuthorPosts
-
April 21, 2013 at 1:02 pm #572
livemesh
KeymasterFolks 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 likehttp://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; }
April 21, 2013 at 1:08 pm #575livemesh
KeymasterThe 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.
July 5, 2013 at 4:27 am #1068fletch80
MemberIf 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?
July 5, 2013 at 4:35 am #1069fletch80
MemberI want to make the logotype the Koziupack. How do I make this happen?
July 5, 2013 at 4:51 am #1070livemesh
KeymasterYou 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.
July 5, 2013 at 5:02 am #1073livemesh
KeymasterTo 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*/}
July 5, 2013 at 5:33 am #1076fletch80
MemberI 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!
July 5, 2013 at 5:23 pm #1084fletch80
MemberThe logo is still not working. Everything else seems to be working just fine.
July 6, 2013 at 12:33 pm #1091livemesh
KeymasterCan 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!
-
AuthorPosts
- The forum ‘Enigmatic Theme Support’ is closed to new topics and replies.