I'm debugging this website. For some reason on IE9, the font sizes load normally and then shrink once everything has loaded.
What's causing this and how can it be fixed? I've double checked with the IE9 inspector and the px values seem to be missing from the body in the CSS.
Here's what I'm seeing via the IE9 inspector:
The CSS should read:
body {
color: #555;
font-family: "Avenir LT W01_55 Roman1475520", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.875;
font-weight: normal;
}
Apparently IE9 has built-in font-size: 100% for body aswell as html. Set font-sizes for p tag.
Related
I am using various versions of Halvetic on this website. For some reason they all display fine, except for one which is fuzzy. I have noticed that one some browsers it is better or worse - however, on my iPhone it is really crisp and perfect?
Are there any suggestions on how I can get this font to display correctly in modern browsers on a desktop (chrome/firefox etc)?
This is what I see:
URL: http://52.64.135.79/wordpress/company-overview/
Relevant CSS rules I can see are as follows. Is there something I can do to fix this?
h4, .h4 {
line-height: 21px;
}
h4, .h4 {
font-size: 16px;
}
h4, .h4 {
font-weight: 700;
}
h4, .h4 {
font-family: "Helvetica Neue LT W01_55 Roman", sans-serif !important;
margin-bottom: 5px;
padding: 5px 0 0;
letter-spacing: 0.00em;
}
body {
-webkit-font-smoothing: antialiased;
}
Ultimately the issue here was because the font itself has a separate character set for each different font weight.
The CSS was applying a font-weight of 700 to a font which was meant to be rendered at 400. The fix was to download the heavier weight version of the font, rather than allow the browser to create an artificial "bold" version.
Can someone explain it to me, why is my 1em font smaller than browser default? I set font-size on my body tag and using font-family: 'Open Sans', Arial, sans-serif;
Bootstrap sets the font size of <html> to 10px, you need to override this to get the browser default:
html, body {
font-size: 1em;
}
i guess that firefox is the only browser that doesn't support the font "Arial Narrow". And the other browsers don't support the "font-stretch" property. How can I target a specific browser with CSS? I have done this:
#-moz-document url-prefix() {
h2 {
font-family:"Arial";
font-stretch: condensed;
}
.header_p {
font-family: "Arial";
font-stretch: condensed;
}
}
h2{
font-family:"Arial Narrow";
font-size: 22px;
letter-spacing: 0px;
}
.header_p {
font-family: "Arial Narrow";
}
It isn't working and I don't know why..
If I swap the order so that the #-moz part is second, then chrome stops working. I guess it's trying to apply the #-moz rule
And IE doesn't read the CSS at all
From the much missed H Open Magazine:
CSS3 includes a font module which offers an #font-face declaration, allowing web developers to load fonts to ensure that their website displays with the right font. WOFF is the data format for these fonts.
A file format specifically designed for the web, it is a container which, as well as the (optionally compressed) font tables in sfnt format, can also contain metadata, such as licensing or other information.
Browser support is near universal.
Here's an example of how to use them.
Does that help?
I am not sure whether that font family is supported by firefox or not but you can
Target only firefox using
#-moz-document url-prefix() {
h1 {
color: red;
}
}
See complete documentation here
You can target IE as
<!--[if IE]>
// Your css for IE or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie9_and_below.css" />
<![endif]-->
target chrome only
#media screen and (-webkit-min-device-pixel-ratio:0) {
div{
color: red;
}
}
You can try the below snippet.
h2 {
font-family: "Arial Narrow";
font-size: 22px;
letter-spacing: 0px;
}
.header_p {
font-family: "Arial Narrow";
}
h2, x:-moz-any-link {
font-family: "Arial";
font-stretch: condensed;
}
.header_p, x:-moz-any-link {
font-family: "Arial";
font-stretch: condensed;
}
I downloaded this font
And this is how I include it into my stylesheet:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
}
And this is how I use it:
#site-header .site-logo a {
color: #00B1ED;
font-family: "surface";
font-size: 40px;
font-weight: bold;
letter-spacing: -1.5px;
text-shadow: 0 1px 5px #000000;
text-transform: capitalize;
}
#site-header .site-logo a span {
color: white;
}
#site-header .site-logo a span:last-child {
font-size: 22px;
}
the problem is that in google chrome it renders really bad:
but in firefox it works well:
Am I Doing anything wrong?
convert the font to embedded Open Type(.eot) and also add .woff for other browser support.
It renders properly in browsers.
Or try this for chrome -webkit-font-smoothing: antialiased;
Most Windows browsers will only render TrueType fonts with any degree of smoothness. OpenType (CFF) generally will not render well with the Windows rendering engine. Not only that but these TrueType fonts must contain hinting data that tells Windows how to place pixels at small sizes. Consider running your OTF through the Font Squirrel Generator to give you all the font formats needed along with the correct CSS code.
The problem here is that I was including the normal style font and then implementing the bold,
For some reason it was working in firefox so it make sense it failed on others, but this:
#font-face {
font-family: "surface";
src: url(fonts/Surface-Medium.otf);
font-style: normal;
}
#font-face {
font-family: "surface";
src: url(fonts/Surface_Bold.otf);
font-style: bold;
}
Made it work in other browsers too
Of corse, the bold.otf file must be included in the used path
I'm developing a responsive site and don't have a mobile device myself. (Still living in the dark ages as it were) Anyway, my colleague has sent me a screen shot of the site on an ipad.
The leading/line-height is awful, but looks fine in regular Safari. Here's some of the pertinent (I think) CSS:
#font-face {font-family: 'Rubrik-Regular';src: url('fonts/237360_5_0.eot');src: url('fonts/237360_5_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_5_0.woff') format('woff'),url('fonts/237360_5_0.ttf') format('truetype'); font-style: normal; font-weight: normal; }
#font-face {font-family: 'Rubrik-Medium';src: url('fonts/237360_6_0.eot');src: url('fonts/237360_6_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_6_0.woff') format('woff'),url('fonts/237360_6_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
#font-face {font-family: 'Rubrik-Bold';src: url('fonts/237360_7_0.eot');src: url('fonts/237360_7_0.eot?#iefix') format('embedded-opentype'),url('fonts/237360_7_0.woff') format('woff'),url('fonts/237360_7_0.ttf') format('truetype'); font-style: normal; font-weight: bold; }
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
html{font-size:81.25%;-webkit-text-size-adjust:81.25%;-ms-text-size-adjust:81.25%} /* shrink to ~13px body font without changing all other sizes */
/* 16px base font size with 162.5% (26px) line height */
body, button, input, select, textarea { font: 1em/1.6154em 'Rubrik-Regular', Arial, Verdana, sans-serif; color: #262626; }
Here's a side by side comparison:
live demo link
Why isn't the line height being respected?
This seems to have resolved it:
html{ font-size: 16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
I had mistakenly tried to adjust the font size down like so:
html{ font-size: 82.5%; -webkit-text-size-adjust:82.5%; -ms-text-size-adjust:82.5%}
And the size adjust parameter was sneakily killing my typography on mobile devices.