0

I have a system where it was loading a fontface from my own server. I replaced this font for the google's webfont version (droid sans). In order to accomplish this, I removed all the declarations that were calling this font on my server, then I added the following line on each file that were using the font:

<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>

Ok, great! now I'm loading the font from google's repository. Nice!

The Problem:

Now, in some pages where I had only one request for the droid sans font on my server, the font located on google's repository is being called twice or three times, depending on the page. At first I thought it could be because the browser was downloading some of the variations of the font, depending on the page.. but I'm not confortable with this explanation because I believe should download everything just once. I really didn't want these unnecessary requests..

That said, I'd like your help to know if there's a way I could do to make sure it will be loaded once and that's it! Also help clearing to me why I'm getting this behavior.

See image bellow: webfont issue

sergioviniciuss
  • 4,596
  • 3
  • 36
  • 50
  • 1
    Hm, wierd... if it had the same URL it would be cached. I would like to see your code to be able to see why it loads multiple times. Don't you load it with JS or something other than the link rel above? – Tony Gustafsson Mar 18 '15 at 09:26
  • As far as I can tell, it's loaded before the caching finishes – Stephan Bijzitter Mar 18 '15 at 09:34
  • in fact the code is a bit buggy (developed by several different people), and I'm doing some performance improvements). Since it's really hard to explore all the system, I wanted to find a way I could make sure that, if it's already being loaded, so it won't load again. (I believe there may have some JS influencing this behavior) – sergioviniciuss Mar 18 '15 at 09:44
  • They have the same path, but completely different (file/resource) names, so obviously both are loaded. They are probably two different variations of the same font, like roman and italic or different weights. – GolezTrol Mar 18 '15 at 09:50
  • is this not down to you loading two different fonts (2 weights of droid sans (400 & 700)) – atmd Mar 18 '15 at 09:51
  • @GolezTrol, this is why I want a way to do some verification.. something to make sure if it's already being loaded, so don't load it again. – sergioviniciuss Mar 18 '15 at 09:51
  • @Periback Well, if you want to be sure, do a binary compare of the two font files that are downloaded. You will probably see that they are different files. You can even tell by the size in the screenshot you posted. – GolezTrol Mar 18 '15 at 09:52
  • @atmd, this is what I thought at first... that it could be the variations.. but since I already saw it being called 3 times in a page.. I know it shouldn't be this... Also.. I know in some pages that I had included the call to the webfont, these pages were included in other htmls that also had the webfont.. so I should remove.. the problem is to do that verification.. I based myself to call the webfont on the same files I saw it was being used before.. but well.. i got this problem – sergioviniciuss Mar 18 '15 at 09:54
  • @GolezTrol, so.. idk how to do a binary comparison on this case, but about the file size.. I didn't understand why they're different... do you know what could explain this? – sergioviniciuss Mar 18 '15 at 09:56
  • 1
    Because they contain different fonts. For instance if one contains the roman and one contains the italic version, the information needed to specify those fonts can be slightly different. Just as one png image is larger than another one, even if they have the same pixel dimensions. – GolezTrol Mar 18 '15 at 09:59
  • got it,@GolezTrol! So this is what I was thinking at first as I said:" At first I thought it could be because the browser was downloading some of the variations of the font...". You helped me clearing my mind about this! Thanks. What about a way to make sure it will load only once (on pages where it is being loaded more than once, for the exacly same path? Do you know some way?) – sergioviniciuss Mar 18 '15 at 10:04
  • I think you are trying to solve a problem that doesn't exist. If you include the CSS for the font only once, it will download the font only once, and even if you request it twice, the browser cache will probably handle that for you. – GolezTrol Mar 18 '15 at 10:13
  • yes.. the browser does that.. I just wanted to avoid it, but thanks anyway! You already helped me clearing up questions I had – sergioviniciuss Mar 18 '15 at 11:07

0 Answers0