2 Problems - Maybe Related - Don't Know for sure...

[Mega Moonshine]

Spent all weekend trying to figure out the source of 2 problems, wondering if they 'might' be related.

Problem #1: After installing a Zen Cart Template Theme and several mods (rebuilding site from scratch and previous site files as a guide via WinMerge to upgrade CLEAN from ZC v1.5.1 to v1.5.3) I noticed from the beginning that it takes TWO login attempts to login to the admin. First login just refreshes page and you to have you login again. Secend login works. If session times out, next login works fine. (No second try needed. Usually.)

Problem #2: Using CSS @font-face in stylesheet(s) to load some Ubuntu and Font-Awesome fonts, but on initial page load the fonts are not rendered and get (a) square symbol for the Font-Awesome "icon-right-hand" and (b) the text that is supposed to be a Ubuntu font is using the secondary/tertiary font (Helvetica, Arial) instead. When you refresh (F5 key) nothing changes (as expected due to browser cache), but when you cause a new page load (via link, Home button, etc.) then EVERYTHING looks and works just fine.

I tried researching this and trying different things, ie, re-install Db and Backup files (every mod or two I create Db & File backups), verified CSS paths and single/double-quote encapsulation for font-family name, etc. Just can't figure out the source of the problem.

I can live with the double admin login (actually, kind of nice for hindering brute force login attacks), but the 2nd problem of the custom fonts not loading/showing on initial page load is a Must Fix.

Any ideas anyone? BTW, the site is: http://www.myteefunny.com If you view page source, it will provide all the CSS and JS files, etc. for easy viewing (Firebug & Chrome webdev tools are handy indeed.)

PS - If this post should be under another section, by all means put it where it should be. I just threw it up here in a hurry... I'm heading back to the trenches to try more things.

Thanks!

[bislewl]

My two cents:

1.) Make sure you are using https: for all, and the url is the same.

2.) I have had this issue before, and the issue is resolved when I add the font file's extension to the CATALOG/includes/.htaccess

3.) Also when loading your website of https it is submitting some forms over http, so you may want to look at that issue.

[Mega Moonshine]

Thanks for getting back. Your suggestions prompted me to check those things and while doing so, I remembered a search result that didn't make sense at the time but now does!

Regarding Problem #2 (embedded @font-face not working as expected)

In essence, it was that many domains use (or can use) domain.com and/or www.domain.com. While I intend to use www.mydom.com primarily (and set it canonical), I do cheat and use just mydom.com in the URL address bar - plus my bookmarks was set just to mydom.com and not www.mydom.com.

Long story short, browsers allow for embedding fonts using @font-face, but browsers are very, very strict about preventing cross-site scripting. While www.mydom.com worked perfectly every time to render the @font-face (embedded) fonts, using just mydom.com did not and caused the symptoms. In other words, the browser correctly saw www.mydom.com and mydom.com as two separate domains and prevented the embedded fonts from displaying on the initial page load.

Now that I realized all this, I could do a proper web search using the right keywords to search for! (That is 90% of the problem of finding the right answer on the web - knowing what to ask and using the right keywords to frame the question...)

And I found this fix that works great for me and thought I would share it, with a few comments I added as well.

In the .htaccess file (CATALOG/includes/.htaccess) find this:

# but now allow just *certain* necessary files:
<FilesMatch "(?i).*\.(js|css|html?|ico|jpe?g|gif|webp|png|swf|flv|xml|xsl|otf|ttf|woff|eot|svg)$">
  Order Allow,Deny
  Allow from all
</FilesMatch>

BELOW it, add this:

# Allow Cross-Domain Fonts (domain.com & www.domain.com)
# For CDN's use just this for the <IfModule> section instead:
#	<IfModule mod_headers.c>
#	  Header set Access-Control-Allow-Origin "*"
#	</IfModule>
#
# Reason for CDN difference is lack of change control on how they serve content (servers, paths, etc.)
#
<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
  <IfModule mod_headers.c>
    # Note: If you have multiple domains, change (domain.com) below to:  (domain1.com|domain2.com|domain3.com) and so forth
    SetEnvIf Origin "http(s)?://(www\.)?(domain.com)$" AccessControlAllowOrigin=$0$1
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    Header set Access-Control-Allow-Credentials true
  </IfModule>
</FilesMatch>

Hope this helps someone else.

Now to work on Problem #1... Maybe. lol

[Mega Moonshine]

Well, Problem #1 is kinda sorta related to the now resolved Problem #2.

Both problems were due to using the keystroke shortcut of using just mydom.com and not www.mydom.com

Realize now that the site expects www.mydom.com and if it only sees or gets mydom.com, it will:

(1) For the admin login, redirect to www.mydom.com and you will need to login again... therefore 2 login attempts. Using the expected (as defined in configure.php) domain of www.mydom.com works fine and logs you in with one attempt (if the credentials are correct).

(2) For the @font-face not loading initially, it's basically the same thing occurring, the initial load won't render/show the embedded fonts as it is seen as a cross-domain issue and when you click a link and then the font(s) are now seen because the internal redirect removes/resolves the cross-domain problem on the second page.

There you have it. Maybe I did not describe it properly, but the gist of it all is there. So if you have bad habits like me of using the short mydom.com instead of the configured and expected www.mydom.com, well now you know why and how to fix it.

The .htaccess fix is still very valid because you cannot control what a user/visitor uses if they type in your site's URL. With the .htaccess fix, it works either way. As for the admin login... well, live with the double-login or type in the correct URL or update/edit your bookmark to the correct one! lol