: Website Font Embedding, which way would be the best for cross browser capability? Sometimes clients of mine request a specific font to be used in their website. I try and embed it using CSS

@Annie201

Google option is good, but your best option is @font -face. It is supported in almost all browsers (except Opera Mini), which you can see on "can i use" and for the problem of some fonts being rendered differently on browsers, you just need to find the best settings for your font. Some browsers render light weight badly, like Lato on Chrome. Here are the settings i find to be working best:
@font -face {
font-family: 'Lato';
src: url('/content/Fonts/Lato-Light-webfont.eot');
src: url('/content/Fonts/Lato-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/content/Fonts/Lato-Light-webfont.woff') format('woff'),
url('/content/Fonts/Lato-Light-webfont.ttf') format('truetype'),
url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
font-weight: 300;
font-style: normal;
text-rendering: antialiased;
}


And then you add an svg font just to be used on webkit browsers:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font -face {
font-family: 'Lato';
src: url('/content/Fonts/Lato-Light-webfont.svg#latolight') format('svg');
font-weight: 300;
font-style: normal;
text-rendering: antialiased;
}
}


Experiment, that is the best way to know, and settings will be different from font to font.

Vote Up Vote Down

@Annie201

I'd wish there was a better answer than what I'm giving, but your best bet is to use server-side scripting to determine the user's web browser, then depending on the browser...

If it's old like Netscape 4.xx:

You can use the html font tag to define the font and size of the font you want. See: www.w3schools.com/tags/tag_font.asp
If the browser is too new to handle the font tag properly like most are now, then you'll have to stick with defining fonts in CSS:

Here's an example done with PHP:

<?php
$browser=$_SERVER['HTTP_USER_AGENT'];
$old=0; //assume new browser
if (strpos($browser,"netscape") > -1){$old=1;}
if (strpos($browser,"IE3.0") > -1){$old=1;}
if ($old==1){
//old browser HTML
?>
<font face="verdana">This is verdana font</font>
<?php
}else{
//new browser HTML
?>
<p style="font-family: verdana;">This is verdana font</p>
<?php
}
?>


As for specific fonts other than what I shown, you can replace verdana with the font name of that specific font but users will need to make sure they have that applicable font file on their system or the font rendering may be incorrect since the browser will find the next best font.

Vote Up Vote Down