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.
Related
I am working on a website based on a series of old video games called Quest for Glory, which involves using original fonts from the games. One such font is called gloryquest, and I notice it displays just fine on browsers such as Chrome, Brave and Opera but does not display on Firefox. Whenever I look at this site in Firefox, it only shows the fallback font.
Here is a link to screenshots showing the difference.
The issue is evident on these pages:
https://bdferr.github.io/quest-for-glory1.html
https://bdferr.github.io/quest-for-glory4.html
https://bdferr.github.io/qfg-book.html
The font is a TTF which I have uploaded into a fonts folder in the same directory as the other website files on Github. Another font in the same folder, called Sierra-SCI-Menu-Font, displays with no problems, as seen here:
https://bdferr.github.io/quest-for-glory3.html
The only difference I can see between the two is that the one with the problem (gloryquest) has a fallback font, Pixelar Regular W01 Regular, which is linked to from a tag in the head like so:
<link rel="stylesheet" href="https://fast.fonts.net/cssapi/35bb4fcb-e728-4a43-9ecf-79aafffd52cb.css"/>
Another TTF font called cardinal-regular has a similar problem. It always displays in Chrome and other browsers, but never in Firefox. It is specified in the relevant stylesheet like so:
#font-face {
font-family: cardinal;
font-style: normal;
src: url("/fonts/cardinal-regular.ttf") format("ttf");
}
Gloryquest is specified in the relevant stylesheets like so:
#font-face {
font-family: gloryquest;
font-style: normal;
src: url("/fonts/gloryquest.ttf") format("ttf");
}
The one that always works is specified like so:
#font-face {
font-family: SierraSCImenu;
font-style: normal;
src: url("/fonts/Sierra-SCI-Menu-Font.ttf");
}
That is, I do not specify "format("ttf")" there, but if I leave that out for the other pages I get error messages like this:
Failed to decode downloaded font: http://localhost:8000/fonts/gloryquest.ttf
OTS parsing error: cmap: Failed to parse table
I do not get any error messages from Firefox. I do not see any problems using the fonts on my own machine, such as in Word.
Please advise!
I specified a font in CSS - it works and loads correctly in desktop chrome, but Arial is loaded instead in desktop Safari and mobile generally - I'm sure I'm missing something really simple but I can't see what it is.
I'm hosting the site on Github and using a netlify free subdomain as this is an experiment - I'm not sure if that's relevant information.
#font-face {
font-family: Karla;
src: url(.../jsc/Karla-Regular.ttf) format ('truettype');
}
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 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');}
Can't seem to get my font working in firefox, seems to work fine in IE, chrome and Safari
<style type="text/css">
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.eot") /* EOT file for IE */
}
#font-face {
font-family: MyCustomFont;
src: url("http://www.brightonorient.com/MTCORSVA.TTF") /* TTF file for CSS3 browsers */
}
</style>
This is the website here, http://www.brightonorient.com - the front page text Brighton Orient should be Monotype corsiva.
Thanks for any help
I typically use Font Squirrel for my #font-face needs and have never had an issue. Check this link to see if the trouble shooting tips provide any help. If it is any consolation, in Firefox on my machine I can see the font load just fine and render properly. Throwing FireBug on it shows the font loaded properly as well. Not sure why you're not seeing it work unless your Firefox is not up-to-date.
Technically, it works for me on WinXP SP3 with Fx 6.0.2 but not with Fx 11.0
Though, on the legal side (IANAL), it seems you don't have the rights to use Monotype Corsiva with #font-face: only Monotype does. See http://www.fonts.com/findfonts/detail.htm?productid=172339 and their service http://webfonts.fonts.com for maybe a solution.
Using it on your computer and distributing it to every visitor via your server are often two very different licences!
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
go to this link http://www.fontsquirrel.com/fontface/generator
upload your font
then download all files have different font formats which is supported for different browsers
and use in your project. now it will work accurately in all browsers