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 had>the 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/
Re: [css-d] @Fontface Not Working?
On Wed, Jan 4, 2012 at 9:10 PM, Elli Vizcaino wrote: > 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. Really you had two issues going on. First was your pathing issue which prevented the rest of us from seeing the problem (unless we had the 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 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; } Also the error message I received was not because of WP, it was the standard 404 error you get for any resource that the browser tries to download that doesn't exist in that location on the server. In this case you're path was pointing to http://www.e7flux.com/e7flux2012/css/fonts/creampuff.ttf which clearly the font file did not reside at that location, and as I've said you've fixed that piece. It's always a good idea to open up the developer tools in either chrome/safari/ie/firefox and make sure the resources your html is requesting don't throw 404 errors due to improper paths. 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/ Here's what your site looks like on my local desktop (local code) with "Little Days" working: Top half of page: http://www.flickr.com/photos/meenfrmr/6641808569/in/photostream/ Bottom half of window: http://www.flickr.com/photos/meenfrmr/6641808525/in/photostream/ -- 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?
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?
Elli Vizcaino wrote: On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino 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/
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?
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?
> On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino 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?
On Wed, Jan 4, 2012 at 4:55 PM, Elli Vizcaino 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?
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 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 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? 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?
> 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?
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?
> 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?
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?
>> 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?
> 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?
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 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?
> 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 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?
On Wed, Jan 4, 2012 at 2:30 PM, 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; > } > 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. -- 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?
On Wed, Jan 4, 2012 at 1:16 PM, 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: > > 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?
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?
> 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/