Re: [css-d] @Fontface Not Working?
I also think you're convinced it's an absolute path issue but it's not. You get an error message because I'm a WP and it's PHP driven and directories just work a little differently - people just cant get direct access to a directory on WP, just because it exist - it just doesn't work that way. And as already stated several times FF doesn't render the font even w the absolute path. Someone else already responded that there was an issue w the font itself a corruption of some sort which is what I was suspecting and I was able to check it out in a font programmer which confirmed it was an altered version of the original. At this point, I am moving on to another font. And I will set up my @font-face the same way and send you a link directly to see what happens. Elli On both your sites, the primary issue is the URL for the font. http://www.e7flux.com/clients/sof/ 'littledays.ttf' is being requested from http://www.e7flux.com/clients/sof/css/fonts/littledays.ttf while it appears to be living at www.e7flux.com/sof/fonts/littledays.ttf the same link structure exists for the Candara font on that site. Similarly http://www.e7flux.com/e7flux2012/ requests its 'Creampuff.ttf' from http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf but it is living in www.e7flux.com/e7flux2012/fonts/creampuff.ttf You can test that easily for yourself by clicking the links, you will receive a 404 error or a download option as appropriate. So far you cannot really class this as being related to CSS. I have not tested if the creampuff.ttf is corrupted as FF suggests it is. Duncan __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Really you had two issues going on. First was your pathing issue
which prevented the rest of us from seeing the problem (unless we hadthe font
installed) and you did get that corrected for creampuff and I
was able to verify that the font is now downloading properly with no
errors.
The thing is it still wasn't downloading for me in FF on my machine (Windows 7)
at all even w path corrected. All other browsers were rendering the Creampuff
font with both relative and absolute path.
The second issue as was pointed out is that the font file
itself was corrupt. BTW, if you still wanted to use the creampuff
font I was able to download a good, non-corrupted, version (in all the
supported formats) from here http://www.fonts2u.com/creampuff.font and
it includes the @font-face download with a stylesheet containing the
necessary @font-face code. I did download your code and was able to
get it working locally in all browsers. Here's the @font-face I used
with the font files downloaded from the link above:@font-face {
font-family:Creampuff;
src:url(../fonts/CREAMPUF.eot?)
format(eot),url(../fonts/CREAMPUF.woff)
format(woff),url(../fonts/CREAMPUF.ttf)
format(truetype),url(../fonts/CREAMPUF.svg#Creampuff)
format(svg);
font-weight:normal;
font-style:normal;
}
Thanks so much! I went ahead and
downloaded the font from this link even though, it's still the same font with
same altered signature as the one I had before. I implemented the
@font-face kit markup and used absolute paths and everything is working
fine. But because it's the same font I had as before it makes me wonder
why FF had such issues w it since all other browsers were rendering it,
regardless of relative path. I had also changed the name of file from CREAMPUF
to creampuff as I hate using caps, so I don't know if somewhere within the file
itself there was embedded code for a specific file name to be used.
I went ahead and took some screenshots of the SOF project you
referenced as working so you could see what I'm seeing with that
project. Again I downloaded a good copy of Little Days font from
the same site I got creampuff from and I downloaded your code locally
so you can see the difference between Little Days not working and it
working. Here is what I see in Chrome 16 for your SOF site:
Top half of page:
http://www.flickr.com/photos/meenfrmr/6641808481/in/photostream/
Bottom half of page:
http://www.flickr.com/photos/meenfrmr/6641808435/in/photostream/
There's a bit of confusion for me here. I thought you initially stated you were
using Chrome 17? Now you are saying Chrome 16 - I'm only on 16 and it's been no
problem. The other thing is, these screeshots are a bit small to get the full
view but it looks to me like the other custom font that I'm using: Candara is
displaying - yet the path is still relative as I have not changed the code for
this yet. That's interesting because the problem seems to only be w Little
Days. And as I also stated previously, you are the first to tell me you weren't
getting the Little Days font rendered. Can you provide a close-up of Candara
(content well text)? I think I will have to post some sort of test check to get
more feedback before I change the code to absolute paths. It's just intriguing
to see the many different behaviors going on w @font-face. There doesn't seem
to be any consistency and can vary for so many different reasons...
Just found this on Google. Some worthy @font-face gotchas to note:
http://paulirish.com/2010/font-face-gotchas/
Elli Vizcaino
Helping artists, entrepreneurs and small
businesses knock the socks off the competition!
http://www.e7flux.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] @Fontface Not Working?
Hi Everyone, Am working on a coming soon page for my site and @font-face doesn't seem to be working. Not sure why .I implemented @font-face on another project and it was fine. Now it's not working for this. I am using a different font now - could this have something to do with it? Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Yes, of course it could. A huge number of things could have gone wrong — without an example it is almost impossible to provide helpful advice. However: • Often, it's just a misplaced file issue: the fonts are in the wrong directory relative to the stylesheet with the declaration, or said stylesheet isn't being called itself. • I often end up spelling the font file names differently in the @font-face declaration that they appear on the file system; other times I will have used a slightly different string in the font-family stack call then how I defined it in the @font-face declaration — remember capitalisation matters, and a string with spaces in it needs to be between quotes. • Some servers don't handle the font MIME-type properly, which can cause some browsers not to read them properly. • Rarely, my font files end up garbled for some reason or other, usually after being produced in the various given formats by an automatic generator. Try examining the font files with your operating system (via your file system explorer) to see if they look right. • For a while, some versions of Webkit would screw up conjunction of text-shadow with certain custom fonts and end up simply not rendering the glyphs. As far as I'm aware though, this is resolved in every major distribution. Seriously though, show us the site! ;) Regards, Barney Carroll barney.carr...@gmail.com +44 7429 177278 barneycarroll.com Hi Barney! Ok so I tested on latest versions of Chrome, Opera, Safari for Windows, IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm having the problem. I tested in both FF3.6 9 and what you see on those versions of FF, is the fallback font (Brush Script STD) of the font stack. The other browsers render Creampuff as it should. Please find link below: http://www.e7flux.com/e7flux2012/ TIA, Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Hi Barney! Ok so I tested on latest versions of Chrome, Opera, Safari for Windows, IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm having the problem. I tested in both FF3.6 9 and what you see on those versions of FF, is the fallback font (Brush Script STD) of the font stack. The other browsers render Creampuff as it should. Please find link below: http://www.e7flux.com/e7flux2012/ Creampuff is not loading in any browser that I have. Brush Script STD is not installed so I get fallback to 'Cursive' which is rendered as MS Comic Sans. WinXP: Opera 11.60, Chrome 17, Iron 16, FF 9.0.1, IE 7 8 Duncan __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 1:16 PM, Elli Vizcaino elli...@yahoo.com wrote: Ok so I tested on latest versions of Chrome, Opera, Safari for Windows, IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm having the problem. I tested in both FF3.6 9 and what you see on those versions of FF, is the fallback font (Brush Script STD) of the font stack. The other browsers render Creampuff as it should. Please find link below: http://www.e7flux.com/e7flux2012/ are you sure you're referencing the proper location for your font? I get Comic Sans in all browsers and when I look at the developer console in Chrome I see this error: Failed to load resource: the server responded with a status of 404 (Not Found) http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf -- Jason Arnold http://www.jasonarnold.net __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Ok so I tested on latest versions of Chrome, Opera, Safari for Windows,
IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm
having the problem. I tested in both FF3.6 9 and what you see on those
versions of FF, is the fallback font (Brush Script STD) of the font stack.
The
other browsers render Creampuff as it should. Please find link
below:
http://www.e7flux.com/e7flux2012/
are you sure you're referencing the proper location for your font? I
get Comic Sans in all browsers and when I look at the developer
console in Chrome I see this error:
Failed to load resource: the server responded with a status of 404
(Not Found) http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
The font is in its own directory. The link you provided places the the fonts
directory within the CSS directory. I don't know why it's a problem this time
around because the way I wrote my CSS code is exactly how I used it in another
project (http://www.e7flux.com/clients/sof/) and it works fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
}
Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Elli Vizcaino wrote:
The font is in its own directory. The link you provided places the the fonts
directory within the CSS directory. I don't know why it's a problem this time
around because the way I wrote my CSS code is exactly how I used it in another
project (http://www.e7flux.com/clients/sof/) and it works fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
}
'fonts/creampuff.ttf' is a relative URL, Elli : to what
base is it relative ?
Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
The font is in its own directory. The link you provided places the the fonts
directory within the CSS directory. I don't know why it's a problem this time
around because the way I wrote my CSS code is exactly how I used it in
another project (http://www.e7flux.com/clients/sof/) and it works fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
It could be that Creampuff should be creampuff.
CSS is generally case sensitive and your file name is lowercase.
('fonts/creampuff.ttf').
Just a thought. I prefer to use Google fonts because the syntax is pretty much
easier and works all the time.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Elli,
As Philip Taylor has correctly pointed out, the URI you used in your
style sheet is a relative URI.
The CSS specification (http://www.w3.org/TR/CSS2/syndata.html#uri) has
this to say about relative URIs:
For CSS style sheets, the base URI is that of the style sheet, not that
of the source document.
Therefore:
1. The style sheet in question is located at:
http://www.e7flux.com/e7flux2012/css/e7flux.css
2. The URL for the font is relative to that location.
3. url('fonts/creampuff.ttf') translates to the absolute URI:
http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
Solution:
Change
url('fonts/creampuff.ttf')to
url('../fonts/creampuff.ttf') or
url('http://www.e7flux.com/e7flux2012/fonts/creampuff.ttf')
and things should work. (Tested with Safari Devtools - works.)
For future projects you might also consider using a web font service
such as Fontsquirrel to avoid other web font-related issues.
Same thing goes for /sof/.
Hope this helps,
Jørgen
Am 04.01.12 21:30, schrieb Elli Vizcaino:
Ok so I tested on latest versions of Chrome, Opera, Safari for Windows,
IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm
having the problem. I tested in both FF3.6 9 and what you see on those
versions of FF, is the fallback font (Brush Script STD) of the font stack. The
other browsers render Creampuff as it should. Please find link
below:
http://www.e7flux.com/e7flux2012/
are you sure you're referencing the proper location for your font? I
get Comic Sans in all browsers and when I look at the developer
console in Chrome I see this error:
Failed to load resource: the server responded with a status of 404
(Not Found) http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
The font is in its own directory. The link you provided places the the fonts
directory within the CSS directory. I don't know why it's a problem this time
around because the way I wrote my CSS code is exactly how I used it in another
project (http://www.e7flux.com/clients/sof/) and it works fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
}
Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On 01/05/2012, at 8:52 AM, Joergen W. Lang wrote: For future projects you might also consider using a web font service such as Fontsquirrel to avoid other web font-related issues. What are the other web font-related issues you refer to here? KathyW. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Elli,
As Philip Taylor has correctly pointed out, the URI you used in your
style sheet is a relative URI.
The CSS specification (http://www.w3.org/TR/CSS2/syndata.html#uri) has
this to say about relative URIs:
For CSS style sheets, the base URI is that of the style sheet, not that
of the source document.
Therefore:
1. The style sheet in question is located at:
http://www.e7flux.com/e7flux2012/css/e7flux.css
2. The URL for the font is relative to that location.
3. url('fonts/creampuff.ttf') translates to the absolute URI:
http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf
Solution:
Change
url('fonts/creampuff.ttf') to
url('../fonts/creampuff.ttf') or
url('http://www.e7flux.com/e7flux2012/fonts/creampuff.ttf')
and things should work. (Tested with Safari Devtools - works.)
For future projects you might also consider using a web font service
such as Fontsquirrel to avoid other web font-related issues.
Same thing goes for /sof/.
Hope this helps,
Jørgen
Wow this is really weird. Could it be the version of Chrome you are
viewing? Because the other project had no problems rendering the custom
font and in fact, there was another discussion related to the Little
Days font being used in that project with numerous folks being able to
view the font from a number of browsers with the relative path written
out as I demoed earlier.
And even now with making the base to the root directory:
../fonts/creampuff.ttf it
still doesn't show up in FF3.6 or FF9 but does show in all the other
browsers I tested previously. So it seems the path of the base url is
irrelevant.
I am familiar w them and have some of their fonts but I don't think that
fontsquirrel is guaranteed 100% to make your fonts render. Tried their service
earlier and their markup didn't work either.
Elli Vizcaino
Helping artists, entrepreneurs and small
businesses knock the socks off the competition!
http://www.e7flux.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
The font is in its own directory. The link you provided places the the
fonts directory within the CSS directory. I don't know why it's a
problem this time around because the way I wrote my CSS code is exactly how I
used it in another project (http://www.e7flux.com/clients/sof/) and it works
fine.
@font-face {
font-family: Creampuff;
src: url('fonts/creampuff.ttf') format('truetype');
font-weight: normal;
It could be that Creampuff should be creampuff.
CSS is generally case sensitive and your file name is lowercase.
('fonts/creampuff.ttf').
Just a thought. I prefer to use Google fonts because the syntax is pretty
much
easier and works all the time.
Just tried your suggestion and changed the name to creampuff and FF still isn't
budging but once again all the other browser render it fine. At this point, I'm
considering purchasing a web font as opposed to using a commercially free one.
What a drag...the amount of issues w browsers supporting @font-face
Elli Vizcaino
Helping artists, entrepreneurs and small
businesses knock the socks off the competition!
http://www.e7flux.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Am 04.01.12 23:26, schrieb Kathy Wheeler: On 01/05/2012, at 8:52 AM, Joergen W. Lang wrote: For future projects you might also consider using a web font service such as Fontsquirrel to avoid other web font-related issues. What are the other web font-related issues you refer to here? Cross-browser compatibility, file sizes (of different formats), licensing (to some extent). __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Are you sure it's working in your other project (http://www.e7flux.com/clients/sof/)? Because when i go to that site I get the same error message in chrome for littledays.ttf and that font definitely does not show up. Your issue is you're using the relative src from where the css is located if you wanted. Using fonts/creampuff.ttf tells the browser to look at site.domain.com/location-of-css/fonts/creampuff.ttf. If you used /fonts/creampuff.ttf then the browser will look for the file in site.domain.com/fonts/creampuff.ttf. This is also the issue with your other project for the littledays.ttf file. So you have two choices, you can either 1) correct your src property in your @font-face or 2) move the font files to a fonts folder inside the folder where your css file is located. Can you tell me what version of Chrome and OS you're viewing from? And have you checked it out in any other browsers? Because it was never an issue before. The link had been up for discussion in another post a couple of weeks ago and plenty of people on the list saw it and responded. No one has ever reported not seeing Little Days at all. So this is really surprising as this is the first time I'm hearing this. Creampuff on the other hand is the font in question for this topic and the one that doesn't show up for me in FF but does on all the other browsers. My chrome version is 16. If you cold post a screen shot w browser and OS details that would be awesome! Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wednesday 2012-01-04 11:16 -0800, Elli Vizcaino wrote: Ok so I tested on latest versions of Chrome, Opera, Safari for Windows, IE9, IE8, IE7 and they are all rendering the font. It's in FF where I'm having the problem. I tested in both FF3.6 9 and what you see on those versions of FF, is the fallback font (Brush Script STD) of the font stack. The other browsers render Creampuff as it should. Please find link below: On Firefox, in the Web Console (open it with Tools - Web Developer - Web Console prior to loading the page), I see the error message: downloadable font: rejected by sanitizer (font-family: creampuff style:normal weight:normal stretch:normal src index:0) source: http://www.e7flux.com/e7flux2012/fonts/creampuff.ttf @ http://www.e7flux.com/e7flux2012/css/e7flux.css?v=2 This means that the font has errors in it. For security reasons (since the system's font handling code is not necessarily robust against malicious fonts), we don't pass such fonts off to the OS, even though in many cases they're just mistakes. -David -- 턞 L. David Baron http://dbaron.org/ 턂 턢 Mozilla http://www.mozilla.org/ 턂 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Firefox, in the Web Console (open it with Tools - Web Developer - Web Console prior to loading the page), I see the error message: downloadable font: rejected by sanitizer (font-family: creampuff style:normal weight:normal stretch:normal src index:0) source: http://www.e7flux.com/e7flux2012/fonts/creampuff.ttf @ http://www.e7flux.com/e7flux2012/css/e7flux.css?v=2 This means that the font has errors in it. For security reasons (since the system's font handling code is not necessarily robust against malicious fonts), we don't pass such fonts off to the OS, even though in many cases they're just mistakes. -David Thanks David, I was starting to suspect it was the font itself. I opened it in a font program and it was a modified version of the original so somewhere along those lines something went wrong. Going to switch to a different font. Thanks for the confirmation! Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Am 05.01.12 01:05, schrieb Kathy Wheeler: On 01/05/2012, at 9:53 AM, Joergen W. Lang wrote: Am 04.01.12 23:26, schrieb Kathy Wheeler: On 01/05/2012, at 8:52 AM, Joergen W. Lang wrote: For future projects you might also consider using a web font service such as Fontsquirrel to avoid other web font-related issues. What are the other web font-related issues you refer to here? Cross-browser compatibility, file sizes (of different formats), licensing (to some extent). I can see how licensing might be an issue, but what difference would hosting the font yourself vs services like Fontsquirrel make to cross browser or file size issues? As far as I know, Fontsquirrel does not even offer font hosting. Instead they help you build a @font-face kit [1]. This contains the CSS and font files needed to host them on a machine of your choice. Hosting might be a help since services like the Google Fonts API [2] abstract away the construction of the @font-face rule altogether. You just need to place the appropriate link tag in the head of your HTML file. Both ways share the quality that the CSS rules are optimized to serve the best possible font for the browser requesting it. Jørgen P.S.: We might be drifting off-topic here. Maybe better continue off-list? [1] http://www.fontsquirrel.com/fontface/generator [2] http://www.google.com/webfonts#ChoosePlace:select __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino elli...@yahoo.com wrote: Can you tell me what version of Chrome and OS you're viewing from? And have you checked it out in any other browsers? Because it was never an issue before. The link had been up for discussion in another post a couple of weeks ago and plenty of people on the list saw it and responded. No one has ever reported not seeing Little Days at all. So this is really surprising as this is the first time I'm hearing this. Creampuff on the other hand is the font in question for this topic and the one that doesn't show up for me in FF but does on all the other browsers. My chrome version is 16. If you cold post a screen shot w browser and OS details that would be awesome! This is the case in all browsers I checked with on Windows XP (IE7, Chrome 16, FireFox, Safari) and Mac OS X 10.7 (Chrome 16, Firefox, Safari). I mentioned littledays.ttf because you said it worked and that you used that same code for creampuff.ttf, but the reason creampuff.ttf doesn't work is because you never had working code to begin with since you're littledays.ttf does not work either. Currently, the font that renders on your http://www.e7flux.com/clients/sof/ project for me is Monotype Corsiva since that is a font I have installed on my machines, but Little Days does not render and no browser is able to get the font file because the browser is looking in the wrong place based on your src property. When you use a path like fonts/creampuff.ttf that is relative to where your css file is located at and so the browser is going to look in http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf;. I would send a screenshot of what I'm seeing but I'm between moves and my servers are currently down. I would suggest using absolute urls for these things or use the next best thing /e7flux2012/fonts/creampuff.ttf since that will point the browser at the root of your site and build the path out to the proper spot. Once you get the src property set correctly things should be working much better. As to why people may see the fonts just fine, one thing to keep in mind is that if you have the font installed on your computer then you will see the font show up just fine because your computer has the font and the browser is able to grab it from your machine. This is also why others may have had no problem viewing your page with the specified font. If you want to test @font-face make sure you test it from a machine that doesn't already have the font installed. -- Jason Arnold http://www.jasonarnold.net __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino elli...@yahoo.com wrote: Can you tell me what version of Chrome and OS you're viewing from? And have you checked it out in any other browsers? Because it was never an issue before. The link had been up for discussion in another post a couple of weeks ago and plenty of people on the list saw it and responded. No one has ever reported not seeing Little Days at all. So this is really surprising as this is the first time I'm hearing this. Creampuff on the other hand is the font in question for this topic and the one that doesn't show up for me in FF but does on all the other browsers. My chrome version is 16. If you cold post a screen shot w browser and OS details that would be awesome! This is the case in all browsers I checked with on Windows XP (IE7, Chrome 16, FireFox, Safari) and Mac OS X 10.7 (Chrome 16, Firefox, Safari). I mentioned littledays.ttf because you said it worked and that you used that same code for creampuff.ttf, but the reason creampuff.ttf doesn't work is because you never had working code to begin with since you're littledays.ttf does not work either. Currently, the font that renders on your http://www.e7flux.com/clients/sof/ project for me is Monotype Corsiva since that is a font I have installed on my machines, but Little Days does not render and no browser is able to get the font file because the browser is looking in the wrong place based on your src property. When you use a path like fonts/creampuff.ttf that is relative to where your css file is located at and so the browser is going to look in http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf. I would send a screenshot of what I'm seeing but I'm between moves and my servers are currently down. I would suggest using absolute urls for these things or use the next best thing /e7flux2012/fonts/creampuff.ttf since that will point the browser at the root of your site and build the path out to the proper spot. Once you get the src property set correctly things should be working much better. As to why people may see the fonts just fine, one thing to keep in mind is that if you have the font installed on your computer then you will see the font show up just fine because your computer has the font and the browser is able to grab it from your machine. This is also why others may have had no problem viewing your page with the specified font. If you want to test @font-face make sure you test it from a machine that doesn't already have the font installed. Jason, The reason I have a hard time wrapping my head around you stating that no browser can render the Little Days font is because that isn't true. I can see the Little Days font on my machine on all browsers as plenty of other people have as well when I originally posted. Here is the link again for anyone following and who would like to chime in on wether the Little Days font is rendering: http://www.e7flux.com/clients/sof/ Even a friend with a Mac can see it and I highly doubt she's got Little Days installed - I honestly don't think many people would unless they are a designer. if what you're saying is true I would have heard from the client by now about the issue. So perhaps something is going on in your machine. Perhaps you have default settings on your machine or browsers - I don't know. But I can not accept that Little Days is not rendering in any browser when I can see the font for myself on my machine. I can also see creampuff with the exception of FF. All that being said, I'm not negating that it's probably best to use absolute paths but in the case of the creampuff font not rendering in FF it didn't make a difference even when the path was changed to absolute. In fact, if you inspect the code you should see that it's an absolute path now and has been for the last several hours. Elli Vizcaino Helping artists, entrepreneurs and small businesses knock the socks off the competition! http://www.e7flux.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
When you use a path like fonts/creampuff.ttf that is relative to where your css file is located at and so the browser is going to look in http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf. I also think you're convinced it's an absolute path issue but it's not. You get an error message because I'm a WP and it's PHP driven and directories just work a little differently - people just cant get direct access to a directory on WP, just because it exist - it just doesn't work that way. And as already stated several times FF doesn't render the font even w the absolute path. Someone else already responded that there was an issue w the font itself a corruption of some sort which is what I was suspecting and I was able to check it out in a font programmer which confirmed it was an altered version of the original. At this point, I am moving on to another font. And I will set up my @font-face the same way and send you a link directly to see what happens. Elli __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Am working on a coming soon page for my site and @font-face doesn't seem to be working. Not sure why .I implemented @font-face on another project and it was fine. Now it's not working for this. I am using a different font now - could this have something to do with it? I believe you need quotes around multi-word font family names -- both for the @font-face declaration and for the standard rule. Beth __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @Fontface Not Working?
Elli Vizcaino wrote:
On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino elli...@yahoo.com wrote:
Can you tell me what version of Chrome and OS you're viewing from? And
have you checked it out in any other browsers? Because it was never an issue
before. The link had been up for discussion in another post a couple of weeks
ago and plenty of people on the list saw it and responded. No one has ever
reported not seeing Little Days at all. So this is really surprising as this is
the first time I'm hearing this.
Creampuff on the other hand is the font in question for this topic and the
one
that doesn't show up for me in FF but does on all the other browsers.
My chrome version is 16. If you cold post a screen shot w browser and OS details
that would be awesome!
This is the case in all browsers I checked with on Windows XP (IE7,
Chrome 16, FireFox, Safari) and Mac OS X 10.7 (Chrome 16, Firefox,
Safari). I mentioned littledays.ttf because you said it worked and
that you used that same code for creampuff.ttf, but the reason
creampuff.ttf doesn't work is because you never had working code to
begin with since you're littledays.ttf does not work either.
Currently, the font that renders on your
http://www.e7flux.com/clients/sof/ project for me is Monotype Corsiva
since that is a font I have installed on my machines, but Little Days
does not render and no browser is able to get the font file because
the browser is looking in the wrong place based on your src
property. When you use a path like fonts/creampuff.ttf that is
relative to where your css file is located at and so the browser is
going to look in
http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf;. I would
send a screenshot of what I'm seeing but I'm between moves and my
servers are currently down. I would suggest using absolute urls for
these things or use the next best thing
/e7flux2012/fonts/creampuff.ttf since that will point the browser at
the root of your site and build the path out to the proper spot. Once
you get the src property set correctly things should be working much
better.
As to why people may see the fonts just fine, one thing to keep in
mind is that if you have the font installed on your computer then you
will see the font show up just fine because your computer has the font
and the browser is able to grab it from your machine. This is also
why others may have had no problem viewing your page with the
specified font. If you want to test @font-face make sure you test it
from a machine that doesn't already have the font installed.
Jason,
The reason I have a hard time wrapping my head around you stating that no
browser can render the Little Days font is because that isn't true. I
can see the Little Days font on my machine on all browsers as plenty of
other people have as well when I originally posted. Here is the link
again for anyone following and who would like to chime in on wether the
Little Days font is rendering: http://www.e7flux.com/clients/sof/
I don't have Little Days installed here. Using FF9.0.1 on that site,
error console says:
Error: downloadable font: download not allowed (font-family: Little
Days style:normal weight:normal stretch:normal src index:0): content
blocked
source: http://www.e7flux.com/clients/sof/css/fonts/littledays.ttf
Source File: http://www.e7flux.com/clients/sof/css/styles.css
Line: 0
Source Code:
@font-face { font-family: Little Days; font-weight: normal; src:
url(fonts/littledays.ttf); }
Don't have Chrome around here to check. Fonts (and much other) problems
when viewed in Konqueror 3.5.9, but that's an old version of Konqueror.
--
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
