I'm trying to use this font on my web.
It's in Lithuanian language, but it's not the point, the point is, that on google fonts previewer I can see characters beautifully, but on my site some specific symbols gets some nasty look.
Maybe anyone knows how can I solve this, I say, issue?
P.S. Or recommend me some other standard very light font which I could use ...
I had the same problem with 'Open Sans' font, and spent 3 hours trying to fix this, until I discovered the solution.
Try specifying the subset that matches the glyphs for your language, like in my case:
from this
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
to
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
See if that fixes your problem. Obviously make sure you check if the font used supports extra subsets. Don't forget they also support Cyrillic and Cyrillic Extended.
Cheers,
Michael.
Those glyphs are not in the font. The standard fallback font of serif should be making it obvious; here’s what I see (using a pangram from Wikipedia):
If you download the font and look inside (using Font Book on Mac, or something like FontForge), you can see which glyphs are present or absent. To fix this, I would enter the characters you need into the previewer.
A quick selection of sans-serif fonts which contain the glyphs you need:
Museo Sans whose 500 weight may be used freely online.
Aller, which may require a license.
DejaVu Sans and Droid Sans, which many users will have installed.
Helvetica, Geneva, and FreeSans.
Trebuchet MS, Verdana, Calibri, Candara, and Arial, which almost all users will have installed.
Calibri appears to be a decent match for Lato, so you might use font-family: Calibri, sans-serif; (without embedding anything at all).
Related
So I am using the fonts this way
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' />
<style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style>
This is the result...
I am completely confused as how this can even happen? What am I doing wrong. The issue seems only on the home computer. Rest everywhere I checked its fine.
Home PC: Firefox, Windows 7 (In chrome the fonts are not displaying at all, its blank)
Try using Mozilla's CDN instead of Google's; the latter seems to be buggy with regards to the Fira Sans font.
Replace your googleapis.com link with this one and it should work:
<link href='https://code.cdn.mozilla.net/fonts/fira.css' rel='stylesheet' type='text/css' />
You might have to still use Google's CDN for Open Sans, in addition to Mozilla's for Fira Sans, but Open Sans doesn't seem to have this issue as far as I am aware of.
Do you have any custom settings in your GRAPHICS driver config? E.g. is Anisotropic Filtering, Antialiasing / etc. turned on? Firefox tends to pass some of those optimizations through, with bad results :-/
Try turning all of those settings to "Application-controlled" / auto / default whatever and see if that makes a difference.
I was having this issue. The cause was a misconfiguration of the time and date information in my computer. Once I adjusted that, google fonts started to work fine.
The html+css for Firefox in windows, looks fine, but same looks out of place in Firefox in Ubuntu. Please do let me know, as to how it can corrected, what should i do?
More info 1: The css code for the text in the attached image:
style="font-family:'Museo 300';
font-size:11px;
text-align:left;
color:#636466;
padding-top:3px;"
Although am changing Museo 300 to font to Arial, Helvetica, sans-serif, so it can load in any browser with these default fonts, but still i see the this problem.
image attached
Most likely the font you are using is not installed on the Ubuntu machine. To get around this you must supply the font yourself. Google Fonts is a great way to do just this.
You can search their site for a suitable font, and then link it in your site <head>.
<link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
And then use it in your CSS
font-family: 'Roboto', sans-serif;
Sadly, Google Fonts does not have the Museo font you are trying to use. However, you can use the #font-face CSS At-Rule to link to a font file which you are hosting on your site. Make sure that you only host the languages and font weight/style that you plan to use, and that your font file is limited to those same parameters. This will allow the file to be loaded much faster.
#font-face {
font-family: 'My Custom Font';
src: url('http://yoursite.com/yourfontfile.ttf') format('truetype');
}
p.customfont {
font-family: 'My Custom Font', Verdana, Tahoma;
}
(See this answer for more information)
I am in a Rails project and I am using two fonts which are in the /assets/fonts folder.
#font-face {
font-family: FuturaStd-Light;
src: url("/assets/fonts/FuturaStd-Light.otf");
}
#font-face {
font-family: HelveticaNeue;
src: url("/assets/fonts//HelveticaNeue.dfont");
}
The fonts are very big files (especially the second one) and it is taking forever to load them. And in every page the text appears after everything else.
Is there a better way to load the fonts? Is there a way to cache them? Any ideas?
#font-face is a wonderful technique, but large font files will definitely slow down your site. There are many techniques you can use to combat this:
use a font-hosting service like google fonts or typekit
host your font files on a CDN
optimize your font files using a service like fontsquirrel
One thing in particular to watch out for is that IE will block the rendering of the entire page if there's a SCRIPT element before your stylesheet. So make sure that all your stylesheet links are above any javascript files you're loading.
Further reading:
Web Font Performance: Weighing #font-face Options and Alternatives
#font-face and performance
fighting the FOUT
I agree with Scott, #font-face may slow down your site and so depending on your goals you may want to go with google fonts, typekit, or another online font provider. For a project I'm currently working on I chose google fonts. All you have to do is add the snippet google web fonts to your to your applications.html.erb:
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>
And then add it to your css file:
h1 {
font-family: "PT Sans", Arial, Helvetica, sans-serif;
}
i'm working on a website and currently using the #font-face tehnique (this + this) to load the fonts.
I noticed that some of the special characters are not loading properly -> ŠĐŽČĆ šđžčć.
This is, those characters exist in the font itself.
So, i made a test...
I loaded up a test page with #font-face fonts and cufon fonts...
The result is below ->
and of course, here is the code ->
<html>
<head>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
<style type="text/css">
#font-face {
font-family: 'ReprobateCROLASTRegular';
src: url('reprob_cro_last_last-webfont.eot');
src: local('ReprobateCROLASTRegular'),
url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
url('reprob_cro_last_last-webfont.woff') format('woff'),
url('reprob_cro_last_last-webfont.ttf') format('truetype'),
url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h2{
font-family:ReprobateCROLASTRegular;
}
</style>
</head>
<body>
<h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1>
<br/><br/>
<h2>--> #FONT-FACE --> šđžčć ŠĐŽČĆ</h2>
</body>
</html>
So far i've tryed switching the encoding from utf8, widnwos1250, and nothing seems to work with the #font-face tehnique...
So, i have two questions... Does anybody know what's going on here? And, if i switch to using cufon insted of #font-face - how much would that slow down the page loading? (concidering cufon uses JS to load the fonts)
Thank you for your time!
I myself had a lot of issues with #font-face recently while I was working on a web-font intensive web site and it turned out that the online web-font generating tools themselves were the guilty ones. They simply generated bad .woff / .ttf /.svg /.otf files which resulted in a lot of issues for which it was very hard to pinpoint the source of the problem.
In my experience the only online web-font generating service that provides 100% valid - issue free web-fonts is Font Squirrel. It also allows a lot of useful stuff such as font subsetting which might also be the problem in your case (i.e. you didn't specify to include additional characters in your generated web-fonts - Serbian / Croatian is part of Latin Extended B if I am not mistaking).
Have you tried it with http://fontface.codeandmore.com/ an alternative #font-face generator?.
The H2 has the wrong font definition: the single quotes are missing.
It is now:
font-family:ReprobateCROLASTRegular;
Should be:
font-family:'ReprobateCROLASTRegular';
You seem to have worked out the font issue; re: load times, my experience is that both font-face and cufon will potentially be slow enough to have a brief flash of default text. It depends on your host and the user's connection of course; but both methods require a relatively heavy download (either the JS or the font).
So, all else being equal IMHO you may as well use font-face; at least browsers are getting better at caching the font file so after the initial page load you can get faster rendering. With cufon it always has to load and execute the JS so you'll never get rid of that part of the load time.
You implementation is good.
But when you used font-face. The font that you used. Must have all the characters that you want use. The .ttf or what ever must have all the characters and special characters when you will used it.
When you used Cufon. The Cufon generator make a lot of extra font letters for you. In the font generator of Cufon. You can select a lot of extra's for the font.
Do you understand it??
Font looks different in different browsers. How to fix?
Font in FireFox,
Font in IE
I don't see any difference. I tried having a separate style sheet
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" media="screen" href="css/fontsie.css">
<![endif]-->
.
I also linked <link rel="stylesheet" type="text/css" href="fonts.googleapis.com/css?family=sans-serif">;.
Here is my code http://jsfiddle.net/priyaa2002/FfFwe/5
Well, obviously they're not the same font. Most likely, you're using a font that's available in Firefox but not available in IE. Can you give us any hints, like what the HTML is like?
Also, check what the default font settings are in both browsers. The Firefox one looks like a special font (taller and lighter than, say, Times Roman) and the other font is a barely serifed font (sort of sans serif with some swashes) like Ultima.
Update
Okay, I've got it. Your font-family is
font-family:Verdana, Geneva, sans-serif;
Your IE doesn't have either Verdana or Geneva (I think your firefox is getting Geneva) and so defaulting to sans-serif. If you really want them to all look the same, consider going to link Google fonts so your page will load fonts for you from Google's network.
I just fiddled that to
font-family:Verdana, Geneva, Times, sans-serif;
and it looks better.
Fonts will always render slightly different in different browsers, there isn't any way of getting around that unless you use images or a javascript solution. One popular solution is typeface.js.
I'd recommend reading up on typeface and doing some research into other solutions and try one.
Link to typeface.js:
http://typeface.neocracy.org/
Good luck!
Matti