Caching fonts problem

Hello,

for some time I've had this problem with my installation. I was ignoring it until now, but at this point I have to react.

So, it's quite a strange thing that I'm presuming has something to do with caching fonts. Sometimes when I browse the site in different browsers, the fonts don't get loaded and I get the text displayed in default font. After doing a hard refresh, nothing's changed. After opening the same problem page in same browser, but on another computer, it's the same problem. After opening the same page in different browser, it may or may not be there, it seems to happen in all browsers but different pages.

Anyone had a similar experience? What can I do about this?

You need to provide more information about the site in question for example are the font issues specific to the MODX Manager or the Public Website? If the public site could you share a link to the site? What fonts aren't loading and where are they being loaded from (local/cloud?).

It sounds like a HTML/CSS problem without any further information.

Hello,

the fonts don't show on the public site, not the manager. I have shared the link on PM. Font is Maven PRO, located at the top left of the page (Name), loaded locally. The only thing loaded from the cloud is an ajax lib (now I'm not sure if that's a good idea).

Sometimes it loads, and sometimes it doesn't. Right now, I've tried a bunch of stuff and it shows properly.

This is not a problem related to Modx

If it weren't related to MODX, souldn't it be consistent with browser re-loads?

You just use Modx to "present" the frontend to the user. How you implement fetching custom fonts is up to you. It has nothing with Modx as a CMS to do.

I guess you either have a corrupt font, font that is not valid in all browser, a cloud service that does not handle all your requests or something like that. Either way, I am pretty sure it has nothing to do with Modx.

If you could post the code or/and link here, I'd be glad to take a look at it.

Hmm... I'll try to take a look at the code once more. Failing that, I'll post code and the link.

Hello,

OptimusCrime is correct, the problem is with your code and not MODX itself. That being said looking at your website a few suggestions. Consider switching to Bootstrap 3 as the code is more refined, not to mention better responsive breakpoints. This will also save loading the bootstrap responsive css file so one fewer browser request and less page overhead.

You should merge CSS/JS files where possible to eliminate browser requests, keep in mind one larger file loads faster than lots of smaller files. I generally put my framework file standalone followed by my customization css file which contains my overrides followed by any other scripts (ex: prettify). This allows me to update the framework quickly if required, and keep my customizations separate.

You should keep using a CDN for your common scripts where possible, personally I like cdnjs.com (http://cdnjs.com/) over Google as it's faster in addition to offering more scripts.

Twitter Bootstrap: http://cdnjs.com/libraries/twitter-bootstrap
jQuery: http://cdnjs.com/libraries/jquery

The use of the CDN resources also helps with parallel downloads, basically leveraging our super fast connections better.

Getting back to your original question/problem the font issues as noted earlier are related to your code. In addition to including three fonts (not recommended) you aren't including all of the formats as required for proper functionality across devices. I would recommend keeping to two fonts (one is better) to minimize load time, and where possible leverage CDN fonts (aka Google Fonts). If you can't find a Google Font that works for your purposes then use the Font Squirrel Generator (http://www.fontsquirrel.com/tools/webfont-generator) to generate all of the nessicary font files and CSS for inclusion.

Oh, and if you haven't already make sure gzip (http://salscode.com/tutorials/2009/10/15/gzip-htaccess/) and expires (see ht.access file from MODX zip) are enabled for your resources.