When I render webpages with PhantomJS using Node.js on an EC2 server, I have trouble loading fonts. I have looked this problem up on Google and while people are having issues with this, none of the solutions really helped me. What I am looking for is a method for debugging PhantomJS and #font-face. I want to see what font files it is trying to load and where the problem might be occurring so I can fix it myself. Obviously this is very vague so here are some images detailing my problem:
Rendered on localhost (fonts are installed on the machine): http://imgur.com/o305T
Rendered on EC2 (fonts should be loaded from an external css file): http://imgur.com/6CQW7
I think the answer is pretty easy: You're rendering the image before the FOUT is resolved.
Check this: How to know when font-face has been applied
Related
I'm having problems getting SVGs to display correctly on my website, http://www.byfrequency.co.uk. Instead the site displays the fallback PNG's instead.
When I preview the site locally, they display fine in all browsers which leads me to believe there might be some kind of issue server side. Trouble is, I have no idea where to begin to rectify this!
(My web server is Windows 2008 and currently configured for PHP 5.2, ASP, SSI, Perl, ASP.NET 3.5, CGI)
Other things I've investigated is to inspect the object (logo.svg) within Chrome. All this gives me is a message saying "Failed to load response" and is highlighted in red. I've tried putting the files on the local root to see if that would make a difference which is doesn't. And finally, I've looked up numerous articles about displaying SVGs but to no avail.
On a semi-related note, my web fonts also seem to fail to load when the site is inspected but render correctly in Chrome/Safari but not Firefox. Again, the path to these files are correct but I can't seem to be able to rectify this error.
Any thoughts and ideas would be much appreciated!
Solved this now with the addition of MIME types within a web.config file.
I'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
I think I have installed everything needed and installed it correctly, but I am obviously missing something; or had a misstep somwhere along the line. I am on a Linux and I know for a fact the site works when viewed elsewhere. Here is a screenshot of what I see when I view the site locally: http://imgur.com/yPWcanu What are the common causes for this?
There might be some problems with paths. Open the Chrome development toolbar and check if there's a problem with loading the css files.
You should see them under the "Network" tab after reloading the page.
I'm having a strange issue loading my font faces on my new website. It seems that all but one font-face is displaying correctly.
The font in question on my website is deibi. It loads just fine on all other browsers, just not IE11 or any other version of IE for that matter.
Here is the link for comparison.
http://hemgroup.com/demoserver/jardin/
I'm done a few searches and tried a few different things but all not no avail it seems.
Any tips or suggestions on where to look would be awesome. Thanks everyone.
I can't seem to be able to replicate the problem but i did see some errors in IE when loading the page.
I was receiving this error message when loading your page:
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
File: deibi-webfont.eot
CSS3117: #font-face failed cross-origin request. Resource access is restricted.
File: economica-regular-otf-webfont.eot
IE has very strict rules on loading fonts and font permissions and i think that these may not be setup right. The headers may also not be being called in correctly and therefore may be causing an error on your side.
Have a quick read up on this error which i think is what the problem is: IE9 blocks download of cross-origin web font
I am having trouble figuring out a way to support #font-face having the font hosted on a different server/domain than mine. The way our server works - I have NO access to our server configuration files. I can only access a CSS/JS files, and am unable to then load font files to our server (I know...).
Ideally, I would like to reference the font(s) on the site I am branding from (I replicate a website design onto our product so that they can integrate it into their site relatively seamlessly). Reading through the following article:
http://www.unseenrevolution.com/solution-firefox-font-face-cross-domain-problem/
would I be able to utilize a similar method if I have the owner of the other domain add our domain to their HTACCESS file? I apologize if the question seems useless, but I am having trouble understanding how this works clearly - and I don't want to recommend a solution that won't work anyway.
Any help?