I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?
(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )
(Convert it here: https://onlinefontconverter.com )
STYLES.CSS
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.eot");
}
#font-face
{
font-family: RobotoCondensed;
src: url("Roboto-Condensed.ttf");
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
index.html (relevant code)
<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>
The stylesheet and font are in the same folder.
Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.
Try this
#font-face
{
font-family: 'RobotoCondensed';
src: url('Roboto-Condensed.eot');
src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
url('Roboto-Condensed.woff') format('woff'),
url('Roboto-Condensed.ttf') format('truetype'),
url('Roboto-Condensed.svg#') format('svg');
}
.myDiv
{
font-family: RobotoCondensed, Arial, Helvetica;
font-size: 10px;
color: #e8e8e8;
}
I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
</head>
The meta tag solved problem and every variation worked!
Variation 1
<style type="text/css">
#font-face
{
font-family: 'SolaimanLipi';
src: url('SolaimanLipi.eot');
src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');
}
#font-face
{
font-family: 'Yogesh';
src: url('CDACOTYGN.eot');
src: url('CDACOTYGN.ttf') format('truetype');
}
</style>
Variation 2
<style type="text/css">
#font-face{
font-family: 'solaimanlipi';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),
url('solaimanlipi-webfont.woff') format('woff'),
url('solaimanlipi-webfont.ttf') format('truetype'),
url('solaimanlipi-webfont.svg#webfont') format('svg');
}
#font-face {
font-family: 'cdacotygn';
src: url('cdacotygn-webfont.eot');
src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),
url('cdacotygn-webfont.woff') format('woff'),
url('cdacotygn-webfont.ttf') format('truetype'),
url('cdacotygn-webfont.svg#svgFontName') format('svg');
}
</style>
We think complex but often needle in haystack is elsewhere head meta tags
You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html
Works in all the browsers including the old IE8
Try
font-family: "RobotoCondensed", Arial, Helvetica;
The quotes should force it as your primary option
Related
I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}
I am using #font-face in an external stylesheet but when I open the page on server, only the text takes to much time to render. Why is this happenning?
Code
#font-face{
font-family: koblenz;
src: url(../font/koblenz.ttf);
}
#font-face {
font-family: koblenz;
src: url(../font/koblenz.eot);
}
#font-face {
font-family: koblenz;
src: url(../font/koblenz.eot?#iefix);
}
#font-face {
font-family: koblenz;
src: url(../font/koblenz.woff);
}
...
font-family: "koblenz", Arial, Helvetica, sans-serif;
One more question:
IE 8+, Chrome and Safari load text with koblenz but Firefox does not. Why?
It could be because you are using the font-face so many times. Try something like this:
#font-face {
font-family: 'koblenz';
src: url('../font/koblenz.eot');
src: url('../font/koblenz.eot?#iefix') format('embedded-opentype'),
url('../font/koblenz.woff') format('woff'),
url('../font/koblenz.ttf') format('truetype'),
url('../font/koblenz.svg#koblenz') format('svg');
font-weight: normal;
font-style: normal;
}
I am making a basic informational website. In my CSS file I have the following:
#font-face {
font-family: "Nilland";
src: local('Nilland.ttf');
}
body{
background: #FFF;
font-size:14px;
font-family: Nilland;
}
The .ttf file is in the same directory as the index.html file. Why is this not working?
You need to include all types of your font instead of only .ttf, should be something like:
#font-face {
font-family: 'Nilland';
src: url('Nilland.eot');
src: url('Nilland.eot?#iefix') format('embedded-opentype'),
url('Nilland.woff') format('woff'),
url('Nilland.ttf') format('truetype'),
url('Nilland.svg#Nilland') format('svg');
}
Put the ttf files in the folder where the css file is.
The path in the css file is relative to the css-file, not the html file
Try specifying the complete path
#Felix is right although; try separate block for normal and bold font. Use svg and other formats for multiple browser compatibility and path may be issue not to work.
#font-face {
font-family: 'Nilland';
src: url('../fonts/Nilland.ttf') format('truetype'), url('fonts/Nilland.svg') format('svg');
src: url('../fonts/Nilland.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Nilland";
src: url("../fonts/Nilland.ttf") format('truetype');
font-weight: bold;
font-style: normal;
}
I created a webpage with the custom font, I can see the fonts applied in the browser but its not applied in the printed page.
I followed the below way for printing :
The fonttest.css file contains the following content :
#font-face {
font-family: "myriad";
src: url("../fonts/myriad.otf") format('truetype');
}
#font-face {
font-family: "serifa-bold";
src: url("../fonts/serifa_bold.ttf") format('truetype');
}
#font-face {
font-family: "serifa";
src: url("../fonts/serifa.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF";
src: url("../fonts/AlexandriaFLF.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Bold";
src: url("../fonts/AlexandriaFLF-Bold.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-BoldItalic";
src: url("../fonts/AlexandriaFLF-BoldItalic.ttf") format('truetype');
}
#font-face {
font-family: "AlexandriaFLF-Italic";
src: url("../fonts/AlexandriaFLF-Italic.ttf") format('truetype');
}
In the HTML file the CSS file is linked as below :
<link rel='stylesheet' type='text/css' media='all' href='resource/css/fonttest.css' />
I was printing the following below lines :
<p style="font-family:myriad;color:#000000">myriad-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa-bold;color:#000000">serifa-bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:serifa;color:#000000">serifa-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF;color:#000000">AlexandriaFLF-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Italic;color:#000000">AlexandriaFLF-Italic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-Bold;color:#000000">AlexandriaFLF-Bold-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
<p style="font-family:AlexandriaFLF-BoldItalic;color:#000000">AlexandriaFLF-BoldItalic-abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
please help me ?
Try to put your stylesheet media attribute to print :
<link rel='stylesheet' type='text/css' media='print' href='resource/css/fonttest.css' />
If you don't find a way to do this, there is an alternative.
You could use wkhtml2pdf and make a printable PDF file.
Maybe you may need to include more fonts formats in your css.
Something like this:
#font-face {
font-family: 'XXXXX';
src: url('XXXXX.eot');
src: url('XXXXX.eot?#iefix') format('embedded-opentype'),
url('XXXXX.woff') format('woff'),
url('XXXXX.ttf') format('truetype'),
url('XXXXX.svg#XXXXX') format('svg');
font-weight: normal;
font-style: normal;
}
the url https://bugzilla.mozilla.org/show_bug.cgi?id=468568 which explains why print is not working for custom fonts, so I tested in firefox-20.0a1.en-US.win32.installer.exe. The fonts with ttf and otf are applied exactly as it should be.
I'm trying to use the #fontface syntax for using extra fonts on my webpage. The thing is that while fonts appear as they should in dreamweaver, when I preview the page in Firefox or IE fonts do not render.
Here is the syntax I use:
#font-face {
font-family: 'KomikaTextRegular';
src: url('/fonts/KOMTXT__-webfont.eot');
src: url('/fonts/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/KOMTXT__-webfont.woff') format('woff'),
url('/fonts/KOMTXT__-webfont.ttf') format('truetype'),
url('/fonts/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
min-width: 1024px;
font-family: 'KomikaTextRegular', DeliciousRoman, Helvetica, Arial, sans-serif;
}
Have you tried to use the full url , with the servername too?
#font-face {
font-family: 'KomikaTextRegular';
src: url('Http://servername/fonts/KOMTXT__-webfont.eot');
src: url('Http://servername/fonts/KOMTXT__-webfont.eot?#iefix') format('embedded-opentype'),
url('Http://servername/fonts/KOMTXT__-webfont.woff') format('woff'),
url('Http://servername/fonts/KOMTXT__-webfont.ttf') format('truetype'),
url('Http://servername/fonts/KOMTXT__-webfont.svg#KomikaTextRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Or without ''?
body { margin:0;
min-width:1024px;
font-family: KomikaTextRegular, DeliciousRoman, Helvetica, Arial, sans-serif;
}
Also it's it a good article about using of the font-face.
If your full path is /www/demo.site.com/fonts/
and you use /fonts it may jump back to look for it in /www/fonts/ rather than the folder you want. Depends on what the root folder is set to really. Try base href maybe?
What if you take the first / off, does that work?
Try inspect it in firebug and find out where the path is to the css files.