Hiya,
So, i’m using @font-face in a site.
There are no issues when i test the site locally, or using matrix via an image. But when i use a live model of Matrix (4.4.1), the font files seem to take an awful long time to load. When i use /_performance, it appears there are no issues fetching the files and the page is processed at a respectable speed.
Client-side it is a different story, the template and layouts load with no text… then the ‘un-font-faced’ text appears. Sometimes, after a short while, the ‘font-faced’ text will appear… and sometimes it gives me nothing. When using FireBug or the Chrome Timeline tools, i can see that it is trying to fetch both files (one regular, one bold, both .ttf) twice each, one is fetched, the other is 404.
Both locations for the file are identical, and have identical filenames/paths. I have tried uploading the files as both Associated files of the style sheet, and as a “File” asset. Also tried pointing to them using “MySource_files/” and using their full web path. With the same results every time.
Anyone else heard of anything like this? Is this a CSS issue, or a Matrix issue? i havent a clue!
I have attached a screenshot of the timeline in FireBug, just incase it helps.
Thanks in Advance.
Ben
Picture 6.png (60.1 KB)
@font-face files in Matrix
Sure can…
@font-face {
font-family: "Florence";
src: url("http://matrix-4-4-1.sandbox.squiz.co.uk/_media/Florsn01.ttf");
}
@font-face {
font-family: "Florence";
font-weight: bold;
src: url("http://matrix-4-4-1.sandbox.squiz.co.uk/_media/Florsn02.ttf");
}
Firefox does not like absolute urls for font-face fonts. Try changing your css links to relative.
If you want to use absolute links, you need to send these fonts with Access Control Headers. ie. src: url("http://matrix-4-4-1.sandbox.squiz.co.uk/_media/Florsn01.ttf") format("truetype");
[quote]
Firefox does not like absolute urls for font-face fonts. Try changing your css links to relative.
[/quote]
Ive tried using the relative links, and still to no avail.
I added the Access Control Headers to the style and i get the same result. ive asked a few people around the office and no-one seems to have any answers. Im thinking it might be an anomaly on this particular sandbox version.
Im going to try migrating the site to another version and see if the results are replicated.
Could it potentially be the .ttf file itself?
Ive used another font file of the same font, but again produced the same results… im gna try and load a totally different font and see what happens… Watch this space.
WOW… didnt expect that. same issue, but this time… its making multiple requests for the file. Out of 18 requests, 6 come back fine, 2 aborted, and now there are still the remaining 10 waiting.
I haven't yet had an opportunity to test the site on a different sandbox version.
:s this is a massive pain in the arse… cos the rest of the page looks awesome… its just this infernal loading issue holding me back. 
[quote]
WOW… didnt expect that. same issue, but this time… its making multiple requests for the file. Out of 18 requests, 6 come back fine, 2 aborted, and now there are still the remaining 10 waiting.
I haven't yet had an opportunity to test the site on a different sandbox version.
:s this is a massive pain in the arse… cos the rest of the page looks awesome… its just this infernal loading issue holding me back.
[/quote]
I think to rule out this being a Matrix specific issue you would put all of your font files elsewhere on your server then make an apache alias. So then you could reference the files using that new URL and if there are no issues that way, you know Matrix is the problem.
Also, in Matrix, I would try making those font files live and public read so that they have __data URLs, I am wondering if it is something to do with how Matrix is serving them.
hi again…
so, i have tried using woff and otf filetypes… neither make any difference.
Cross-Browser: only minor differences in initial load time, but when it comes to rendering the text… that's where the problems start. Normally, the page will FOUT, then disappear, then display the formatted text, but occasionally ive had NOTHING.
i tried requesting the fonts from one of my own servers, cos i know they are quick and empty, and still the same issues.
I think im gunna present this one to my flatmate and see what he has to say… hes more back-end than front, but he does like a challenge.
hahaaaaa! YES!
thank you guys… that's fixed it. It was so strange that it rendered the text like it did before.
Any tips for handling @font-face better? preferred file formats? tricks and tips for better performance?
Cheers again!
[quote]
Any tips for handling @font-face better? preferred file formats? tricks and tips for better performance?
[/quote]
Yeah, get a font from http://www.fontsquirrel.com/fontface and take a look at their demos. They give great examples as well as provide all of the needed formats.
Or alternatively, if you're running a 'commercial' site purchase one from Fontspring which come with a really good licence, and gives you a wider range of faces.
[quote]
Yeah, get a font from http://www.fontsquirrel.com/fontface and take a look at their demos. They give great examples as well as provide all of the needed formats.
[/quote]
I spent alot of time on that site yday, its got some awesome font-kits, pretty much just copy & paste that stuff in and your ready to go.
[quote]
Client-side it is a different story, the template and layouts load with no text… then the 'un-font-faced' text appears. Sometimes, after a short while, the 'font-faced' text will appear… and sometimes it gives me nothing. When using FireBug or the Chrome Timeline tools, i can see that it is trying to fetch both files (one regular, one bold, both .ttf) twice each, one is fetched, the other is 404.
[/quote]
Make sure to have a recognisable font to fall back on after you declare your custom font which may help with visual/load issues and browser that dont support it e.g.
font-family: "Florence", Arial, foo, foo, sans-serif;
Nicks comments about the font packs are FTW, they provide all the files required to battle many cross browser problems and all the code/demo's to copy/paste from.