Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Using Fonts other than Arial and Times New Roman. Yippeeeee.


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 11, 2011, 01:10 PM
SharonJ's Avatar
SharonJ
 
549 posts · Sep 2010
Duncan BC Canada
Just how sick are you of Arial and Times New Roman in websites? Don’t you wish you could easily use new and interesting typefaces for your headings and even your body text? Now there is an easy way to do that and you don’t need anything special.

You can use any font on your computer (provided you have the legal right to use it). The font you use should be either OpenType Font or a TrueType Font. The problem up to now has been that Internet Explorer only uses Embedded OpenType, while other browsers use Scalable Vector Graphics fonts. So what is a web designer to do?

Here is an easy solution. It looks complicated but it is very easy. The Font Squirrel Page '@font-face Kit Generator' builds everything you need, you just have to put it in the right place:

1. Go to the Font Squirrel Page to the @font-face Kit Generator.

2. Click the add a font button and browse to the font you want to use - I just copy a font from my font folder, in the Control Panel, to the desktop (On a MAC, navigate to your computer/Library/Fonts and select the one, or more fonts you want to use). Make sure you have read and understand the 'Agreement' before checking the agreement box.

3. Once your font has been uploaded, the field will turn green. Download your kit. It is a zipped file in which you will find (after unzipping it) there is a demo.html file, the css file and the files you will need for the different browsers (files with the extensions 'eot', 'svg', 'ttf' and/or 'woof').

4. Upload the font files you want to your website. A good location would be to create a new folder in the 'wp-content' folder called 'fonts' and put them there.

5. The 'stylesheet.css' file contains what you need to put into 'ATO->Add HTML/CSS inserts->CSS Inserts' - change the 'src:...' to reflect the folder where you upload the font files. For example:

HTML Code:

@font-face {
font-family: 'EurostileRegular';
src: url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.eot');
src: url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.eot?#iefix') format('embedded-opentype'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.woff') format('woff'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.ttf') format('truetype'),
url('http://yourdomain.com/wp-content/fonts/eurosti-webfont.svg#EurostileRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'EurostileBold';
src: url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.eot');
src: url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.eot?#iefix') format('embedded-opentype'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.woff') format('woff'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.ttf') format('truetype'),
url('http://yourdomain.com/wp-content/fonts/eurostib-webfont.svg#EurostileBold') format('svg');
font-weight: normal;
font-style: normal;
}


6. Now all that remains to be done is to use the font-family name in your CSS Inserts or in the 'ATO->Body, Text & Links->Body Style' or any of the theme's styling locations. Here is a sample that could go in the 'CSS Inserts':
HTML Code:
<blockquote>
h1 { font-size: 26px; line-height: 1.2; margin: 0.3em 0 10px; color:#3B5D07; font-family: 'EurostileBold';}
h2 { font-size: 20px; line-height: 1.3; margin: 1em 0 .2em; color:#6B9C19;font-family: 'EurostileRegular'; }
h3 { font-size: 12px; line-height: 1.3; margin: 1em 0 .2em; font-family:font-family: 'EurostileRegular'; }
</blockquote>

You can see the results here:
www.sidewalkproperties.ca (titles) (don’t blame me for the design or colour of this one, they insisted).

Or here: http://www.taiji.ca/ (body text)

The Font Squirrel site also has ready made kits to download and you can view them here.
http://www.fontsquirrel.com/fontface

http://nicewebtype.com/notes/2009/10...css-font-face/ It explains the process in great detail.

Last edited by SharonJ; Jan 20, 2012 at 04:42 PM.
  #2  
Old Aug 4, 2012, 11:14 AM
shocka
 
11 posts · May 2009
Great post! Came in handy when I was trying to figure where exactly to put the fonts.

I wanted to add google has some fonts which are very easy to incorporate at http://www.google.com/webfonts
By Clicking the Quick use they give you HTML to link to a CSS file. Saves folks hassle of getting all the versions of the file created and uploaded. The trade off is the load time.
  #3  
Old Nov 7, 2012, 02:07 PM
mcphoto
 
116 posts · Apr 2009
You'll have similar load-time issues with @font-face, as I understand it.

I've been very happy with google fonts, though i try to just incorporate one or two. Some really nice fonts, and you can download them to use when making comps for clients (IE photoshop designs).

I'll keep this post in mind though - some clients have really specific font usage and this could get one away from images.
  #4  
Old Nov 7, 2012, 02:31 PM
SharonJ's Avatar
SharonJ
 
549 posts · Sep 2010
Duncan BC Canada
I have not noticed the load time being affected with @font-face, have you?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
after upgrade to 3.7.1, my search (plugin Relevanssi) times out with error owc New Versions, & Updating 13 Nov 18, 2011 12:29 PM
[SOLVED] how to make the whole blog Times/serif? lisacole Center area post/pages 2 Nov 15, 2011 11:52 AM
Atahualpa: Static homepage two times caoba Page & Category Menu Bars 1 Mar 13, 2009 12:52 AM
Avatar load times and XHTML under leave a reply Artists Garden Atahualpa 3 Wordpress theme 2 Jan 18, 2009 09:24 AM


All times are GMT -6. The time now is 11:36 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.