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.
Related
I want to use a custom font on safari to increase readability, but Safari doesn't seem to have an easy way to change fonts. I tried to use Safari's support for custom CSS stylesheets but the font still isn't rendering, what am I doing wrong with this?
#font-face {
font-family: 'Comic Code Ligatures';
font-style: normal;
font-weight: normal;
src: local('Comic Code Ligatures'), url('./Comic Code Ligatures.otf') format('opentype');
}
body {
font-family: 'Comic Code Ligatures';
font-size: 16px;
}
I have use this webfont in my website. In CSS it shown like this:
#font-face {
font-family:'PF-Tempesta-Seven-Compressed';
src:url('fonts/PF-Tempesta-Seven-Compressed.ttf.woff') format('woff'),
url('fonts/PF-Tempesta-Seven-Compressed.ttf.svg#PF-Tempesta-Seven-Compressed') format('svg'),
url('fonts/PF-Tempesta-Seven-Compressed.ttf.eot'),
url('fonts/PF-Tempesta-Seven-Compressed.ttf.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
It is linked in the following:
h1 {
padding-left:5px;
font-family:'PF-Tempesta-Seven-Compressed';
font-size:14px;
color: #4b4848;
background:#f3e600;
}
It works when the page size is bigger than 480px, but does not work when smaller than 480px. How is this possible...?
I have to use 'helvetica neue' as my asp.net default font. After installed in my pc, I able to add the font into my css, and it is worked while run the web application at local. But after I deployed into server. The 'helvetica neue' font is not working. Is it have to install the font on user computer?
My CSS:
#font-face { font-family: Delicious; src: url('../css/Fonts/HelveticaNeueLTPro-CnO.otf'); }
body
{
background: #fff;
color: #333;
/*font-family: HelveticaNeueLT Pro 63 MdEx;*/
font-family: Delicious, sans-serif;
font-size: 76%; /* all font sizes are related to this initial 'small' font-size setting (which is more or less 12pt) */
min-width: 730px; /* min- and max-width don't work in IE Win 6 and below */
max-width: 1250px;
}
your #font-face is not complete, and you need some more files:
EOT for IE,
SVG fir Ipad,
WOFF for FireFox
TTF/OTF for the rest
You can create those font files at Font Squirrel
#font-face {
font-family: 'Delicious';
src: url('../css/Fonts/HelveticaNeueLTPro-CnO.eot');
}
#font-face {
font-family: 'Delicious';
src: url(//:) format('no404'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.woff') format('woff'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.ttf') format('truetype'),
url('../css/Fonts/HelveticaNeueLTPro-CnO.svg#Delicious') format('svg');
font-weight: normal;
font-style: normal;
}
So I finally got the Birch font installed on my WordPress site. Now the font isn't sizing as I would expect it to be (click here). I have tried editing font-size, line-height, font-weight, font-style, ... Nothing seems to work. Strange thing is, on iPhone it works like a charm.
In my header I have added this.
<style type="text/css" media="screen, print">
#font-face {
font-family: Birch;
src: url('../wp-content/themes/zenon-lite/fonts/birch.ttf') format('truetype'),
url('../wp-content/themes/zenon-lite/fonts/birch.eot') format('embedded-opentype'),
url('../wp-content/themes/zenon-lite/fonts/birch.woff') format('woff'),
url('../wp-content/themes/zenon-lite/fonts/birch.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body { font-family: Birch, Tahoma; }
p {font-size: 1.5em;}
</style>
You've set the font-size on the body but nowhere else. Therefore your typographical elements are being rendered at the browser default size. You need to define the sizes on the individual components too, for example:
CSS:
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
I'm trying to use #font-face, but I'm not being very successfull.
Up till now, I've been using Google fonts:
// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
//CSS
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
Then I downloaded the fonts and tried using font-face:
This is my CSS:
#font-face {
font-family: 'Cuprum';
font-weight: normal;
font-style: normal;
font-size: 0.5em;
src: url('cuprum.eot?') format('eot'),
url('cuprum.woff') format('woff'),
url('cuprum.ttf') format('truetype'),
url('cuprum.svg#Cuprum') format('svg');
}
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
The fonts are located in the same folder as the CSS.
I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.
I'm testing with the following browsers: FF7, IE8
Update
I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the entire #font-face is ignored.
Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.
Here is the link:
http://www.fontsquirrel.com/fontface/generator
Hey Steven are you done with this?
Why dont you try this out.
insert this inside your css:
#font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
i hope it will work. :)
I think you could try it without the quotes around "Cuprum".
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
Also, there is sometime an issue if you/the user have that font installed locally.
To get around that, you can set a fake local reference.
See Paul Irish's Bulletproof #font-face syntax
EDIT
Two other things you might try:
change the font name to lowercase, cuprum.
Remove the following from the declaration:
font-weight: normal;
font-style: normal;
font-size: 0.5em;