I'm having a font-face the menu of my webpage. For all browsers is loading fine except for Internet Explorer. Here's what I'm using in my css:
#font-face{
font-family: 'MyriadProSemibold';
src: url('fonts/MyriadPro-Semibold.eot');
src: local(MyriadPro-Semibold), url('fonts/MyriadPro-Semibold.otf') format('opentype');
}
Fonts are in a folder called fonts that is located in the same folder as the css file. I don't know how to debug this problem is anyone could point out what need to be done in order to make them work for IE9?
I suggest you put the opentype file into the font-face generator. Click on generate and download the .zip file you get.
Copy the fonts to your webhost and copy the CSS styles in the stylesheets.css into your stylesheet, you can change the name and you need to correct the paths to the new paths. Now it works on FireFox 3.5+, Chrome4+, Opera10+, iPad, iPhone, IE4+ (!) and Safari3.1+.
This is the font-face format I use:
#font-face {font-family: 'MyriadProSemibold';
src: url('MyriadProSemibold.eot');src: url('MyriadProSemibold.eot?#iefix') format('embedded-opentype'),url('MyriadProSemibold.woff') format('woff'),url('MyriadProSemibold.ttf') format('truetype');}
Related
I can't change the fonts to custom fonts in my project. But The following code does work in a separate test case, but I don't know why this doesn't work in my working project. I don't know what is causing the issue.
I can change the fonts to some default fonts but not custom fonts.
#font-face{
font-family: nazanin;
src: url(nazanin.ttf);
}
.customFont{
font-family: nazanin;
}
<h1 class="nazanin">This is a custom Font</h1>
👋
First of all, is the path to your font really nazanin.ttf? Is it in the same folder as this current CSS file?
If it is in a separate folder called "fonts", then try something like this:
#font-face{
font-family: nazanin;
src: url(../fonts/nazanin.ttf);
}
Second of all, the .ttf file extension is for Safari, iOS, and Android. Are you using a different browser? If so, that's the problem. I would suggest going with the .woff extension because it is compatible with most modern browsers.
The font Arizonia doesn't work in Firefox, I tried a lot, set gfx.downloadable_fonts.enabled to false and more, and now I'm asking for help.
I'm using this:
#font-face {
font-family: 'arizonia';
src: url(arizonia-regular.woff)format('woff');
src: url(arizonia-regular.ttf)format('truetype');
font-weight:normal;
font-style:normal;
}
In every browser it works fine, but in FF. I added the code from google fonts to my site, copied the files to my rootfolder en loaded the css files in DW. It looks a bit ribbed in FF.
In case you are running the site locally:
You might need to open about:config and set security.fileuri.strict_origin_policy to false.
After this local documents have access to all other local documents, including directory listings.
ref: CSS #font-face not working with Firefox, but working with Chrome and IE
According to Firefox webfonts not loading try font-family: arizonia; without the quotes.
My site looks different on mobile, it doesn't show coming soon and doesn't have the correct fonts. What's wrong?
Here you can see on mobile http://i.stack.imgur.com/9fdS7.jpg and here it is on my computer http://i.stack.imgur.com/eqncM.png
the website is rushir.co/lofty
The font is displaying on your desktop because, I'm pretty sure, you have the font installed on your system.
Your line that loads the ttf file is incorrect:
src: url("font/Pacifico.ttf") format("truetype");
It needs to be relative to your css file:
src: url("../font/Pacifico.ttf") format("truetype");
I have been trying to get the ttf files rendered in Chrome and Firefox but it just doesn't seem to work. While rendering the .woff file is working fine.
I downloaded the collection from http://www.google.com/webfonts#UsePlace:use/Collection:Philosopher and then renamed the Philosopher-Regular.ttf to fancyfont.ttf and then tried:
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
But the font just doesnt seem to add on to the webpage. However if i rename the woff file to fancyfont.woff and try :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/fancyfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
then it all works fine for Chrome and Firefox.
Any solutions to this problem as i have seen the ttf files being rendered onto the browser?
Do not download a TTF from the Google Font API website. It is not intended for you to download the fonts. Instead, you link to a stylesheet which contains #font-face definitions for the font(s) you want to use.
<link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'>
(Do not include multiple <link>s if you want several fonts; instead, use the tool to add all the fonts you want in your page to a collection, and it will generate the appropriate <link> tag.)
Letting Google host the fonts is just like using a well-known CDN for jQuery: there's a good chance that a significant portion of your users will already have the font cached before they even come to your site (by virtue of the fact that they may have browsed other sites that used the same font).
Note that the CSS you link to from the API is actually generated for each individual request by Google's server, tailoring it to the user's browser. Based on the user agent, the most appropriate formats (WOFF, EOT, TTF, etc) are selected and only those are listed in the stylesheet.
Because formats like WOFF are much more efficient size-wise than TTF, most browsers will never see a TTF version. Don't worry though – your font will be rendered correctly in all browsers.
I had some issues rendering a TTF font inside Chrome. convert it into Woff solved it. There is some good onlines services for that. You can find them easily. Also, the size of my font got smaller : 29 Ko to 6 Ko, I don't see anymore reasons to use TTF
Actually the issue was that the TTF files can not be renamed or that they should not be renamed. As I did the same they were not being rendered by the browser. While the renaming of the WOFF is just fine as they are compressed files.
The issue was definitely renaming as when i used the Philosopher-Regular.ttf in font face as :
#font-face {
font-family: 'Fancyfont';
src: url('fonts/Philosopher-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
it worked just fine.
I m getting a problem while embedding a font in my web site i m using a css3 rule of font selector code is
#font-face {
font-family:'VoltaEFTU-Regular';
src: url(/fonts/VoltaEFTU-Regular.ttf) format("truetype");
}
.sample { font-family: 'VoltaEFTU-Regular'; font-size: 10em; }
I put my volta font in truetype format in fonts folder of my website folder but its not working
my html code is :
<div class="sample">
typetrigger
</div>
Check if the ttf file is at the location you point to.
You should use firebug to check if your font gets applied in the css.
If yes, your font is not loaded.
If no, then the css class is not applied or overwritten by something else.
Firstly, you need to add comas to the src. It should be:
src: url('fonts/VoltaEFTU-Regular.ttf') format('truetype');
I also would recommend heading over to font squirrel though, and creating a woff and eot files to use along side the ttf.
You can read up on all the different formats here:
http://www.fontsquirrel.com/fontface/generator
Code looks good. I agree with Thariama. Try specifying the path relatively to your CSS instead of absolute (../fonts/VoltaEFTU-Regular.ttf) if your css file is in a subdir of your web root. Also, make sure the browser you are testing in supports #font-face and truetype fonts