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...?
Related
Hi I have a quick question on use CSS #font-face to create a font family.
Traditionally, I used to setup my CSS fonts like this:
#font-face {
font-family: 'My Font Regular';
src: url('fonts/myfont.ttf');
}
#font-face {
font-family: 'My Font Bold';
src: url('fonts/myfont-bold.ttf');
}
p { font-family: "My Font Regular";}
strong {font-family: "My Font Bold";}
However I've recently discovered that you can do it like this:
#font-face {
font-family: 'My Font';
src: url('fonts/myfont.ttf');
font-style:normal;
font-weight:normal;
}
#font-face {
font-family: 'My Font';
src: url('fonts/myfont-bold.ttf');
font-style:normal;
font-weight:bold;
}
p {
font-family: "My Font" ;
font-style:normal;
font-weight:normal;
}
strong {
font-family: "My Font" ;
font-style:normal;
font-weight:bold;
}
My question is, if I use the second technique in bold for example, will the text still render using the custom .eot or will the browser try to emulate it without the using the actual bold font file?
Thanks
If your font file is a bolded font, it would be redundant to set font-weight: bold and there's no need to declare font-weight: normal since that is the default value. You should also use more than .eot files so you have a fallback for other browsers like the others suggested.
Here is an example of what I use:
#font-face {
font-family: 'Franklin Demi';
src: url('FranklinDemi.eot'),
url('FranklinDemi.ttf') format('truetype'),
url('FranklinDemi.svg#font') format('svg');
}
#font-face {
font-family: 'Franklin Heavy';
src: url('FranklinHeavy.eot'),
url('FranklinHeavy.ttf') format('truetype'),
url('FranklinHeavy.svg#font') format('svg');
}
.sidansTitel{
font-family: 'Franklin Demi';
font-size: 22pt;
color: #8b9ba7;
text-shadow: 0 1px 0 rgba(0,0,0,0.01);
}
.sidansTitel b{
font-family: 'Franklin Heavy';
font-weight: normal;
font-style: normal;
}
Setting both font-weight: normal; and font-style: normal; makes the font render well in ie/ff/chrome, without it it looked like crap in Chrome. I believe that it looked like crap in Chrome because it tried to render the bold font in bold, which should be fixed by this.
EDIT: spelling
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 have a simple one-page layout, all HTML + CSS basically(will add some js soon but it's not there at the moment).
Baiscally i have this:
/* Cambo */
#font-face {
font-family: 'CamboRegular';
src: url('font/cambo/Cambo-Regular-webfont.eot');
src: url('font/cambo/Cambo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/cambo/Cambo-Regular-webfont.woff') format('woff'),
url('font/cambo/Cambo-Regular-webfont.ttf') format('truetype'),
url('font/cambo/Cambo-Regular-webfont.svg#CamboRegular') format('svg');
font-weight: normal;
font-style: normal; }
/* Source Sans Pro */
#font-face {
font-family: 'SourceSansProRegular';
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot');
src: url('font/sourcesanspro/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.woff') format('woff'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.ttf') format('truetype'),
url('font/sourcesanspro/SourceSansPro-Regular-webfont.svg#SourceSansProRegular') format('svg');
font-weight: normal;
font-style: normal; }
When i use font-family: 'Cambo Regular'; it works, but when i try to choose a font-family: 'SourceSansProRegular'; the font is not being loaded on any browser i try.
The original path for the fonts in the website folders was url('../assets/fonts/ --> rest copied from FontSquirrel
Since i noticed none of the two worked i moved them inside the folder where the css are so i have
main folder(with index pointing at the css folder)/assets/css(with my css)/font(with the two fonts folders inside)
Why is this not working? Am i missing something while declaring the path? If CamboRegular shouldn't work too but it's displaying just fine both on Windows and Mac on any browser.
QUICK EDIT!
I changed the path to a totally wrong one and it displays the basic page font.
I think the font is being loaded but it looks "bolder" than it should be. If you watch the design in Photoshop and then on the page it looks different(i made the design so i know it wasn't stretched or something) but CamboRegular is still looking and acting as it should.
Here's the image to show the problem
http://img526.imageshack.us/img526/2671/nnqu.jpg
The CSS for the the grey text is included in is pretty simple too
p {
color: #8a8a8a;
font-family: 'SourceSansProRegular';
font-size: 16px; }
And here's the one for the top menu(not shown in this image) with the CamboRegular correctly working
h1 {
color: #494949;
font-family: 'CamboRegular';
font-size: 48px;
text-align: center; }
As you can see it's nothing fancy but still, one's working the other isn't.
I have a problem when I choose a font in a CSS file. The font doesn't appear correctly in local HTML code.
#main_menu ul li
{
border-left:1px solid #dad8d8;
font-family:"arabic transparent";
font-size:16px;
padding: 0px 20px;
color: #e2001a;
list-style: none;
display: inline;
font-weight: bold;
}
The font in the HTML file isn't like in the Photoshop design.
You better use #font-face from CSS3. Example from W3School:
#font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
You have to embbed the font
Use the following website for font generation
www.fontsquirrel.com/fontface/generator
#font-face {
font-family: 'YourFont';
src: url('YourFont.eot');
src: url('YourFont.eot?#iefix') format('embedded-opentype'),
url('YourFont.woff') format('woff'),
url('YourFont.ttf') format('truetype'),
url('YourFont.svg#YourFont') format('svg');
font-weight: normal;
font-style: normal;
}
You cannot just use any font on the web/in HTML. You have something called web-safe fonts and can add custom ones manual.
Check FontSquirrel for conversion techniques: http://www.fontsquirrel.com
If a font is on your local machine, it "can" work if the browser tries to look for it, but you can't rely on it as most other users that visit your website won't have it on theirs, making the font fallback to Arial or an alike default font.
Font-squirrel will give you these formats (name is an example);
arabic.eot
arabic.svg
arabic.ttf
arabic.woff
With all these included all major browsers should be able to read your custom font with the #font-face property:
#font-face {
font-family: 'arabic transparent';
src: url('arabic.eot');
src: url('arabic.eot?#iefix') format('embedded-opentype'),
url('arabic.woff') format('woff'),
url('arabic.ttf') format('truetype'),
url('arabic.svg#arabic_transparent') format('svg');
font-weight: normal;
font-style: normal;
}
#main_menu ul li {
font-family: 'arabic transparent';
}
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.