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 |
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. |
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 |
This useful site could assist you. It has worked for me. http://nicewebtype.com/notes/2009/10...css-font-face/
|
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 06:04 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.