PDA

View Full Version : fonts appear corrupted on website


orensurf
10-23-2011, 11:58 AM
hello,
im having a problem that i cant resolve no matter what i do.
i recently uploaded a simple website with free font (geosans) wich appear corrupted in 100% zoom and fine at 200% .
i tried "futura" font wich is the original one and it did me the same thing.

i even tried uploading the font (face time font) to the server and yet- nothing happened.
can anyone help me please?!?!

johnMoss
10-24-2011, 04:31 AM
When you say 'upload' what is it precisely you are uploading? Just a standalone font file?

Corrosive
10-24-2011, 07:42 AM
You need something a bit more complex than just uploading a font file. Try; http://www.fontsquirrel.com/

dbepp
10-24-2011, 05:16 PM
I'm kinda confused on what you're looking for Orensurf.. Are you wanting to use a specific font for your website? If so, check out:

http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

This may be of some help.

orensurf
10-26-2011, 02:00 PM
when i said i uploaded the font i also wrote inside the style:
@font-face {
font-family: 'geosans';
src: url('fonts/geosans.eot')}

that's where i put the font, its working- at first i see "arial" and than its downloading the font and the page is displayed with "geosans" but corrupted.

i thought the problem us with that specific font but that happened again in other fonts.

gentleone
10-26-2011, 02:25 PM
You need quites some more in your css to get your font crossbrowser in the first place. The .eot format is only for IE, but you need also an #iefix.
The css should look like this (example out of a stylesheet of mine):

@font-face {
font-family: 'RokkittRegular';
src: url('../fonts/rokkitt-webfont.eot');
src: url('../fonts/rokkitt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/rokkitt-webfont.woff') format('woff'),
url('../fonts/rokkitt-webfont.ttf') format('truetype'),
url('../fonts/rokkitt-webfont.svg#RokkittRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Follow the advice of Corrosive and use the @font-face generator on their site. If you do you will get something like the above with your font.

Corrosive
10-26-2011, 03:16 PM
Follow the advice of Corrosive and use the @font-face generator on their site. If you do you will get something like the above with your font.

I was going to say that! That's why I gave you the link. It is the best cross-browser @font-face generator I have found. It gives you all the code and all the font versions you will need.

johnMoss
10-26-2011, 04:09 PM
It is the best cross-browser @font-face generator I have found. It gives you all the code and all the font versions you will need. T, over & above using js for fonts? My immediate impression is the css is faster and obviously reduces the return trips for files, which is my number one concern. I'm still building out my site. Gzipped, minimized, js files combined, the last thing is the backgrounds, but the js font files are latency monsters... My download speed is still grossly insufficient...

Corrosive
10-26-2011, 04:30 PM
T, over & above using js for fonts?

Only fly in the ointment is older browsers but I believe in delivering something readable for those who choose to live in caves and something smart for the enlightened amongst us.

gentleone
10-26-2011, 04:41 PM
T, over & above using js for fonts?
What do you mean, John? The generated .ttf font just returns the variety fonts you need for all the majot browsers. Of course there are the several http requests to load the fonts and fontfiles are big, so it's recommended to keep the amount of fonts you use to a minimum. Using a good caching mechanism should be a priority as well.

johnMoss
10-26-2011, 04:45 PM
something smart for the enlightened amongst us.
Well spoken words sir :) How far back we talking? With js I'm seeing issues starting at IE7, so went online & seven is down to like 19% usage, so I'm with you... 6 & below I have one of those notices to change or die...

Corrosive
10-26-2011, 04:58 PM
My trick is when I see people with IE6 I shake my head and say 'you don't put your bank account details into that do you?' ;)

johnMoss
10-26-2011, 05:51 PM
Using a good caching mechanism should be a priority as well.
Can you elaborate on that part? I'm unfamiliar with the methodologies of using a standard font file for text replacement. I'm relatively new to the process, and have been using javascripts, i.e cufon-replace & such. The actual javascript font files are huge though... I'm assuming here ya'll are referring to a different font replacement format?

gentleone
10-26-2011, 06:22 PM
Can you elaborate on that part? I'm unfamiliar with the methodologies of using a standard font file for text replacement. I'm relatively new to the process, and have been using javascripts, i.e cufon-replace & such. The actual javascript font files are huge though... I'm assuming here ya'll are referring to a different font replacement format?
Yes, we're talking about @font-face where no javascript is involved. Cufon is an old method of font replacement.. the same goed for sIFR. They were good custom webfont alternatives for that time, but had there drawbacks... for instance you can't select the text on the screen and you had to rely on javascript for it to work.

For caching I use the HTML5 cache manifest. It's actually for web apps so that they can be used offline as well, but works for normal websites too and it's better and more reliable then the regular browser inbuild cache mechanism. And on top of that.. it loads all the files of the website in the background, so landing on one page of your site will load all the other pages and their assets too.

johnMoss
10-26-2011, 07:11 PM
And on top of that.. it loads all the files of the website in the background, so landing on one page of your site will load all the other pages and their assets too.

Bingo... I'm on it... Thanx :)

gentleone
10-26-2011, 08:09 PM
Bingo... I'm on it... Thanx :)
Make sure you have a good read about it, because you have to work with version numbers (with comments in the manifest file) if you update files.
http://html5doctor.com/go-offline-with-application-cache/

There is also a way to do it dynamically
http://www.sitesketch101.com/creating-a-dynamic-html5-cache-manifest/

johnMoss
10-26-2011, 09:33 PM
Great information bro, thanx!

gentleone
10-28-2011, 10:42 PM
I've stumbled on a helpfull tool that generates a manifest file from a given url, John. Although it does only stylesheets, javascript files and images from the img tag. Nonetheless a time saver. CSS background images and other assets you'll have to do manually, but you had to do that anyway :)
http://manifested.dregsoft.com/

