I have a font installed on my pc, but after using a font-face converter and changing the css suitably, the lines in my ul are more spaced out, the font-size hasn't changed, but the spacing between them has. What CSS do I need to use to revert this? Example: http://www.givetoagiver.co.cc/about.php
If you need any more information, then please ask, thank you
letter-spacing (http://www.w3schools.com/css/pr_text_letter-spacing.asp)
line-height (http://www.w3schools.com/css/pr_dim_line-height.asp)
The above two take care of all the distanced between lines and individual characters.
Still, if the font works OK when it's installed locally, there's a chance the conversion process introduced the problem. What tool have you used for the conversion? Have you tried Font Squirrel's converter? I've never had issues with it.
PS. The link you provided does not seem to work for me.
[EDIT]
#Yi Jiang suggested these links as an alternative to the ones provided by me:
http://reference.sitepoint.com/css/letter-spacing
http://reference.sitepoint.com/css/line-height
Each font can have its own spacing. Web fonts usually uses both the same spacing, so we use them without any issue. with custom fonts, sometimes we've got to change the line-height accordingly:
font: 44px/1.2em Sohoma;
1.2em is the line-height.
Related
See images:
Firefox on Mac:
Firefox on Chrome:
On chrome you can see that the same font using the same styling takes more room. What can I do so that all browsers will render the font the same way rather than adding more width to it?
I am using a font with #font-face property.
Unfortunately, there isn't much you can do about the way each browser renders your chosen typeface. Check out this article, it explains how different browsers and operating systems render different type face files:
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
In the meantime, you can do two things.
1.) There are many fonts that can be used that are effected by this rendering difference much less. Experiment with different fonts that hold the same esthetic value of the font that you are using, and try to find one that not only fits your typographic needs but also have a less distinctive difference between their individual renderings across different platforms.
2.) Create a script to sense the user's browser/OS and use that script to adjust your font-weight accordingly.
Best of luck.
You forgot to mention which of the two cases is the correct font rendering.
A few ideas that come to mind:
Since you mentioned using font-weight:600 I would try to replace it with normal/bold (depending which result you want) and check if it makes any difference. If the font file does not support a weight for 600 the browser will go on interpreting it by itself - sometimes it takes bold sometimes normal.
If the problematic browser is Chrome you can also try playing with font-smoothing - sometimes it helps improving the font rendering:
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
Also I'm not sure how you are implementing the #font-face - if you wrote it yourself I suggest generating your #font-face rule trough some service like Fontsquirell since it will generate a crossbrowser compatible code which often eliminates a few problems.
For more help you will need to expand your question with a bit more data - add the #font-face code, font name and specify which is the correct font rendering. Poor questions get poor answers.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
Is it possible to set a different font-size according to font availability?
Currently my problem is that Verdana is too big, and if the user don't have Verdana installed, I will end up with a very small font-size
Is there is any way to set a font (Verdana in my case) to 13px and if the user don't have that font installed, try with another font (Arial for example) but with bigger font-size?
Notes:
Preferably CSS only
CSS hacks allowed
As was answered just a minute ago by someone else (but already deleted?), you could use Font Detector Javascript solution:
http://jsfiddle.net/FHnJw/1
This might take some work to implement (I have not ever actually done it myself), but it seems that the font-size-adjust property helps "equalize" font's by standardizing the x-height. See http://www.w3.org/TR/css3-fonts/#propdef-font-size-adjust for the official description.
Font-size adjust only works with Firefox
The standalone 'font' css declaration only allows you to state font-size, style and weight once before declaring the different font families in succession so that's a no-go either
I'm sorry to say this cannot be done through css alone
As for the JS alternative, here's the one I recommend:
http://www.lalit.org/lab/javascript-css-font-detect/
Good luck
I'm stuck with a problem. I'm trying to embed fonts with #font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc...
The font looks always as it is bolded. I'm pretty sure it could look good because I've seen it used in many other websites with #font-face and it looks thin and fine.
See the attached image link text (I know it would never look as in PS, but so different?)
thanks
Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with #font-face is the right weight.
The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.
Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...
Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.
In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images
This could even happen if you are using <h1> tag. h tags makes the font looks bolder.
I'm using in CSS:
font-family:Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 11px;
The dimensione of the text in Windows XP/Vista/7 on Firefox/IE/Safari is different from OSx on Firefox/Safari and Ubuntu on Firefox.
Anyone know why this happens and has a solution for fixing it?
yes I had found this exact same problem,
this is because mac actually very slightly bolds every single font, sometimes noticably sometimes not, but enough to make a different to you.
do a google search for "css hacks" and have a root around or google saearch specifically "css font hacks"
alternatively try some obvious things like setting font-weight to none, or setting line height to 1.5 em:
let me know if this helps