Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Can't get @font-face to work with Theme Options (http://forum.bytesforall.com/showthread.php?t=2813)

samsterid Aug 4, 2009 12:28 PM

Can't get @font-face to work with Theme Options
 
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

Flynn Aug 8, 2009 05:50 AM

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.

samsterid Aug 9, 2009 05:45 PM

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

seleniumgirl May 21, 2010 12:12 PM

This useful site could assist you. It has worked for me. http://nicewebtype.com/notes/2009/10...css-font-face/

GadgetJoe Jun 1, 2010 12:45 PM

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?


All times are GMT -6. The time now is 12:43 PM.

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