@font-face problem

[unprocione]

Hi all!

I have a big problem. But maybe it’s a silly thing.
I’ve written a css with
@font-face {font-family: taller_evolution_rev;
src: url(taller_evolution_rev.otf);}

and locally it shows perfectly. When I upload all pages and otf file and css file on server, it doesn’t show.

. http://www.relifeservizi.com/about-us.htm
. http://img441.imageshack.us/img441/4915/schermata042456388alle2.png (printscreen from my computer)

I’ve never used that kind of css3 and I’ve learned it from a Gasston’s manual.
Really can’t understand what’s wrong.

[Senff]

Did you upload the font file (taller_evolution_rev.otf) to your server?

[unprocione]

of course :(

[Alen]

What browser are you using? `@font-face` might not be supported. Also check out this: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

[Paulie_D]

This is the error being thrown in Chrome…

>Failed to load resource: the server responded with a status of 404 (Not Found) http://www.relifeservizi.com/taller_evolution_rev.otf
Given URL is not permitted by the application configuration.: One or more of the given URLs is not allowed by the App’s settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App’s domains.

[chrisburton]

Wrong pathway to file is what I’m betting. Also shown by Paulie.

[chrisburton]

To also clarify, if you don’t need to support older browsers, Truetype and WOFF formats will work for IE9+, Chrome, Firefox, Android and iOS.

[unprocione]

For not making mistakes the font is at the same level of pages and css, so there is no path, just need to write the name of the file. I knew of some issues of browsers compatibility… I also converted the otf file into all other formats through fontsquirrel

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on April 5, 2013 */
@font-face {
font-family: ‘taller__evolution_revregular’;
src: url(‘taller_evolution_rev-webfont.eot’);
src: url(‘taller_evolution_rev-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘taller_evolution_rev-webfont.woff’) format(‘woff’),
url(‘taller_evolution_rev-webfont.ttf’) format(‘truetype’),
url(‘taller_evolution_rev-webfont.svg#taller__evolution_revregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I uploaded all files but still nothing changes. I don’t know, offline everything seems fine in chrome, safari and firefox (I don’t have IE and Opera unfortunately)…

[TheDoc]

src: url(‘taller_evolution_rev-webfont.eot’);

That means that it’s in the same folder as your stylesheet. Is that the case?

[unprocione]

yes!

this is a print screen from filezilla> http://imageshack.us/photo/my-images/836/printff.jpg/

[chrisburton]

Can someone provide the mime type code for htaccess? I’m on my iPhone and I’d like to rule that out as a possible cause.

[CrocoDillon]

You got a double underscore here, and your css font-family (`taller_evolution_rev`) doesn’t match:

font-family: ‘taller__evolution_revregular’;

I guess it’s loading the font from your local filesystem offline, beats me why it doesn’t do that online though, since you’d have the font installed. Changing the font-family in your @font-face to `taller_evolution_rev` should fix it.

I didn’t [get the 404](http://www.relifeservizi.com/taller_evolution_rev-webfont.woff), but it’s a different url so I guess you fixed that part (maybe running through fontsquirrel fixed that)

[unprocione]

DOH >.< fontsquirrel made the right code but i JUST did not change the font-family, so it wasn't working neither offline. U___u CrocoDillon thanks *.* so for future users with same issue… step 1 make sure you are allowed to embed the font you want to embed (free to use or commercial licence) step 2 upload it here http://fontsquirrel.com/fontface/generator

step 3 unzip, copy and paste the stylesheet and MAKE SURE your font-family is the same that fontsquirrel generator generated -_-”’

THANK YOU GUYSSSSSSS!!!!

[sohaus]

I know this is very old topic, but maybe my answer will be helpful for others ;) I had the same problem many times…
You should check OTF file rights on server, I don’t know if FTP clients or servers changes rights of file to 600 during copy, it causes 403 access error.
Changing rights to 644 solves the problem.

[cssblogger]

font-family: ‘taller__evolution_revregular’;

[Author]

Posts