Firefox not loading quite right...(custom font)

kels88 · June 27, 2011

Hi. Ok so I just started using OSCommerce so excuse me if this sounds ignorant.

I am using a custom font. Everything seems to be working fine in Chrome and Safari (I dont have IE- I'm a Mac), but when you go to the home page the first time (where the url reads without the /index.php) it is not loading and defaulting back to Times. As soon as you click on any of the links though it is fine. Am I missing something? url: oneforakind.com/store/

Any help would be great. Thanks.

MrPhil · July 2, 2011

What do you mean by "custom font"? Are you using the new advanced CSS capability to download font files to a browser, and so display in any desired font? If all you did was to install a new font on your browser, keep in mind that it won't be usable by anyone else, unless they have happened to install a copy themselves.

Xpajun · July 2, 2011

Hi Kelli,

When I look at your site it is as you say, Times in Firefox and ofk_font in Safari, I'm guessing that the font might be a Mac one that is included in Safari (Chrome is a Safari spin off) but no other browser will have it.

Consider that about 70% of the people that browse your site are going to be using either IE or Firefox and only 19% using Safari or Chrome; so it might be an idea to rethink your overall font to take in one of the Browser Compatible Fonts and also consider using an image for your headings (in your desired font).

Pity that ofk_font is not available in other browsers - looks very cool ;)

multimixer · July 2, 2011

You can use @font-face to overcome this "broeser compatible" font thing, I've an article on my blog, it's a very easy thing to do and cross browser compatible

kels88 · July 2, 2011

Hi. Thanks for the replies. Yes I know to use the @font-face. I have had this in my CSS so it should embed the font if I am not mistaken so it should not matter what OS the browser is funning on. Correct me if I am wrong.

@font-face
{
   font-family: ofk_font;
   src: url('fonts/Blaimim_.eot');
   src: local(ofk_font), url('fonts/Blaimim_.ttf') format('opentype');
}

It works outside of osCommerce in FIrebox because I have used that same exact code on another section of the website and it was fine. Also. If you look at the link to the store that I am having an issue with ( www.oneforakind.com/store/ ) when you click on a click to something it then sees the font. Though I have seen that randomly Firefox will now see, when I have two in together, one of the " " as a non-breaking space and just leave it as text. What am I missing?

kels88 · July 2, 2011

You can use @font-face to overcome this "broeser compatible" font thing, I've an article on my blog, it's a very easy thing to do and cross browser compatible

I just tried doing this and changing my code. Still running into the same issue. It is not loading on the oneforakind.com/store/ but it is when you click on anything.

Xpajun · July 2, 2011

The   that shows is a typo you have &nbspI which is converted to &nbspI

Try dumping your browser cache for your other problem, for me it now first shows as times and then switches to ofk_font

kels88 · July 2, 2011

Try dumping your browser cache for your other problem, for me it now first shows as times and then switches to ofk_font

Yes, thanks. But unfortunately, the main problem is still there.

Xpajun · July 3, 2011

OK - this is just a google generated idea...

At the moment on a vanilla install template_top.php shows like this in the head section:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>

If you read it you will see that where you have your font css (in stylesheet.css) is the last thing that is read i.e. the browser has to read and activate 5 java scripts before loading your font. On a reload it took 2794ms before the stylesheet.css actually loaded.

My suggestion is to put stylesheet.css first:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>

I've indented it so you can see where I put it

kels88 · July 3, 2011

OK - this is just a google generated idea...

At the moment on a vanilla install template_top.php shows like this in the head section:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>

If you read it you will see that where you have your font css (in stylesheet.css) is the last thing that is read i.e. the browser has to read and activate 5 java scripts before loading your font. On a reload it took 2794ms before the stylesheet.css actually loaded.

My suggestion is to put stylesheet.css first:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>" />
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.8.6.min.js"></script>

<?php
 if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
 }
?>

<script type="text/javascript" src="ext/jquery/bxGallery/jquery.bxGallery.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/jquery/fancybox/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="ext/jquery/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="ext/960gs/<?php echo ((stripos(HTML_PARAMS, 'dir="rtl"') !== false) ? 'rtl_' : ''); ?>960_24_col.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>

I've indented it so you can see where I put it

Thanks for the suggestion Xpajun. I made the change, but unfortunately still no dice. I at least went back in and added a san-serif to the font-family in the stylesheet so it won't be Times anymore. I even went in and added the @font-face style directly into the top-template.php and the index.php. It is still only reading it after a link is clicked. Pretty much out of ideas at this point.

Xpajun · July 3, 2011

It changes for me using firefox after about 2-3 secs no clicking necessary - that's FF on Max

kels88 · July 4, 2011

It changes for me using firefox after about 2-3 secs no clicking necessary - that's FF on Max

Very strange... still won't do it for me. There has to be a way to make it do it right away. I will keep looking.

aiyou · July 4, 2011

I had similar issues - worked fine in Chrome, but nothing in IE 9, FF4 or FF5 or Opera 11.

Stumbled across a reference that the URL paths listed in the stylesheet were to be case sensitive. Made the change from /fonts/myfont to /fonts/MyFont and it resolved my problems.

kels88 · July 4, 2011

I had similar issues - worked fine in Chrome, but nothing in IE 9, FF4 or FF5 or Opera 11.

Stumbled across a reference that the URL paths listed in the stylesheet were to be case sensitive. Made the change from /fonts/myfont to /fonts/MyFont and it resolved my problems.

Tried this now too. Even after clearing my cache, still not working. In fact, I tried several different things and now it seems Firefox wouldn't even load the font on click (unless mine is just being stupid).

Xpajun · July 4, 2011

Kelli, just had a recheck: my laptop which is running Firefox 3.6.18 shows the font after 2 or 3 seconds, however my works machine is running Firefox 5 and on that your font doesn't change at all.

This would seem to be a browser problem - you expect it in IE but not Firefox - perhaps an enquiry to Firefox?

Incidentally I rolled my lappy back to FF3.6 from FF4 as there were too many incompatibilities with FF4 with a lot of the sites that I needed to access - personally I think they are trying to compete with IE for number of updates a year, unfortunately they seem to be achieving the same level of incompatibility as IE as well

kels88 · July 4, 2011

Kelli, just had a recheck: my laptop which is running Firefox 3.6.18 shows the font after 2 or 3 seconds, however my works machine is running Firefox 5 and on that your font doesn't change at all.

This would seem to be a browser problem - you expect it in IE but not Firefox - perhaps an enquiry to Firefox?

Incidentally I rolled my lappy back to FF3.6 from FF4 as there were too many incompatibilities with FF4 with a lot of the sites that I needed to access - personally I think they are trying to compete with IE for number of updates a year, unfortunately they seem to be achieving the same level of incompatibility as IE as well

Thanks for checking for me. I am running Firefox 5 and have it written in my contract that the most updated version is all I can promise things to work on (though I do do my best to make sure it works in other version as long it doesn't require hours of coding), so it is kind of bugging me. I been searching on firefox's site, seems to be a common problem. Modern IE? Sad day is Firefox is becoming the new IE.

Firefox not loading quite right...(custom font)

Recommended Posts

kels88

MrPhil

Xpajun

multimixer

kels88

kels88

Xpajun

kels88

Xpajun

kels88

Xpajun

kels88

aiyou

kels88

Xpajun

kels88

Archived

Browse

Activity