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 » Header configuration & styling »

Can't get @font-face to work with Theme Options


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 Aug 4, 2009, 12:28 PM
samsterid
 
2 posts · Aug 2009
So far I can't get the @font-face feature to work Using Atahualpa 3.4.1 with WordPress 2.8.3. - Is there a special folder location for fonts I should be using or creating?
Tested @fontface on Blog Title here: http://testblog.toknow.us - with Firefox 3.5 in XP with the following steps:

Uploaded the free TrueType Graublau Sans Web plus the LidoSTF font to my hosting server in this folder: http://testblog.toknow.us/wp-content/fonts
Added the following in Atahualpa Theme Options-Add HTML/CSS Inserts

/* Graublau Sans Web (www.fonts.info) */

@font-face {
font-family: Graublau Sans Web;
src: url(http://testblog.toknow.us/wp-content...raublauWeb.otf) format("opentype");
}

@font-face {
font-family: Graublau Sans Web;
src: url(http://testblog.toknow.us/wp-content...lauWebBold.otf) format("opentype");
font-weight: bold;
}

* LidoSTF */

@font-face {
font-family: LidoSTF;
src: url(http://testblog.toknow.us/wp-content/fonts/LidoSTF.otf) format("opentype");
}

@font-face {
font-family: LidoSTF;
src: url(http://testblog.toknow.us/wp-content...idoSTFBold.otf) format("opentype");
font-weight: bold;
}

Using Atahualpa Theme Options/Style & Edit Header Area/Blog Title - inserted "Graublau Sans Web" as the first font-family

I have the same font working ok on a static page here on the same domain with the same css code:
http://toknow.us/testfonts/testfonts.html

The Blog Title should display in Graublau Sans Web - but so far no go.
(The lower case g is very distinctive)

Thanks - Sam
  #2  
Old Aug 8, 2009, 05:50 AM
Flynn's Avatar
Flynn
 
3,761 posts · Oct 2008
Munich, Germany
Font names with spaces should be wrapped into quotes:

"Some Font Name", arial, verdana, "Other font name", sans-serif;

Regarding @font-face, I am not sure if you can get CSS3 working that way. Some CSS3 features already work, some don't. Most of the time specific hacks or settings are required. For instance, the font size must be in px to get font-smooth working in current browsers.
  #3  
Old Aug 9, 2009, 05:45 PM
samsterid
 
2 posts · Aug 2009
Thanks for replying - I know this seems experimental, but some of the major browsers ARE supposedly supporting @fontface in their latest version;
(I changed all font-family references to GrablauWeb - a shortened name of the font that does not need quotes.)
After more testing I found out a bit more - some of it is still confusing though.

Safari in XP (4.0.2) & on the Mac (3.1.1) renders the Web font correctly, both the static page (listed above), AND using the Atahualpa Theme options. (Yay!)
Arora is another Webkit browser that worked with static and Atahualpa Theme options.
Firefox is the confusing one - on both the Mac & XP version (3.5.2) the static page displays the GraublauWeb font just fine, but does not work using the Atahualpa Theme options.

Browsers that did not work with either the static page or Atahualpa Theme options:
Opera (9.64) in XP and Mac
Google Chrome in XP (2.0.172.39)
Internet Explorer 7 & 8 (of course)

So I'll probably have to wait a couple more years for @fontface to become more mainstream - thanks again.
Sam
  #4  
Old May 21, 2010, 12:12 PM
seleniumgirl
 
11 posts · Dec 2009
This useful site could assist you. It has worked for me. http://nicewebtype.com/notes/2009/10...css-font-face/
  #5  
Old Jun 1, 2010, 12:45 PM
GadgetJoe
 
9 posts · Nov 2009
Hello. I am having a similar issue with Font-Face.

The website is thehealthychef.org. The primary FONT is Didot. But in IE7 this appears as Tahoma (the back up font) since most do not have Didot. I got TheanoDidotRegular from Font Squirrel and have done the following to my Atahualpa:

In html/CSS inserts I put:

/* @font-face - TheanoDidot

@font-face {
font-family: TheanoDidotRegular;
src: url(/wp-content/fonts/TheanoDidot-Regular-webfont.eot);
src: local(☺),
url(/wp-content/fonts/TheanoDidot-Regular-webfont.woff) format(woff),
url(/wp-content/fonts/TheanoDidot-Regular-webfont.ttf) format(truetype),
url(/thehealthychef.org/wp-content/fonts/TheanoDidot-Regular-webfont.svg#webfont) format(svg);
font-weight: normal;
font-style: normal;
}

In CSS.PHP I put the following:

h1, h2, h3, h4, h5, h6 {
font-family: TheanoDidotRegular, sans-serifs;
/* fixed font */
}

But I cannot get the Font to Change. I have also tried changing in the ATO but am not sure what I am doing wrong. Does anyone have any thoughts?

Bookmarks

Tags
css insert, font change, truetype

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Atahualpa Theme Options not working. Art.ist Atahualpa 3 Wordpress theme 19 Mar 28, 2011 01:43 PM
Atahualpa Theme Options itsyssolutions Header configuration & styling 4 Jul 19, 2009 07:27 AM
Atahualpa 3.3.3 Themes panel options shows the options but it does not work pkmittal81 New Versions, & Updating 7 Jun 11, 2009 05:31 AM
Font Size & Face setting reset on save in Page Menu Bar options RobertSGold Page & Category Menu Bars 6 Apr 10, 2009 09:54 PM
Theme Options Menu Doesn't Work + error + spanish tranlation (Beta) ghenghiz Languages & Translations 6 Apr 4, 2009 07:36 PM


All times are GMT -6. The time now is 10:02 PM.


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