@font-face support with automagicache

timkelty

I have some @font-face rules in my stylesheets and I've noticed Automagicache doesn't replace the paths like it does with images. It would be great if it did, otherwise I have to go in and replace them everytime for them to work!

Sample:

@font-face {
  font-family: 'Steinem Roman';
  src: url('styles/fonts/Steinem/STEINEM_.eot');
  src: local('Steinem Roman'), local('Steinem'), url('styles/fonts/Steinem/STEINEM_.woff') format('woff'), url('styles/fonts/Steinem/STEINEM_.ttf') format('truetype'), url('styles/fonts/Steinem/STEINEM_.svg#Steinem') format('svg');
}

luke · December 2009

Thanks for posting, we'll take a look.

acidic · January 2010

My @font-face is not working for cached templates.

@luke, was this ever resolved with automagicache?

@timketly
What did you do to resolve the issue? i just noticed the issue yet to dive into it.

* dove into it and found where to find the font urls to direct to the website's location

Thanks,

brett · January 2010

We believe that we _can_ make this work, but we haven't had a chance to attack the issue yet. Our caching script can cache binary files, but it serves them up with incorrect mime types, which can be problematic. We also don't have rules in place to find and rewrite the paths for @font-face URLs.

In the meantime, are you using a service to serve them up (Kernest, Typekit, etc.)? If so, they may offer https loading, which would skirt the issue.

acidic · February 2010

i found a another issue i think is related to the @font-face. my posting here http://forum.foxycart.com/comments.php?DiscussionID=1603&page=1#Comment_17145

brett · February 2010

Quick note: Use the updated GA tracking code. The automagicache is caching ga.js, which isn't needed (and will probably break things).

The "other issue" is really the same issue: Our template caching doesn't support webfonts yet.

I've just spent a bit of time looking into this and I don't have a quick solution. As mentioned previously, this is on our list and we do plan on addressing @font-face caching, but we can't get to it in the "right now". Feel free to bump this thread if you'd like an update, but it's going to take some time, and we have some other things we're working on right now. Can you serve the fonts as https from your end in the meantime?

acidic · February 2010

per request. reposting to this thread.
I'm having the same issue, live code at http://jewelrybyharlow.com/shopping_cart.html FF, chrome and IE, are saying page is not secure. I can not find anything not linking to the cached images, or has a https://storename.foxycart.com/
the only thing i can think of is i'm using the @font-face. i have found in Chromes debugers these errors

Resource interpreted as font but transferred with MIME type image/jpeg.
cache.phpResource interpreted as font but transferred with MIME type image/jpeg.
ReferenceError
arguments: Array
message: "doIt is not defined"
stack: "ReferenceError: doIt is not defined at chrome-extension://oangcciaeihlfmhppegpdceadpfaoclj/js/co"
type: "not_defined"

IE pops up a msg saying content not secure. if i dont load the content, page displays and says secure. fonts are wrong. if i load insecure content, fonts load, jackiesue font doesn't load right...

only thing i can think of is changing the mime type for the fonts, though i have yet to find one that works. searching says i may have to add a mime type for the fonts to my .htaccess file but i'm lost with this.

i need to get the secure thing figured out as my client is really bothered by the insecure content thing.

thanks,

brett · February 2010

Quick followups:
- As asked previously, can you host them securely on your end?
- You can't change the mime-types because they're being served by our server at that point (if you've cached them manually, as you have). I actually played with this but that's not the complete issue. Our caching script isn't designed to work with non-image files, which is the bigger issue.
- The Myriad only loads at all (I'm pretty sure) because you have local declarations set. Without those I don't think it'd load, same as the jackiesue.

acidic · February 2010

@brett I will see if i can host them with https on my end. I have never done this yet, so not sure how to proceed, i will do some research and figure out how to do this. If i cant, i will just have to let my client know that the fonts wont work on checkout, due to the limitations at the moment.

i still have the GA to set up correctly as well for the check out so the GA script will be removed from the checkout page once i get to working on it.

brett · February 2010

@acidic GoDaddy has certs for $13 or so, but we generally recommend SSLmatic.com at $20. Very fast process with them. Installing a cert, on the other hand, can be quite difficult depending on your host and such. We'll definitely try to address this problem as soon as we're able, but thanks for your understanding in the meantime.

acidic · February 2010

In checking with my host, i have to go to a dedicated ip with them, and do some set up items as well, at an extra $70 a year. I will probably end up converting the text to images, that need a special font, and just change up the css.

waiting for clients decisions now...

Let me know when @font-face is supported.

Thanks.

brett · February 2010

Yeah, ... sometimes hosts provide an SSL area for hosting at like https://foo.bar-39713.example.com/~your_account_name/
You might want to check on that. I haven't used shared hosting in _forever_ (with a few exceptions), so I'm not sure if that's still as common, but I know it used to be.

We'll update this thread once we figure out how to cache @font-face files.

timkelty · June 2010

For anyone who is wondering:

Manually adding the cache url after you do an update seems to work for font-face:
e.g.: src: url("https://mariecatribs.foxycart.com/cache.php?url=http://mariecatribs.com/assets/styles/fonts/Steinem/STEINEM_.eot"

;

See http://mariecatribs.com for an example

brett · June 2010

Worth noting is that it's probably sending the file with the wrong mime-type, which might cause problems, so as always, test test test. Thanks for sharing though, Tim.

(And that's a great looking site.)

Fleef · November 2013

I tried the solution above from @timkelty without any luck.

For anyone finding this thread, a robust alternative endorsed by the FC team can be found here:

https://wiki.foxycart.com/v/1.1/templates

The key is to use a service such as Font Squirrel to embed the font style in your css rather than caching the files.

Categories

The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.

If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

@font-face support with automagicache