johnMoss
10-29-2011, 06:30 PM
Thanx, I did a full read on the previous and developed a plan of attack. The font face is a huge timesaver latency-wise so I've been installing that and making some text format changes. I stopped on the mainifest until I get everything completed the way I want it, then I need to go back in and clean things up, minify & such. last thing on the list will be the background. It's still a monster and I've got it shrunk as much as I can; to some degree I may have to give up the ship on it. I'll get back when I'm done, out of curiousity I want to test the true download from overseas...

johnMoss
11-04-2011, 05:34 PM
Ok, I've gone in and minimized everything & set the manifest to fire nightly at midnight. When you get a lull moment sometime in the next couple days (& after midnight GMT+6) can you check it for speed from your end? The font-face has helped tremendously but I may have to give up the ghost on this background, it's still a monster... Thnx! Site as below my sig...

gentleone
11-04-2011, 06:39 PM
You can test the website speed from a lot of locations in the world yourself, John.
http://www.webpagetest.org/

That background image is big, but not really that big. Your website has issues with loading, but this can also because of an external javascript (Facebook) that is loading and therefor blocks the rest of your assets until it's ready. Also try to run scripts at the bottom of the page.

Did you run also the page speed test from Google?
https://developers.google.com/pagespeed/

johnMoss
11-04-2011, 07:58 PM
New toys, cool & thanx! I'll try these... I used the page speed tool with chrome & I'm scoring a 74. It's redlighting the compression suggestion, but everything's already been smushed. I'll see what yours says... The caching won't begin until tonight so I'll see what effect that may have tomorrow. Before I sent this I moved the google analytics on all pages to the bottom & it improved the speed by 6% so thank you, excellent suggestions. GA is the only thing in the head movable, all else is downstairs...

johnMoss
11-04-2011, 08:46 PM
Would you have a suggestion on G-Zipping the CSS file? Both of the analyzers suggest this as a top consideration. The web pages are gzipped and all works well, yet gzipping in the same manner on the css pages renders the css totally inoperative. There is another solution in adding to my htaccess, yet when I do so it renders my url redirect inoperative. A catch 22. I prefer the line command at the top of the page as i have done with the regular pages. Any idea why it's hiding the css?

I've tried:
1)<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
at first line of css page.

renamed file to .php and kept text/css in call; didn't work.
renamed file to .php and retyped as text/javascript; didn't work.
renamed file to .php and retyped as text/javascript and added
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
at top of css page; didn't work.
Thoughts? (Apache server)

johnMoss
11-04-2011, 10:13 PM
Addendum:
Adding the gzip code # 1 above to the javascript file & renaming the js file to .php was successful. Another 6 points in speed; I'm up to an 85 score. Cool beans... :)

gentleone
11-04-2011, 10:30 PM
There is another solution in adding to my htaccess, yet when I do so it renders my url redirect inoperative
I find this strange, because these are two totally different modules (mod_deflate & mod_rewrite)

I prefer doing all the gzipping, caching, expiring headers, etc. through htaccess instead of PHP, but there's no specific reason for that regarding performace... just to keep everything nice and tidy togther in one file I guess :)