I am using the #font-face in css3 to place some fonts on the website without using images for page headings.
However I found that a gap is created below the heading when using the font-face a bit like a paragraph or a line break. The gap size is relative to the font size and increase when the size is increased.
The font type that I am using is Asenine which is relatively small so I have the size set to 60px
I am not sure why this is happening and can't seem to find a fix.
Here is my CSS
}
#font-face {
font-family:'asenine';
src: url('fonts/asenine.eot');
src: url('fonts/asenine.eot?#iefix') format('embedded-opentype'),
url('fonts/asenine.woff') format('woff'),
url('fonts/asenine.ttf') format('truetype');
}
h1{
font-size:60px;
font-family:asenine, Arial, Helvetica, sans-serif;
text-shadow:7px 3px 4px #0c0c0c;
font-weight:100;
}
This might be happening because of line-height. The larger the font size, the larger line height. And use CSS shorthand for font related settings, it's better:
h1 {
font: normal 60px/0 'asenine', Arial, Helvetica, sans-serif;
text-shadow:7px 3px 4px #0c0c0c;
}
The first line means: normal weight, 60px font size, 0px line-height (to remove that space), font-families.
Related
The width of the space character (char code 32) varies in my text. This occurs in Firefox and Chrome. You can see the difference between the fullstops and C's in the below screenshot.
Relevant CSS:
#font-face {
font-family: "NewsGothDmBTWXX-Demi";
src: url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff2') format('woff2'),
url('/wp-content/themes/bluedot/fonts/NewsGothDmBTWXXDemi/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p {
font-family: "NewsGothDmBTWXX-Demi", helvetica, arial, sans-serif;
font-size: 20px;
text-align: left;
}
What I've tried:
Checked that I don't have the custom font installed on my machine.
The spaces are even when using the fall back sans-serif font
The spaces are definitely the same characters (asci 32)
Changing various properties like letter-spacing, font-kerning and text-rendering
The issue was due to being displayed wider than a regular space.
This was difficult to pick up on as viewing the source in both Firefox and Chrome didn't display the - I only picked up on this when copy and pasting from view-source to an IDE.
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.
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;
}
After a long search for the right font, I decided to create my own. I based it off a photoshop Arial font that was alised (pixelated = anti-aliassed:none).
Here is the photoshop rendition of the font
After, I created a font using FontStruct with the exact same pixel configuration it would show up in photoshop with each individual letter. I created the font, tested it in photoshop and it worked beautifully in photoshop. It would appear exactly the same. BUT then I added it to my website to be used and for some reason the browser shrunk the font horizontally.
Why did it shrink horizontally? My font size is 8px and at 8px it should show perfectly, but instead is is horizontally squeezed. Any thoughts? Thanks
The font is linked with css
#font-face {
font-family: 'Arial Pixel';
src: url('ArialPixel.ttf');
}
and it is shown through h1 tag
h1 {
text-align : center;
color : #FFF;
font : 8px 'Arial Pixel'; }
Font is here
You'll need to convert the .ttf file here http://www.fontsquirrel.com/tools/webfont-generator
From here you'll need to upload the font files (referenced below) to your server. Absolute URLs won't work with web fonts so keep it local
Use the following code
CSS
<style type="text/css">
#font-face {
font-family: 'arial_pixelregular';
src: url('arialpixel-webfont.eot');
src: url('arialpixel-webfont.eot?#iefix') format('embedded-opentype'),
url('arialpixel-webfont.woff2') format('woff2'),
url('arialpixel-webfont.woff') format('woff'),
url('arialpixel-webfont.ttf') format('truetype'),
url('arialpixel-webfont.svg#arial_pixelregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'arial_pixelregular';
font-weight: normal;
}
</style>
HTML
<h1>ABC</h1>
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.