I have create custom font family for a font named "Edwardian-Script-ICT". I download the "ttf" formate and convert it by a online font converter Everything Fonts.
Here is my CSS code.
#font-face{
font-family: "Edwardian-Script";
src: url('font/Edwardian-Script-ITC.eot') format('embedded-opentype');
src: url('font/Edwardian-Script-ITC.woff') format('woff'),
url('font/Edwardian-Script-ITC.ttf') format('truetype'),
url('font/Edwardian-Script-ITC.svg') format('svg')
}
h1{
font-family:'Edwardian-Script',sans-serif;
font-size: 60px;
font-wight: normal;
}
And here is my css folder structure.
css
-font
-Edwardian-Script-ITC.eot
-Edwardian-Script-ITC.svg
-Edwardian-Script-ITC.ttf
-Edwardian-Script-ITC.woff
-style.css
The font works fine for some days. But after 10-15 days the font don't work and it fallback to normal font. But when I clear my recent browser history it appears again. I don't understand what is the problem. Can anybody help me ?
Related
In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs:
the icons are of font awesome and class fa fa-ANYEXAMPLE exists
the fonts are in a folder (/css/fonts) as it should be
the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site
I consider that my links are correct, since the icons load correctly most of the time
What could the problem be?
Open your style.css and link to FontAwesome using font-face:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make sure to edit the paths if they are any different.
I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below
#font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
url('Sree Krushnadevaraya-webfont.woff') format('woff'),
url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
.badifont {
position: relative;
top: 1px;
display: inline-block;
font-family: 'sree_krushnadevarayaregular';
font-style: normal;
font-weight: normal;
line-height: 1;
}
https://css-tricks.com/snippets/css/using-font-face/
However, when I use the new class that I created, the text does not show up in the font that I am expecting. It is using the default Telugu Font that is available on my machine.
What am I missing?
I looked it up a little more and found this solution.
Go to Google Fonts and type in the name of your font. Most fonts I needed were already taken care of by Google. You can then copy the markup google provides and put it in your code.
So I had to do this
<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>
Then I setup my stylesheet with the name of the font in the font-family as 'Sree Krushnadevaraya' and it worked.
3 things to check: in all your font files, remove the space, or put an underscore instead of space for instance:
Sree_Krushnadevaraya-webfont.eot
Then adjust those file names in your code for #fontface.
Then open your svg file in a text editor. check what is on the id of your font--it is usually around line 6, <font id=...>
Make sure you are using that exact font id name here AFTER the hashtag (#):
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
Then make sure all your fonts and css is uploaded again.
In one of my website I have used Ænigma Scrawl 4 BRK font(as it is showing in my photoshop font family box). Now I want the same font in my page. So for that I just went to FontSquiirel site for generate css style. There I got my css file with the font with different extensions like .svg, .ttf, .woff. I just paste all the fonts in my folder then I used the same converted css in my style.css file. The generated css was like this
font-family: 'nigma_scrawl_4_brkregular';
src: url('aescrawl-webfont.eot');
src: url('aescrawl-webfont.eot?#iefix') format('embedded-opentype'),
url('aescrawl-webfont.woff') format('woff'),
url('aescrawl-webfont.ttf') format('truetype'),
url('aescrawl-webfont.svg#nigma_scrawl_4_brkregular') format('svg');
font-weight: normal;
font-style: normal;
But after all that my font style has not been changed. I am checking in both firefox and chrome. I have cleared all the cache and cookies from my browser. Can someone kindly tell me what is the wrong here? Any help and suggestions will be appreciable. Thanks
#font-face {
font-family: 'nigma_scrawl_4_brkregular';
.
.
.
.
font-style: normal;
}
Try this
#font-face{
font-family : "myCustomFont";
src:url(aescrawl-webfont.ttf);
}
body{
font-family:"myCustomFont", Arial;
}
I have a problem with font-face in mozilla browser and chrome.
Actually, I use font-face and its working fine, but this is a first time i use font-face with font : Penshurst and its not working. When i using another font is working fine.
This is my font-face code :
#font-face{
font-family:Penshurst;
src:url("../../plugin/font/penshurst.ttf"),url("../../plugin/font/penshurst.eot");
}
#font-face{
font-family:Century Regular;
src:url("../../plugin/font/century gothic regular.ttf"),url("../../plugin/font/century gothic regular.eot");
}
For font face with font: Century Regular, it's working fine, but for Penshurst its not working.
Any suggestion for this problem?
Thx
Here is the correct format:
#font-face {font-family: 'Penshurst';
src: url('../../plugin/font/penshurst.eot');
src: url('../../plugin/font/penshurst.eot?#iefix') format('embedded-opentype')? /* if needed for IE */,
url('../../plugin/font/penshurst.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Also...
you might need this:
`url('../../plugin/font/penshurst.woff') format('woff'),`
...you might have to convert to get this...(see my link on my comment below)
Make sure your server IIS has MIME Type for .eot/.otf/.ttf/.woff so that way you can preview them locally or online(server)...and lastly even though you can see Century Regular doesn't mean that Penshurst in your server/localhost
:)
I'm importing a font with CSS. However, it does not seem to work in IE. I don't know why.
Here's my CSS code:
#font-face {
font-family: 'bello';
src: url('../fonts/bello.eot?');
src: url('../fonts/bello.eot?#iefix') format('embedded-opentype'),
url('../fonts/bello.woff') format('woff'),
url('../fonts/bello.ttf') format('truetype'),
url('../fonts/bello.svg#bello') format('svg');
font-weight: normal;
font-style: normal;
}
.bello {
font-family: "bello", Verdana, Tahoma;
}
I've added .eot, .svg, .woff, .ttf and .otf to the folder fonts. It displays correctly in all browsers except IE. To create the .eot file I used this site: http://www.kirsle.net/wizards/ttf2eot.cgi.
I have no idea why it's not working. Any help would be great. Thanks!
solved the problem, it was not problem of the eot file. It seems IE has a problem finding the .eot file if the family name is different as the full name of the font. In my case font name was bello-script and font family was bello. Changed both of them and everything worked fine.
I was experiencing a similar issue. As with the other response it didn't appear to be a problem with the .eot file but rather with the font-family value length.
Changing the #font-face and references of:
font-family: Titillium Web Extra Light Italic
To:
font-family: Titillium Web Light Italic
Fixed it for me. Always expect IE to fall over for absolutely any reason...