0

I'm having a curious problem where fonts aren't loading on mobile browser. When I look on my desktop (mac, chrome) it's fine - fonts display, but when I view on my i-phone it seems like the fonts aren't being loaded.

I'm importing fonts via my stylesheet (@font-face) using relative paths so perhaps that's the problem?

Anyone run into this issue?

my styles.css is in the same directory as my html and my fonts are in a subdirectory "/fonts//" - again works on desktop web (both on my local instance and the working version deployed on meteor.com)

Any leads anyone has would be super.

Thanks

cmee
  • 45
  • 7
  • There isn't enough information here to answer the question. Recommended details: 1) A URL to a version of the site we can see, 2) An explanation of what is missing or incorrect about the site, 3) The CSS with the `font-face` directive. – David Weldon Sep 14 '14 at 03:46
  • Hmmm, sorry I thought I had posted this the other day. 1. http://www.placelist.meteor.com 2. Basically if I view this on my localhost the fonts work but as soon as I deploy it doesn't (actually if I view on the deployed version on my mac desktop I see the right fonts) 3. @font-face { font-family:GistUprightRegular; src: url("/fonts/gist/GistUprightRegular.otf"); src: local("GistUprightRegular"), url("/fonts/gist/GistUprightRegular.otf") format("otf"); font-weight: normal; font-style: normal; } – cmee Sep 15 '14 at 14:26
  • So that's the definition of the font - I also need to know where it's applied. For example are you adding it as the defult font for html/body, only to paragraphs, etc? If I had the source, I'd search for it, but that isn't easy to do when I'm looking at the production site. – David Weldon Sep 15 '14 at 15:12
  • Just put on bitbucket - I have a feeling it's the way meteor is packaging things and not really with the css (I could of course be wrong). It would seem like to me a path problem or something - in other words when it's deployed something is either happening to the path or the font files themselves are not being uploaded https://bitbucket.org/cmeethree/place-list-css – cmee Sep 15 '14 at 23:45

1 Answers1

1

  1. The reason it's hard to troubleshoot on your local machine is because the fonts are installed in the system. Thus, it's not pulling the fonts from the app, but from your local OS.

  2. Where do you have the font files in the Meteor app? I think someone left a comment earlier saying you should put them in public folder.

These three threads seem to be answering similar question: Icon font from fontello not working with Meteor js trouble with font-face in meteor based on Discover Meteor microscope app using font-face in meteor?

Hope this helps!

Community
  • 1
  • 1
Yuriy Dybskiy
  • 115
  • 2
  • 7
  • They're in public in my meteor project. basically I have 2 folders in public: fonts and img. The images under image get loaded fine (no problems). The way I access them is /fonts/gist/. I'll probably end up moving them to typekit eventually anyway but it worries me that this is happening. I've never had this issue before. I would assume it would pull the fonts if it's pulling my images (again, if I look at http://placelist.meteor.com images show fonts don't). I'm truly stumped. Oh well. – cmee Sep 17 '14 at 23:30
  • Ok, I looked in the inspector under "resources". When I looked under "fonts" it showed the fonts that are part of the font awesome package but not my fonts. If I look in "img" it does show the images (which makes sense as the images are showing). But I would assume if I have my fonts under /fonts/gist/ in the same public folder I have an "img" folder it would pull those in. But it doesn't. But I also have no idea why if I view http://placelist.meteor.com I see the correct fonts if I view on MY machine but any other browser on any other device they don't show. – cmee Sep 17 '14 at 23:46
  • This issue is RESOLVED. – cmee Oct 15 '14 at 16:37