In CSS, I usually go with the usual
font-family: Arial, Helvetica, sans-serif;
For a little change, I'm going for a font that looks like handwriting. Can some of the expert CSS folks here suggest what would be some of the safest fonts (most widely available in most browsers) that look like handwriting?
Similar to sans-serif there is a generic cursive that it a "font that resembles handwriting". This will vary by browser (as will sans-serif) but could be a good place to start.
Here is a survey of script family fonts installed per user (year 2012):
Cursive font sampler and survey results
They all look significantly different from each other so you'd lose some consistency, but some are quite widely adopted.
Their main installed fonts are (FOR WINDOWS ONLY):
Comic Sans MS 99.13%
Monotype Corsiva 82.29%
Bradley Hand ITC 63.02%
Tempus Sans ITC 62.68%
French Script MT 62.39%
You could use one of the Google web safe fonts: http://www.google.com/webfonts/family?family=Schoolbell&subset=latin#code
<link href="https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">
h1 {
font-family: 'Schoolbell', arial, serif;
}
There is no handwriting font that would be reliably available in most browsers across all platforms. There are subsets like the fonts that come with Windows Vista or 7 but if you want to achieve any serious reliable coverage, it's likely that you'll have to resort to delivering the font alongside the web page - which, sadly, makes things complicated.
Related SO questions:
How to add some non standard font to website?
How to use our custom font on our website
Fonts on the Web
I suppose Comic Sans or Lucida handwriting would be some of the most widely available 'handwriting' fonts, although they're not great fonts. You might be better served by looking into some of the font embeding options, either using fancy-smancy html 5 stuff: http://www.broken-links.com/2009/05/28/exciting-times-html-5-web-fonts/ which won't be entirely supported, or using sIFR which is flash based: http://www.mikeindustries.com/blog/sifr, or some combination of these solutions to reach all users.
Comic Sans would be the most handwritingesque font common to macs and pcs, that being said you could always embed a font in your page.
Read This: http://www.w3.org/Style/Examples/007/fonts
and for a non js way: http://css-tricks.com/css-image-replacement/
The only web-safe handwriting font is Comic Sans - if you want to inflict that on your users. ;)
For percentages, see the results of the Code Style survey as of this month:
Windows 99.13%
Mac 89.94%
Linux 60.95%
The most common cursive one on Linux is URW Chancery L, but it's not cross-platform.
There's an alternative.
If you're familiar with Javscript or Jquery.
There's a very nice script called "Cufon" that does a thing called "Font Replacement".
With this simple to use script, you can use ANY font you want on your website.
I suggest you start by checking it's documentation, then create the cufon-js version of the font and then use it !
With code like this, you would be already doing font replacement ...check this simplicity
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>
Please visit this website for more information:
http://cufon.shoqolate.com/generate/ (this is were you can generate your favorite font and make it ready to be used as a replacement on your site).
Remember to include the jquery file!
Related
On page load in IE, the page is displayed for a fraction of second with no custom font, then it renders fine. But this behavior is not in Chrome. Any suggestion how to prevent it.
Thanks
Use always google fonts for websites in this way.
Add in Html
<head>
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
Add in CSS
body{
font-family: 'Open Sans', sans-serif;
}
font loading speed depend on the size of the font, your browser cache, and the bandwidth of your network.
that aside, why there is no problem in chrome? it might be because of the way the browser was designed. IE is old, and I bet that your chrome is brand new. so it might be that chrome has a better thread management than IE.
what to do to minimize the effect? you can try to reduce the size of your font. for example, if you use the font for icons, then you can remove the icons that you are not using.
another way is to use windows build in fonts for display in IE, that way, the browser does not need to download fonts. for example, you can use century gothic, impact, or calibri
If I download and use this font on my web page, will it be able to render correctly on all browsers? I have checked on Google Chrome and it is not on the list of default fonts installed.
If not, is there an alternative that can be used so my web page will be able to render properly on all the browsers and operating systems?
You need to include a web-font in order to ensure your page renders the same on all browsers. A good repository of web-fonts can be found here:
http://www.google.com/fonts/
https://edgewebfonts.adobe.com/
If you own a licence which permits you to use the font on a website, you can use the following converter to change your font into a web format
http://www.fontsquirrel.com/tools/webfont-generator
An example of including and using a web-font :
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
body {
font-family: 'Open Sans', sans-serif;
}
Are there any sites except google that provide a library that one can link directly to in your css file?
Like google-webfonts #font-face so that they're hosting, and no local files for you.
{
font-family: 'Yanone Kaffeesatz';
font-style: normal;
font-weight: 400;
src: url('http://themes.googleusercontent.com/font?kit=YDAoL...JF4')
format('truetype');
}
There is Typekit ( http://typekit.com/ ), but it isn't free.
If you're after Japanese fonts, M+ fonts allow hot-linking and have instructions on how to do so on their site:
http://mplus-fonts.sourceforge.jp/webfonts/index-en.html
The license is open & free:
Unlimited permission is granted to
use, copy, and distribute it, with or
without modification, either
commercially and noncommercially
You didn't specify a particular language - and these fonts do have english characters in their font sets as well.
I use this one
http://www.fontsquirrel.com/fontface
There's actually a fairly large number of services like Typekit, just less well-know. However, like Typekit, almost all of them are paid services that require a monthly charge to use.
Smashing Magazine recently published a list of these services, which you can see here: Review of Popular Web Font Embedding Services
How about google web font?
Here's the tutorial on how to apply it.
And here's an example of it.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
I know of various ways to dynamically alter web pages' typeface properties via JS/DHTML, or replacing text with Flash-rendered fonts (with sIFR or Cufon). However, I can't find any good examples of dynamically changing the typeface used on a web page depending on user choice - with, for example, the use of a dropdown box or text links (to allow the choice of Arial, Helvetica, Lucida Sans and Gill Sans for example).
I'm sure I've seen this functionality in web sites before but I can't find anything written about it, let alone real world examples! Can anybody point out some good examples / proof of concepts / sites that have successfully implemented this feature?
Not sure if this will work, but could you embed a little CSS in the head of your page and then use JavaScript to modify the "font-family" programatically? I've never tried that before so this is just a guess.
<html>
<head>
<title></title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<p>your content...</p>
</body>
</html>
I've to implement custom font in a website, What should be used. Client is providing custom fonts.
All browser support (Including IE6 and in all A Grade Browsers)
text Selectable
Selection visible
Accessible with screen reader
Successfully degradable if JS is
disabled
Easy to implement and manage in less time
Mobile browser compatible
less performance issue
No purchase needed
Can be used as a link also
Font should look smooth like in
Photoshop
or is there any other better and free solution which has all these things?
Why not just use the bulletproof #font-face syntax as described by Paul Irish and back it up with alternate styles and javascript in conditional IE tags?
IE:
<style type="text/css">
...
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url('GraublauWeb.otf') format('opentype');
}
...
</style>
<!--[if lte IE 6]>
<link type="text/css" rel="stylesheet" href="ie_6styles.css" />
<script type="text/javascript" src="Cufon.js"></script>
<script type="text/javascript">
Cufon.init();
</script>
<![endif]-->
The only part of your requirements that is not met by this setup right off the bat is mobile compatibility across the board. Once you determine what platforms you want to support, this solution should be extensible enough to allow support for all of them as well.
If I were you id use #font-face and deliver a javascript solution (like cufón) to the older browsers.
use fontsquirrel
and a javascript filter
#font-face does not support IE6 as good as you would want it to. So if that is your requirement, don't use it.
Browser consistency is also a big problem with #font-face
I think you'd be better served to consider using images with Alt tags selectively, and relying on good usage and tasteful standard fonts.