I have some (test) HTML like so:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Monospace</title>
<style>
tt { font-family: monospace; }
</style>
</head>
<body>
<h1>Test Monospace</h1>
<p>This is normal text</p>
<p><tt>This is monospaced text</tt></p>
</body>
</html>
When I display this in IE the monospace text uses Courier New instead of the font I have configured in IE. If I do nothing other than delete the <style>...</style> block, it correctly uses the configured font.
It only does this for IE, not FF or GC. IE 9 on Windows 7.
It does this regardless of where the style's configured, including a separate stylesheet or using a style attribute.
The real problem is that specifying the font-family and font-size is key to fixing the browser's problems with monospace text using the following styles:
/* monospaced sizes are horribly broken in browser default stylesheets */
code, kbd, pre, samp, tt {
font-family : monospace,monospace; /* Chrome (but note that this makes IE use "Courier New" for some strange reason, as does plain monospace.) */
font-size : 1em; /* Firefox, IE,Opera */
}
Does anyone know how to stop IE from doing this?
monospace is not a specific font familiy. Exactly like serif or sans-serif, which are generic family definitions.
font-family: monospace; just tells the browser to use the default "monospaced font", which in this case is Courier New. See also this resource.
EDIT:
If you omit the font-family rule for tt in your CSS, IE9 seems to display the custom set plain text font. Please see this fiddle: http://jsfiddle.net/sVCwd/1/
Hope this helps.
It seems that in IE, monospace means Courier New. Changing the IE settings for “plain text font” affects the default font for some elements, like tt, but it does not change the meaning of monospace. In an old discussion someone who seems to know what he says writes: “(Please, no comments about the serif and monospace fonts which can be
selected using Tools, Internet Options. They have nothing to do with the
default CSS generic fonts.)”
If you want, as an IE user, to change the meaning of monospace, I suppose you would need to find an entry in Windows registry for it (I was unable to find it in Windows 7 – could not find IEFixedFontName for example).
But if you instead just want some elements rendered in a monospace font of your preference (which is mostly the same thing as far as practical effects are considered), you could set up a user style sheet with content like
code, kbd, pre, samp, tt, xmp, listing, plaintext {
font-family: Consolas !important;
}
Related
I have got this annoying problem where I cant seem to find a way to use specific styles from the ACTUAL font family and NOT with css or html styling.
In my case I am linking in to the html Google's Webfont: Lato. Now I only need the styles Normal400 and Bold700Italics.
Naturally, when you select the fonts on googlefonts, it generates the codes automatically. I copy and paste both codes one in my html doc and the other in the css. but I can't find out how to use the styles Normal400 and Bold700Italics of the font lato.
What I am getting at is the same as using a FONTS' 'italic' and 'bold' styles rather then an emphasis or bold tag in html to style. There is a massive difference in the outcome of the font's aesthetics.
Is there a way of doing this? If so, do I have to use the #fontface rule in my css or is there another way round it as I am scared of using this rule sometimes.
I have looked everywhere, even on google's forums and they all give the same answer: "font styling with css or html."
Link to the fonts:
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>
Declare the font in your css:
.Lato-italic-700 {
font-family: 'Lato', arial, sans-serif;
font-style: italic;
font-weight: 700;
}
Place the class on the element you want it to be displayed on:
<p class="Lato-italic-700">This is Bold 700 Italic text</p>
It’s not clear what the problem is. But basically, when you have used a link element, as suggested by Google, to use Lato in regular and bold italic typeface, then any text for which you declare font-family: Lato, will appear
a) in Lato Regular, if its font weight and font style are normal
b) in Lato Bold Italic, if it has both font-weight: bold and font-style: italic applying to it
c) something else in other cases, possible e.g. synthetically bolded Lato Regular, if font weight has been set to bold but font style is normal.
For example, the following produces first Lato Regular, then Lato Bold Italic. You can (and normally should) use other markup or CSS instead; this is just a simplistic example:
<!doctype html>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic'
rel='stylesheet' type='text/css'>
<style>
body { font-family: Lato; }
</style>
Hello<br>
<i><b>Hello</b></i>
If problems remain, please post your HTML and CSS code and explain what you mean by “font's style not html or css font style” and how you can tell the difference from the visual appearance.
I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}
I'm using the Google webfonts API to embed Droid Sans on a page. All is fine, except for the descenders (i.e. the dangly bits on y, g, etc). The latest versions of Firefox, IE and Chrome on my Windows Vista box are all cutting the bottom off.
<!DOCTYPE html>
<html>
<head>
<title>Droid sans descender test</title>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
<style type="text/css">
body { font-size: 16px; font-family: "Droid Sans", sans-serif; }
h1, h2, h3 { margin: 1em 0; font-weight: normal; }
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1em; }
</style>
</head>
<body>
<h1>A bug ran under the carpet anyway</h1>
<h2>A bug ran under the carpet anyway</h2>
<h3>A bug ran under the carpet anyway</h3>
</body>
</html>
The above code looks like this:
(source: thinkdrastic.net)
I've tried line-height, font-size, padding etc to no avail. I had some success with font-size-adjust, but the last time I checked it was Gecko only. Does anybody know of a fix for this?
With some help from #adamliptrot, I discovered that Droid Sans' descenders are absolutely fine at a few precise pixel sizes: 18, 22 and 27px. I adjusted my em's accordingly:
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
Not ideal, but it works:
(source: thinkdrastic.net)
Although your question is in relation to the Google Web Fonts API, the principle of my answer beneath is the same.
If the descendants are being cut-off when serving a TrueType Font, the most likely cause is that OS/2 metrics are incorrectly set (negatively) on the font.
The values that may need adjustment are WinAscent & WinDescent.
A quick and dirty fix would be to adjust these both to 0.
This can be done using Font Forge. Once the font is opened in FontForge, you can gain access to these parameters via the 'Font Info' dialogue.
I have checked the referenced ttf files, and even in windows font viewer the descenders are being cut. Seems more of an issue with the font being served rather than with your styles.
If you're using Font Squirrel, it seems the issue with the sans variant has been sorted, but the issue remains with Font Squirrel's serif variant.
For a fix for the serif variant, go to the Web Font Generator and load the font files you need (do not rely on the package they provide).
Click the 'Expert' radio button, leave all of the settings but under 'Advanced Options' change the 'Em Square Value' to '2162' and generate the font.
This renders the font properly at all sizes
we've been having the same problem...we tried using font squirrel. we tried using google web fonts. The font kept cutting off "hanging" letters like g. Also, the google hosted version did not appear as true and clear as the other ones. The font seemed a bit choppy.
Our solution:
We hosted the font ourselves without formatting it for the web. Then we converted the ttf file to an svg, .eot, and .otf, and uploaded those as our fixes for ie and mozilla etc.
If the tip at the top - changing font-size to....
h1 { font-size: 1.6875em; }
h2 { font-size: 1.375em; }
h3 { font-size: 1.125em; }
doesn't work for you, then add "line-height" to the element that is cutting off the descenders. ``
I'm just guessing here, but I've had the same problem occur when fonts get substituted. I just wonder if this occurs when say a font substitution replaces a 1024em font with a 1000em font or vice-versa. I had some major descender cut-off using a 2048em font. Might be worth investigating.
I had a similar dilemma and the line-height fix worked for me (i.e. I added this code to the Custom CSS section):
h2 { line-height: 140%; }
I've been doing front end development for a long time, and I have NEVER come across a bug like this before...
Save the following HTML to a file and view it in Firefox (mine is 3.6.3):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body { font-family: Helvetica, Sans-Serif;}
h2 {font-weight: normal;}
</style>
</head>
<body>
<h2>Some normal text <strong>some bold text</strong> weird huh?</h2>
</body>
</html>
If you don't want to give it a shot the output is like your cat walked across your keyboard while character map was turned on, except in the strong tags.
I feel like this may be a font issue? When I get rid of font-weight: normal it goes back to normal, but I don't want everything to be bolded in my h2... Anyone have any ideas? More importantly, is anyone able to reproduce this??
Thanks.
EDIT
Here's a screenshot. It works fine in all other browsers, and all text that has not previously been set as bold (normal text) renders fine.
This seems to be something Helvetica specific. Here is a number of reports with screenshots that look exactly like your case.
Mozilla Bug #444203 - Helvetica font rendering garbled/garbage on some web sites
Mozilla Forum - Firefox 3 displays garbage characters
They mention workarounds. On server side:
if the CSS definition defines the font family using font: instead of
font-family:, this bug does not occur.
when setting the font-family by way of font-family: (instead of by font:),
the error only occurs once you're showing fonts over 20pixels in size. It
doesn't matter if the font size is set by way of em or px, but once the actual
display size is over 20px, it gets garbled.
On the client side, it seems to be recommended to remove or re-install the Helvetica font. Can you check your fonts folder for any HELVETIC.TTF or similar files?
Have you checked your encoding?
When you remove Helvetica or Sans-Serif and replace them with other fonts, do you have the same problem? For example, have you tried using another fonts and then combinations of Helvetica and Sans-Serif with those:
Courier, Helvetica
Courier, Sans-Serif
This is may be due to a strange version of Helvetica loaded on your machine. Try disabling that font locally and see what happens.
Looks like this is something to do with the encoding (and not font).
Check your encoding as it is decided by firefox: View -> Character Encoding.
Is it UTF-8?
Does changing it to anything else (say Western (ISO8859-1)) change the characters?
Can you try disabling your addons, especially the theme and check (start firefox in safe mode)? Perhaps some add on is meddling with the encodings...
The idea in the following is the first #font-face is for Firefox, the second for IE, and Arial for anything else that can't make sense of the first two. Its all working except for I want to give a different size in the case of Arial, and haven't figured out the syntax to do that.
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf"); format("truetype");
}
#font-face {
font-family: TribecaIE;
src: url("Tribec0.eot");
}
BODY
{
FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}
I don't believe this is possible with css alone; we will probably need to use javascript.
All we want to do is specify a different font-size if Arial is the active font. Detecting the active font is not exactly straightforward, but here is one method that will work for our particular purpose. We can create a temporary element containing some Arial characters and measure its width, and then create a second element containing characters without specifying a font (so that it defaults to the "active" font) and compare widths. This won't tell us which font is currently active, but can indicate whether or not one of the embedded fonts was loaded with #font-face as they certainly won't have the same width as Arial. If the two elements' widths aren't equal we know that Arial could not have loaded, and so we will only adjust the font-size if the widths are equal.
Even if the browser is unable to load the Arial font, our test is still functional, because when we specify Arial during the test, the browser will default to the same font as it would for the second element. Both elements will still have equal width if the browser is unable to load the embedded fonts with #font-face.
If anyone would like me to further illustrate with code, I'll be happy to write the javascript.
This is not supported by normal CSS rules..
I believe your options are
the font-size-adjust property of css 3
javascript (jQuery), and check for current font to see which one of the three is effective and adjust the font-size accordingly.. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( you should also have a look at the http://www.modernizr.com/ )
I believe it is this (close to what you have):
#font-face {
font-family: Tribeca;
src: url("Tribeca.ttf");
}
#font-face {
font-family: Tribeca;
src: url("Tribeca.eot");
}
body {
font-family: Tribeca, Arial;
}
IE won't know how to open the ttf, so it won't bother. Then it will open the eot. Then, you just specify the font by the given name in the body declaration.
Target your browsers by knowing which one reads which type of declaration.
Conditional Comment load different CSS calls.
Then you can specifically tell each one to do something different per rule.
Also there is typekit
#font-face {
font-family: 'Tribeca';
src: url(Tribeca.eot);
src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
}
MSIE will ignore the last line cos it doesn't understand format rule. and yes as pointed by porneL above, format() should go in the src property.
local() will make supporting browsers use local font file if user has it instead of downloading from your server (and probably make IE ignore the line too).
as for the font-size adjustment, as pointed by Gaby: CSS 3 font-size-adjust. but it looks like it's not widely supported, yet.
To void code duplication with #font-face, you can do this via server side. If you use for example some urlrewrite, detect UA, if it's IE - return file with .eot extension, if it's normal browser - ttf.
As for me, it works great.
And for this case, you shouldn't change your css files, just should have 2 files: .ttf & .oet.
Although it's against normal good-practices when using CSS, you could use the !important declaration in your conditional CSS.
As an example, we create two stylesheets: the 'default' one, which will have a section for Firefox-specific styles and an Internet Explorer stylesheet.
Then, using the standard <link rel="" /> method of importing stylesheets:
<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">
<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
Within the 'default' stylesheet, our Firefox styles are wrapped in the following:
#-moz-document url-prefix() {
#my-id { font-size: 100%; }
}
This works because the #-moz-document url-prefix() section is how Firefox addons style webpages. So, other browsers don't understand it and therefore just skip it.
BODY
{
FONT: 140% Arial;
FONT: 195% Tribeca,TribecaIE;
}