I've found strange problem on my site.
If add font in style like
font: 2.0625em/1em 'ColiseumCRoman';
it doesn't work in FF (28.0 version and in 29.0.1 the same problem)
Does not work neither the size nor the line-height nor the font. Caption is displayed by the default font.
but if I change style like
font-size: 2.0625em;
line-height: 1em;
font-family: 'ColiseumCRoman';
it works absolutely correct in FF!
I don't understand why! What's going on ?
PS. I use #font-face for adding this font
#font-face { /*ColiseumC*/
font-family: 'ColiseumCRoman';
src: url('../fonts/coliseumc.eot');
src: url('../fonts/coliseumc.eot') format('embedded-opentype'),
url('../fonts/coliseumc.woff') format('woff'),
url('../fonts/coliseumc.ttf') format('truetype'),
url('../fonts/coliseumc.svg#ColiseumCRoman') format('svg');
font-weight: normal;
font-style: normal;
}
Related
I used font face to use custom font in Chrome, but it doesn't works.
In Firefox, it works well. How can I fix it?
This is what I wrote.
#font-face {
font-family: 'abril';
src: url('./assets/fonts/AbrilFatface-Regular.eot');
src: url('./assets/fonts/AbrilFatface-Regular.eot?#iefix') format('eot'),
url('./assets/fonts/AbrilFatface-Regular.woff') format('woff'),
url('./assets/fonts/AbrilFatface-Regular.ttf') format('truetype'),
url('./assets/fonts/AbrilFatface-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
div.page-title {
font-family: 'abril';
}
I have used this font before. It worked well for me. Please try Using this Google Font (Hope its the same ). You can even download from there and use it.
I have a select element in my DOM, and I'm applying my own font through some CSS:
#font-face {
font-family: myFont;
src: url('myFont.woff');
}
body select{
font-family: myFont;
}
In Chrome, Firefox and IE the font looks fine. But in Safari v9.0.2, once the select is clicked, the font is lost.
I inspected it using WhatFont and got the following:
So it looks like this -apple-system - regular font has overwritten my own.
Is this standard Safari behavior?
Can I do anything about it?
try this i hope it will be work.
<style>
#font-face {
font-family: 'BebasNeueRegular';
src: url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.eot?') format('eot'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.woff') format('woff'),
url('https://cdn.css-tricks.com/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.ttf') format('truetype'),
url('/wp-content/themes/boilerplate/fonts/BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Due to specific client requirements, I need to use IE8 as the main browser for a website, for which they require that a custom font of their own be used on the page headings. H1's to be more precise.
The problem I'm having is that on exactly the same page (whatever the page), the heading is sometimes correctly rendered using the custom font, but other times IE8 messes up the text and apparently applies the fallback font.
Bellow are two screenshots, one with the font correctly applied, one with it not being applied:
Good font:
Bad font:
I have the following stylesheet where I define the rules for that custom font. I apologize in advance, but I cannot make the name of the font public (NDA in effect).
#font-face {
font-family: 'secretfont_exbregular';
src: url('../fonts/secretfontexbd-webfont.eot');
src: url('../fonts/secretfontexbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontexbd-webfont.woff') format('woff'),
url('../fonts/secretfontexbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontexbd-webfont.svg#secretfont_exbregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_ltregular';
src: url('../fonts/secretfontlt-webfont.eot');
src: url('../fonts/secretfontlt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontlt-webfont.woff') format('woff'),
url('../fonts/secretfontlt-webfont.ttf') format('truetype'),
url('../fonts/secretfontlt-webfont.svg#secretfont_ltregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgregular';
src: url('../fonts/secretfontrg-webfont.eot');
src: url('../fonts/secretfontrg-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrg-webfont.woff') format('woff'),
url('../fonts/secretfontrg-webfont.ttf') format('truetype'),
url('../fonts/secretfontrg-webfont.svg#secretfont_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'secretfont_rgbold';
src: url('../fonts/secretfontrgbd-webfont.eot');
src: url('../fonts/secretfontrgbd-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/secretfontrgbd-webfont.woff') format('woff'),
url('../fonts/secretfontrgbd-webfont.ttf') format('truetype'),
url('../fonts/secretfontrgbd-webfont.svg#secretfont_rgbold') format('svg');
font-weight: normal;
font-style: normal;
}
And the stylesheet where I set the font-family for the headings:
h1 {
color: #E60000;
font-family: 'secretfont_ltregular', Arial, Helvetica, sans-serif;
font-size: 36px;
}
I've tried everything I could think of but can't seem to get a consistent behavior out of IE8. What can I do to make it work as it should?
I had a similar issue - all EOT files were being successfully loaded by IE8 but only sporadically applied. After a lot of frustration the only thing that seemed to work is adding the chrome frame meta tag just below the tag:
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
Be aware that chrome frame stops being supported January 2014 http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}
I just pulled up a project I'm working on to make some modifications, and noticed that declaration font-weight: lighter which is being served via #font-face and it is no longer working on the site (see image - top chrome, bottom ff). Nothing has changed on my system (Windows) since last night, bar being upgraded to Chrome 19.0.1084.46 today, which I presume is the problem, but I am wondering if anyone else has noticed this or if there is a fix?
Thanks.
Try using a number instead the relative term lighter.
For example: font-weight:100 will be the lightest.
There's a handy article about relative and absolute font-weights here:
http://webdesign.about.com/od/fonts/qt/aa031807.htm
If you are using a font-face font that has multiple styles (as you should) make sure that each variant is specifically tied to a font-weight, that way each variation has its own explicit file. Otherwise it's kinda up to the browser to make up what it wants to do. I have found that the automatically generated code from font-squirrel does not do this (though perhaps they've updated they're packaging)
Notice in the following code how each file has font-weight and font-style set explicitly. This leaves no room for guessing.
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreamsItalic-webfont.eot');
src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot');
src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams-webfont.eot');
src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams-webfont.woff') format('woff'),
url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams_Bold-webfont.eot');
src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'),
url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'),
url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
font-weight: bold;
font-style: normal;
}