I have defined following #font-face rule:
#font-face {
font-family: "MyFont";
src: url(MyFont.eot);
src: url(MyFont.eot#iefix) format('embedded-opentype'),
url(MyFont.ttf) format('truetype'),
url(MyFont.woff) format('woff');
}
Since there were some bug in the woff font file I have fixed it and I need to test if font looks correct right now.
The problem is that i.e. Google Chrome uses ttf by default and I cannot modify the #font-face in the runtime - also I cannot modify the CSS on the server because of the complicated pipeline.
Can we force somehow the browser to use specific font file type ?
If you just want to test the woff file is working now, you can:
Try Firefox, I believe they prioritise WOFF, or
Temporarily change your #font-face code so Google Chrome only has WOFF as an option:
font-family: "MyFont";
src: url(MyFont.woff) format('woff');
Related
I use fontsquirrel's CSS for #font-face:
#font-face {
font-family: 'pf_agora_serif_promedium';
src: url('pfagoraserifpro-medium-webfont.eot');
src: url('pfagoraserifpro-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('pfagoraserifpro-medium-webfont.woff') format('woff'),
url('pfagoraserifpro-medium-webfont.ttf') format('truetype'),
url('pfagoraserifpro-medium-webfont.svg#pf_agora_serif_promedium') format('svg');
font-weight: normal;
font-style: normal;
}
It works correctly in all browsers if
a)I use fonts that fontsquirrel generated.
b)I don't use cyrilic charset or another characters that could be on my font file but fontsquirrel does not converting at all (like russian letters ЯЩЮИГЛЬЦЫЧ)
So, when I changed my font files on my directory to another (which contain russian letters) IE9 and lesser don't show my font at all, even if I use only latin charset, but it works correctly (with latin and cyrilic charset) in normal browsers. So what's wrong. Does the problem inside of font files? And if not, why font-face don't working when I changing only font files?
p.s. I'd tried to use another CSS for font-face but they didn't work at my web-site.
i think fonts path is not giving you,
Please check fonts local path, may i sure working in all browser this #font-face kit,
EOT fortmat for ie8 and ie 9
#font-face {
font-family: "pf_agora_serif_promedium";
src: url("yourlocalpath/pfagoraserifpro-medium-webfont.eot");
src: local("☺"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.woff") format("woff"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.ttf") format("truetype"),
url("yourlocalpath/pfagoraserifpro-medium-webfont.svg#LucidaFax-bold") format("svg");
}
I can't seem to find the answer I'm looking for. I have an entirely static page, mostly made up of images. The font used to create the images is 'Handwriting-Dakota.ttf' found on any Mac OS X install. I have one dynamic element containing text which i want to give this font to.
I have the ttf font in the same directory as my css file.
#font-face{
font-family: dakota;
src: url('dakota.ttf') format('truetype');
}
In an html file with the css file included. <p style="font-family: dakota;">sometext</p>
I can see the rule applied in chrome's inspector but it does not change the appearance. Is what I'm trying to do impossible or am I doing it wrong?
Use this format
#font-face {
font-family: 'myfont';
src: url('fonts/myfont.eot');
src: url('fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('fonts/myfont.woff') format('woff'),
url('fonts/myfont.ttf') format('truetype'),
url('fonts/myfont.svg#rsuregular') format('svg');
}
To further gain more knowledge about font-face syntax, read Bulletproof #font-face Syntax.
To get all versions of the font. google the "font converter", there will be plenty of font converter services in first page.
Make sure the url is relative to the css file and not to the webroot.
#font-face{
font-family: 'dakota';
src: url('../fonts/dakota.ttf') format('truetype');
}
And you probably should add other types to make sure other browsers can use the font without problems.
#font-face {
font-family: 'dakota';
src: url('../fonts/dakota.eot');
src: url('../fonts/dakota.eot?#iefix') format('embedded-opentype'),
url('../fonts/dakota.woff') format('woff'),
url('../fonts/dakota.ttf') format('truetype'),
url('../fonts/dakota.svg#rsuregular') format('svg');
}
#Cobolt, you can try FontSquirrel. http://www.fontsquirrel.com/fontface/generator.
All you need is .otf or .ttf file. Then, FontSquirrel will make the .svg, .eot, .woff for you and create a css file.
I am using a custom font-family with following css rule:
#font-face {
font-family: 'matrix';
src: url('MaSGRgLn.eot');
src: url('MaSGRgLn.eot?#iefix') format('embedded-opentype'), url('MaSGRgLn.woff') format('woff'), url('MaSGRgLn.ttf') format('truetype'), url('MaSGRgLn.svg#MatrixScriptGr-RegularLin') format('svg');
font-weight: normal;
font-style: normal;
}
I have transformed my main font to all alternatives to be sure. Those work fine for all browsers except for ie < ie9. Is there sth i am missing or haven't paid attention to?
One important thing to note, based on my tests, is that the font-family name must match that what is inside the EOT file (viewable with hex-editor or if you have a matching TTF and Windows, the font preview will tell you).
IE8 does not display your font if the name differs, IE9 (even in IE8 mode) doesn't have this problem.
In your case, the SVG version has the name "MatrixScriptGr-RegularLin". Try using the same name in you CSS #font-face font-family definition.
Building a site using custom fonts. Got .ttf files from a designer.
css looks like this:
#font-face{
font-family:MenuFont;
src: url("http://www.website.com/assets/fontfile.ttf");
}
.divClass{font-family:MenuFont;}
I've tried with a couple different font files he gave me. One of them doesn't show up at all. Even more strangely, a couple of them only effect certain letters. For instance, plugging in one file makes only O's, R's C's and P's use the correct font. I checked and it's the same letters across browsers.
Looking in firebug, I can see the whole font, when I roll over the font file url, so my Url's are fine, and the browser is getting the font.
What am I missing here?
Generate the correct font-face code and all the needed fonts with FontSquirrel. See: http://www.fontsquirrel.com/fontface/generator
You will get a more extended and compatible font-face declaration. Like this:
#font-face {
font-family: 'Meran';
src: url('../fonts/meran-normal-webfont.eot');
src: url('../fonts/meran-normal-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/meran-normal-webfont.woff') format('woff'),
url('../fonts/meran-normal-webfont.ttf') format('truetype'),
url('../fonts/meran-normal-webfont.svg#Meran') format('svg');
font-weight: normal;
font-style: normal;
}
I have a CSS file with a #font-face declaration that embeds the font file via a data URI:
#font-face {
font-family: 'Custom-Font';
src: url('eot/font.eot');
src: url('eot/font.eot?#iefix') format('embedded-opentype'),
/* ugly FF same-Origin workaround... */
url("data:application/octet-stream;base64,d09GRgABAAAAA ... ") format('woff'),
url('ttf/font.ttf') format('truetype'),
url('svg/font.svg#Custom-Font') format('svg');
}
Embedding the font with the data URI causes IE < 9 to not load the font. If I remove the line (or change it back to reference the .woff file), IE will load the font.
What about this CSS confuses IE?
Background: I have a page which loads embedded fonts from a different domain (a CDN). Unfortunately, Mozilla requires a CORS header (Access-Control-Allow-Origin) on embedded fonts served from different domains (an abuse of CORS and terrible idea in my opinion). For reasons beyond my control (bureaucracy), I'm unable to get the CORS header sent out on font files, so I'm stuck with the sub-optimal situation of embedding the font file in the CSS file via a data URI.
I had the same problem. Moving the embedded font into a different declaration worked for me.
#font-face {
/* Non-FF */
font-family: 'Custom-Font';
src: url('eot/font.eot');
src: url('eot/font.eot?#iefix') format('embedded-opentype'),
url('svg/font.svg#Custom-Font') format('svg');
}
#font-face {
/* FF same-Origin workaround... */
font-family: 'Custom-Font';
src: url(data:font/truetype;charset=utf-8;base64,d09GRgABAAAAA...) format('truetype');
}
The maximum URL length has probably been exceeded.
Remember that older versions of IE adds everything between the ? and the last '); (including the data URI).
So in your case the solution would be to use another method (Mo' Bulletproofer for example).