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 »

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


  #1  
Old Nov 9, 2010, 02: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 02:17 PM. Reason: Added site address.
  #2  
Old Nov 24, 2010, 07: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 25, 2010, 12:09 AM
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



Similar Threads
Thread Thread Starter Forum Replies Last Post
Using @font-face in widget headers jahmin Sidebars & Widgets 1 Sep 23, 2010 04:11 PM
Can't use @font-face with WordPress 3.0 acdesigns Header configuration & styling 2 Jul 1, 2010 05:56 AM
Can't get @font-face to work with Theme Options samsterid Header configuration & styling 4 Jun 1, 2010 01: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 02:57 PM
Font Size & Face setting reset on save in Page Menu Bar options RobertSGold Page & Category Menu Bars 6 Apr 10, 2009 10:54 PM


All times are GMT -6. The time now is 11:50 AM.


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