Tutorials

Find the latest tricks and techniques for using or customizing your site with our software

Troubleshooting Font Issues

Our integration products are designed to make bridging user actions and visual design as easy as possible.  Sometimes the integration between Joomla and WHMCS works so smoothly that nothing more needs to be done.  Unfortunately there are times when template styles from Joomla conflict with template styles in WHMCS.  This walk through is designed for customers integrating Joomla with WHMCS using either J!WHMCS Integrator or Integrator 3.

Identifying you have an issue

The first step in any problem solving technique is to identify that in fact you have a styling issue.  This may seem simple enough, but many times different issues can share the same or similar symptoms.  Think of the last time you had itchy, watery eyes - was it because of allergies, the flu, a cold or a really sad movie ending?

Symptom - Debug Console

You can visit for example: http://jwhmcs.com/hosting/clientarea.php  This will result in landing on a WHMCS login page wrapped by a Joomla3 template from YooTheme.  There is very little change necessary for making the page wrap WHMCS properly.  Now visit http://www.jwhmcs.com/hosting/clientarea.php  This will result in a similar page, but notice that there are some font issues, mainly in the label and button fonts, but other places as well.

Notice the only difference is the URL - one has www, one does not.  Even though both are the same installations and both are the 'same place' on the Internet, they are actually on two different subdomains.  The first is on the root subdomain (nothing in front of the domain name).  The second is on the 'www' subdomain.  This may not seem a big deal, but if you view the www location in Firefox, right click on the page and click on 'Q' (Inspect Element) you will see the Inspector pop up.  Now go to Console and be sure CSS is toggled to see the console errors.

Upon viewing the console, you can see four different font issues, all of which are indicating something called CORS header not being there:
cors

What is CORS?  http://enable-cors.org/ will provide a walk through on what it is, but basically your browser can't load certain executable files like fonts across domains.  This is a security feature that is built into browsers, not actually a problem by default.

Font Awesome Icons look like cryptic squares

If you have a Joomla template using Font Awesome or any other font based icon set, you may see buttons, drop down arrows, smileys even check boxes all look like weird squares with strange characters inside.  This is what the font looks like when the font isn't loading up.  This is a tell tale sign that things aren't configured correctly.

Secure Pages are Broken

When going to a secure page in WHMCS, the browser may report the page isn't secure.  When this happens, not only fonts but images, css and javascript fail to load properly and will result in the page appearing really broken, with no styling.

Resolution

Great, you've identified the problem, now what?  Well, you will want to perform one of the following methods to get things working once more.

Enable CORS

This is an easy solution, but does require some .htaccess work.  If your server doesn't recognize .htaccess files, then you obviously can't use this method.  We have CORS enabled on our site because we use www, client and support subdomains.  Not enableing CORS would result in some broken fonts all over the place.

To do this, follow the step by step found at http://enable-cors.org/

Force Everything to One Subdomain

This is also a relatively easy solution, but is dependant on a few things.  If you have an SSL certificate for WHMCS, you should use whatever subdomain that certificate is for.  For instance, if the SSL certificate is only valid for www, then force all your pages to use www throughout your site.  This needs to be done on Joomla and on WHMCS.  The .htaccess file can be used to force a site to use www:

RewriteCond %{HTTP_HOST} ^domain.com$
RewriteRule ^(.*)$ https://www.domain.com/$1 [R=301,L]

Obviously change the domain.com to your domain.  Add that to your .htaccess file and save it (be sure that RewriteEngine On is at the top somewhere).

With the site forcing everything to one subdomain, check your settings to ensure WHMCS and J!WHMCS or Integrator 3 are also referencing that same subdomain.  WHMCS System URLs should be identical except for the https in front of the System SSL URL.  These are found in WHMCS > Setup > General Settings.  For J!WHMCS settings, you would look under WHMCS > Addons > JWHMCS Integrator > Settings and for Integrator 3 you would also check WHMCS > Addons > Integrator 3 > Settings and also in the Integrator 3 application itself.

Recent Posts

Blog Archived