Website fonts and color problem

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 11 Feb 2013, 01:13

1) Fonts:
The website which I am developing requires some specific fonts. But the way different browsers render the font is very different. How to overcome this?
I am using Regan and Helvetica, but they are not supported in IE as they have OTF extension and IE requires EOT extension. How to overcome this problem?
Should I use Google fonts API? Using Google fonts, can this problem be removed?
If I use Google fonts, how do I reduce the load time of the page?

2) Color:
There's another problem with color. I have used specific color codes, but the way they are displayed in Chrome and Firefox is slightly different. Is this problem common or any solution on this exists?

cwdykarn · Post by **cwdykarn** » 11 Feb 2013, 03:46

1. You can convert any font format to what ever format you wannt,
imo look for a place to download the fonts you wanna use and load them with @font-face,

Make sure that the fonts you are using are legally eligible for web embedding.

http://www.font2web.com/

place something like this at the verry top of your css file

Code: Select all

@font-face {
    font-family: 'some-font';
    src: url('path/to/font.eot');
    src: url('path/to/font.eot?#iefix') format('embedded-opentype'),
         url('path/to/font.woff') format('woff'),
         url('path/to/font.ttf') format('truetype'),
         url('path/to/font.svg#ScriptinaProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@regards cwDYKARN^^

Post by **bad_brain** » 11 Feb 2013, 04:54

it's not possible to make a website (as soon as it's more than just very basic html) look 100% the same in every browser, so if it's just nuances in the colors you have to live with it.

for CSS there are also conditional comments, I am not 100% positive if they only work for IE, so that might be something for you to check out:
http://www.quirksmode.org/css/condcom.html" onclick="window.open(this.href);return false;

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 11 Feb 2013, 04:55

Yeah, that I know. Font conversion is not an issue, but the thing is I don't want to do that. Is there a single font which is similar to Regan or Helvetica and is supported in all the browsers? I don't want to increase the rework.

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 11 Feb 2013, 04:58

@b_b, I have tried that also. It sucks.
It'll increase my work.
For example, I have this code snippet for basic functionality:

Code: Select all

<html>
	<head>
    	<script src="browser.js" type="text/javascript"></script>
        <style type="text/css">
			.win.gecko p
			{
				font-weight:bolder;
			}
			.win.chrome p
			{
				text-decoration:underline;
			}
			.win.ie p
			{
				text-decoration:line-through;
			}
		</style>
    </head>
    <body>
    	<p>This is the browser.</p>
    </body>
</html>

So, the bottom line is, my work is gonna increase now.

cwdykarn · Post by **cwdykarn** » 11 Feb 2013, 07:40

I dont really see they issue about the font, convert the font file you want to use to a .woff format and you are good to go not much rework

http://en.wikipedia.org/wiki/Web_Open_Font_Format

Code: Select all

The format has received the backing of many of the main font foundries and has been supported by all major browsers:

    Firefox since version 3.6
    Google Chrome since version 6.0
    Internet Explorer 9
    Konqueror since KDE 4.4.1
    Opera since version 11.10(Presto 2.7.81)
    Safari 5.1
    other WebKit-based browsers since WebKit build 528

Post by **CommonStray** » 13 Mar 2013, 10:51

I dont really see they issue about the font, convert the font file you want to use to a .woff format and you are good to go not much rework

Don't use the font on the website unless you have an appropriate license to use it, that is, as long as its licensed for free and/or commercial use you're alright - also don't convert it unless the license you have makes it available to be converted for web compatible uses. CSS @font puts the font file in a position to be distributed, because anyone can look at your CSS. Helvetica is, from my understanding, not free to use. If your running an e-commerce site, the last thing you want is a phone call from LinoType's lawyers claiming you don't have a right to use that type.

Know your fonts, if your using a serif font-type make sure your fallback is also serif. Helvetica is a Sans Serif font-type, if your using it then fallback to Arial.

Using an API should be alright and shouldn't be too much of an issue on page load time. If your using one and your seeing a problem with it then results from those calls aren't being cached. Try setting up a cache system, or use something like Cloudflare in your production environment.

Or you can look http://www.fontsquirrel.com/" onclick="window.open(this.href);return false; which hosts and makes available tons of free for commercial use fonts, as well as a font-face generator to auto gen your font declarations in CSS (will also generate all the appropriate font files for that font).

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 14 Mar 2013, 11:58

CommonStray wrote:
I dont really see they issue about the font, convert the font file you want to use to a .woff format and you are good to go not much rework
Don't use the font on the website unless you have an appropriate license to use it, that is, as long as its licensed for free and/or commercial use you're alright - also don't convert it unless the license you have makes it available to be converted for web compatible uses. CSS @font puts the font file in a position to be distributed, because anyone can look at your CSS. Helvetica is, from my understanding, not free to use. If your running an e-commerce site, the last thing you want is a phone call from LinoType's lawyers claiming you don't have a right to use that type.

Know your fonts, if your using a serif font-type make sure your fallback is also serif. Helvetica is a Sans Serif font-type, if your using it then fallback to Arial.

Using an API should be alright and shouldn't be too much of an issue on page load time. If your using one and your seeing a problem with it then results from those calls aren't being cached. Try setting up a cache system, or use something like Cloudflare in your production environment.

Or you can look http://www.fontsquirrel.com/" onclick="window.open(this.href);return false;" onclick="window.open(this.href);return false; which hosts and makes available tons of free for commercial use fonts, as well as a font-face generator to auto gen your font declarations in CSS (will also generate all the appropriate font files for that font).

Thank you so much for the useful info.

z3r0aCc3Ss · Post by **z3r0aCc3Ss** » 15 Mar 2013, 01:13

There are some issues going on with fonts and images.
Is there any need to buy the specific fonts and images?
I am using some fonts and images, which are not free. I have got them through friends. I, obviously, don't own the copyrights.
Will this cause any problem in future if I just use them as it is without buying?
The website will mainly target US customers.

Post by **ph0bYx** » 15 Mar 2013, 05:14

I think so, you're using stuff that is copyrighted without having the right to use them. Same as hosting copyrighted mp3 illegally.

Post by **CommonStray** » 17 Mar 2013, 15:26

There are some issues going on with fonts and images.
Is there any need to buy the specific fonts and images?
I am using some fonts and images, which are not free. I have got them through friends. I, obviously, don't own the copyrights.
Will this cause any problem in future if I just use them as it is without buying?
The website will mainly target US customers.

If they're not free, and you don't own the rights to them, or a license to use them and/or sell them then you'll be at risk of problems in the future. Especially if your target audience is U.S. consumers - you're talking the most sue-happy people in the world along with corporations and companies looking for any excuse to file copyright infringement lawsuits these days.

Get a license for your typeface(font), either buy it or use free ones (they do exist) and make sure you keep that license somewhere it can be accessed/checked (just a txt file on the server, you don't even have to link to it unless a condition of the license is attribution).

If your using images you don't own, make sure your use of the image constitutes "fair-use" or obtain content you have a right to use.

suck-o.com

Website fonts and color problem

Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem

Re: Website fonts and color problem