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

timkeltytimkelty Member
in Bugs & Feature Requests edited December 2009
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');
}
Comments
  • lukeluke FoxyCart Team
    Thanks for posting, we'll take a look.
  • acidicacidic Member
    edited 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,
  • brettbrett FoxyCart Team
    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.
  • 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
  • brettbrett FoxyCart Team
    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?
  • 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,
  • brettbrett FoxyCart Team
    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.
  • @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.
  • brettbrett FoxyCart Team
    @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.
  • 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.
  • brettbrett FoxyCart Team
    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.
  • 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
  • brettbrett FoxyCart Team
    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.)

  • 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.
Sign In or Register to comment.