Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

@font-face - any clues on where to put the css for this?


  #1  
Old Nov 9, 2010, 01:15 PM
Jaguwar
 
16 posts · Apr 2009
Athens, GA
Hi,

I'm trying to use the @font-face selector (because it finally works in most browsers... yay!), but am having a hard time.

I've tried importing it from a stylesheet using @import in HTML/CSS inserts. No go.
I've treid adding it directly (as opposed to importing) in the same location - HTMl Header: inserts :

Code:
<style type="text/css" media="all">
@import {url('<?php bloginfo('wpurl'); ?>/wp-content/fonts/stylesheet.css');}
@font-face {
	font-family: 'TangerineRegular';
	src: url('Tangerine_Regular.eot');
	src: local('‚∫'), url('Tangerine_Regular.woff') format('woff'), url('Tangerine_Regular.ttf') format('truetype'), url('Tangerine_Regular.svg#webfonthdkJyIIt') format('svg');
	font-weight: normal;
	font-style: normal;
}
</style>
and in CSS inserts. Still no go.

In "Body styles", I've got just:
font-family: "TangerineRegular", arial, sans-serif;

and all text is defaulting to some sans-serif font, which tells me it is reading that information, at least, but clearly not understanding it so it's going to default.

Clear as mud?

The point is, this should be working (I would think?) but it's not. Has anyone found a solution to this yet? It doesn't make any sense, unless the programming is, perhaps stripping out the "@" symbol?

Thanks.

P.S. the stie can be seen with the theme I'm testing here:
http://brownstudy.littlesumrallacade...e=atahualpa353

Thanks again!

Last edited by Jaguwar; Nov 9, 2010 at 01:17 PM. Reason: Added site address.
  #2  
Old Nov 24, 2010, 06:23 PM
rhenium3's Avatar
rhenium3
 
66 posts · Jul 2010
Bozeman, Montana
Send a message via AIM to rhenium3 Send a message via Skype™ to rhenium3
I have the same question, any answers?
  #3  
Old Nov 24, 2010, 11:09 PM
Jaguwar
 
16 posts · Apr 2009
Athens, GA
Oh! Yes, actually. Let's see...

First off, I chose not to import a premade stylesheet defining the fonts. Instead, inside HTML Inserts: Header, I pull every font I want to use, for instance:

Code:
<style type="text/css" media="all">
@font-face {
	font-family: "FontinSmallCapsRegular";
	src: url('/wp-content/fonts/fontin-smallcaps.eot');
	src: local('‚∫'), url('/wp-content/fonts/fontin-smallcaps.woff') format('woff'), url('/wp-content/fonts/fontin-smallcaps.ttf') format('truetype'), url('/wp-content/fonts/fontin-smallcaps.svg#webfontj5eFE88C') format('svg');
	font-weight: normal;
	font-style: normal;
}
</style>
Notice this: I've enclosed the font-family's name in double quotes, not single quotes. Single quotes gave me problems in another place, so I made sure to always use doubles:
Code:
	font-family: "FontinSmallCapsRegular";
Finally, I made sure to use the appropriate CSS call to actually use the font in my general text. This is what I have in CSS Inserts:
Code:
.post-bodycopy {
font: 16px "FontinRegular";
line-height: 1.5em;
}
Again, notice the double quotes.

If you're styling the blog title and/or tagline, of course, make those adjustments in "Style & Edit Header Area". for instance, in "Blog Title":
Code:
font: 60px/240% "FontinSmallCapsRegular", Tahoma, Arial, sans-serif;
Nope, not sure about the double-font size thing, but it seems to be working. Anyway, double-quotes there too.
Oh! One more thing I just remembered, for some reason it will NOT work if you separate the font elements. For instance:
Code:
font-family: "FontinSmallCapsRegular", Tahoma, Arial, sans-serif;
font-size: 60px;
etc.
won't work, even though it means the same thing as the original line. I don't know why.
HTH!

Bookmarks

Tags
@font-face, @import, embeddable fonts, font formatting

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Using @font-face in widget headers jahmin Sidebars & Widgets 1 Sep 23, 2010 03:11 PM
Can't use @font-face with WordPress 3.0 acdesigns Header configuration & styling 2 Jul 1, 2010 04:56 AM
Can't get @font-face to work with Theme Options samsterid Header configuration & styling 4 Jun 1, 2010 12:45 PM
How can I put a put a style.css for each one of the category's? LucasdoMonte Forum How-To 1 Dec 24, 2009 01:57 PM
Font Size & Face setting reset on save in Page Menu Bar options RobertSGold Page & Category Menu Bars 6 Apr 10, 2009 09:54 PM


All times are GMT -6. The time now is 04:22 PM.


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