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>
Related
Let's say you want all the text on your web site to be in the Open Sans font. Is it enough to write,
html, body { font-family: "Open Sans"; font-size: 16px }
Or do I have to (in addition to the above) import Open Sans from google fonts?
In other words, do I really need to add a stylesheet from google fonts, e.g.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
Summary
What I'm really asking is, do I need to include the google fonts Open Sans stylesheet to format text in Open Sans? Or does Open Sans already come with most web browsers?
I would think that Open Sans comes with most web browsers. I would think that most web browsers have all the font files for standard fonts like Open Sans.
Open Sans is no web-safe-font so you should not assume the user has it installed.
You find more info about web-safe-fonts here:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#web_safe_fonts
I would prefer to load the font from my own server for privacy reasons. The is a good source for downloading google webfonts:
https://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin
The page seems to be down right now but just check later..
I am already using a font from google, and it works as expected :
#font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 900;
src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
Now I need another font from google and I don't know where to pick that url. The only url I can see on google fonts is (e.g for this font) is:
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
But the googleapis url does not work, if I replace the src with that url no font is loaded.
To locate all of the Google fonts you can go here:
http://www.google.com/fonts
Using # font-face with google fonts is not recommended...
They will (and should) host all of the "google" fonts for you. Having you host them in a new location is simply bad form... If another user visited a site with the same font, but served up form google, they would have to do a new server call to YOUR location...rather than use the cashed version google has.
To use multiple fonts, place a pipe character (Shift + Backslash = | ) in between the names in the link tag:
<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>
And then to your font family tags can call the appropriate fonts as needed:
font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;
You code only works for browsers that support WOFF for downloadable fonts. This is a direct consequence of just ripping off some code sent by the Google server to some browser. The Google server sends different CSS code to different browsers, and your code breaks this. Moreover, there is no guarantee that the URLs will keep working. URLs like
http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff should not be expected to be stable, and Google has made no statement about supporting the use of such URLs.
You can proceed with the rip-off strategy, with its drawbacks, by simply viewing, in your browser, the CSS code of a page. For example, on Firefox, you could use the Web Developer Extension, which has a command for viewing all CSS files for a page. Then you would copy the content of the relevant CSS file.
A better approach—assuming you don’t want to use fonts as hosted by Google—is to download the font files from Google (the Google Web Fonts pages have an interface for that, too, though they keep telling you don’t need to use it) and then generate the various font formats and a CSS file e.g. with FontSquirrel WebFont Generator. The results may differ from those you get by using Google-hosted fonts; Google does not disclose exactly how their font files have been generated.
I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.
I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
So I go to the URL and use the following code
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 200;
src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}
I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.
I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: http://imgur.com/OV2U1,ema2B)
My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?
There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).
Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
Add this to your CSS-file:
#import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff') format('woff');
}
I downloaded the fonts from the url the google css provided so I could use it without being online. The code works when clicking the .html file and opening it in a browser. However, when I place all my files on a local webserver it does not work.
Any ideas? Keep in mind, I will not be connected to the internet.
Adam there might be various reasons for this behavior as #Kyle suggested
First i would check the url to the font-file resolves correctly. From your CSS declaration above it seems that browser will expect the file to be present in same directory where CSS exists
Second and yes google might have blocked leeching/downloading the files. Only way to check this is first use the font to be loaded from google service 'Note the size of the file' then download and check the size. If they are same they do allow download
Third webfonts need to be browser specific here is the explanation from themselves
When a browser sends a request for a Font API stylesheet (as specified
in a tag in your web page), the Font API serves a stylesheet
generated for the specific user agent making the request.
so each time your browser requests the font you are actually downloading a small CSS snippet and then the Font family from the directory
Its strange if the font works fine on computer by opening html file, but not with the localhost. Are you sure you are copying all font files and placing in the same directory? Since the file name is so complicated and long, may be you are doing some mistake with the names? Are you using same browser?
And no, There is nothing like Google does not let downloading the files. Just to make sure, I have downloaded a font (GloriaHallelujah) from google fonts and tested with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Google font test</title>
<style type="text/css" media="screen">
#font-face {
font-family: GloriaHallelujah;
src: url('GloriaHallelujah.ttf');
}
h1 { font-family: GloriaHallelujah, helvetica, arial; }
</style>
</head>
<body>
<h1> Hello World </h1>
</body>
</html>
This work fine on desktop, as well as local host. May be you can download same font from here, place in the same directory and then test on your localhost and see.
On my Windows 7 IIS server I had to add woff in the mime types to get them to work.
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!