Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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.

Prev Previous Post   Next Post Next
Old Dec 11, 2011, 01:10 PM
SharonJ's Avatar
644 posts · Sep 2010
Duncan BC Canada
Using Fonts other than Arial and Times New Roman. Yippeeeee.

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

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://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.


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 02:04 AM.

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