Local (non-server use) issue with Font Awesome in Firefox - html

I'm trying to get my icons to work locally on my machine without the use of a server and I'm getting the following for one out of three files giving this kind of error in the console of Firefox only (it works on all of the other browsers).
downloadable font: download failed (font-family: "FontAwesome"
style:normal weight:normal stretch:normal src index:1): bad URI or
cross-site access not allowed source:
file:///C:/Users/jester/Documents/Projects/assets/fonts/fontawesome-webfont.woff2?v=4.7.0
Here is what I have in my index.html file to call the css:
<link rel="stylesheet" href="../assets/css/font-awesome.min.css" type="text/css">
And this is what exists in the css file for the appropriate error from the console:
#font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal
}
I'm going to state the obvious things I've tried with some of them being ridiculous, but thought I should try every thing I read about this. I tried using double quotes instead of single quotes, removing the query string after the .woff2 file, and even added a semicolon to the end of the font-style. I'm not sure exactly what needs to be done, but almost everyone who had an issue locally was able to add something onto their Apache servers. I don't have that, so what's the problem here?

Related

Grails load CSS from custom URL

Using Grails version 2.4.4. and trying to load CSS resource from URL
http://myAppName.com:7777/myApp/assets/style.css
/myApp/assets/style.css
I've set in style.css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?t0751g');
src: url('../fonts/icomoon.eot?t0751g#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?t0751g') format('truetype'),
url('../fonts/icomoon.woff?t0751g') format('woff'),
url('../fonts/icomoon.svg?t0751g#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Beside this, I added few other options for proper icon load.
Assets structure:
/assets/fonts/icomoon.ttf (and all other icomoon files are here)
/assets/stylesheets/style.css
when I use 2. url it loads my custom icons normally but when I set the 1. url in <style> as shown above, icon loading fails.
Both url-s should point to the same file and I don't understand why this is not working. Anyone knows what I am doing wrong ?
Any help will be appreciated!
So I found out that fonts does not support cross-origin domain, and I used icomoon icons as font to import it from another domain. On the other hand, i found out you can use Fontello which generates embedded JS and automatically fixes this issues, so it is generally better to use.

#font-face does not load although all font files are accessible

Everything in my web works well except #font face in the CSS file.
My web uses 2 fonts which neither of them can be loaded to display. One of them is fontawesome. I both tried to load the font from my server and the fontawesome server, but the result is the same.
I tried to view the page in IE Edge, Firefox and Chrome browser in PC and neither of them worked properly. However, when I tested in iPad Safari, it worked well.
Please be informed that all font files are accessible and my PC can view font in fontawesome.io perfectly. Please kindly advice what is wrong in my code.
Here is the code:
#font-face {
font-family: 'FontAwesome';
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('http://fontawesome.io/assets/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is the result in PC (Font Face is not load):
Here is the result in iPad (Font Face is load successfully):
From the png it's imposible to understand the problem. I can tell you to Read well this link you could found your solution.
If Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Using Sass or Less
Use this method to customize Font Awesome 4.7.0 using LESS or SASS.
Copy the font-awesome/ directory into your project.
Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the #fa-font-path or $fa-font-path variable to point to your font directory.
#fa-font-path: "../font";
The font path is relative from your compiled CSS directory.
If your website runs via HTTPS protocol and you are trying to load external resources via HTTP - the loading will be blocked by browser.
Second, if the above is not the case - make sure you are loading the fonts with correct file path, for example:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
or use bootstrap CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

#Font-Face Custom fonts not working in Firefox

I'm having trouble getting a custom, non-websafe font to work in Firefox. I have it working in Chrome, Opera and Safari using the following code:
#import url(http://fonts.googleapis.com/css?family=Antic+Slab);
#font-face {
font-family: 'BadgerFont';
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot');
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff') format('woff'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.ttf') format('truetype'),
url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.svg#orator_stdregular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: BadgerFont, 'Antic Slab', Serif;
letter-spacing: 1px;
}
What am i missing here?
Heres a link to the site incase you want to see for yourself.
By default, Firefox will only accept relative links. Firefox (which supports #font-face from v3.5) does not allow cross-domain fonts by default. This means the font must be served up from the same domain (and sub-domain) unless you can add an “Access-Control-Allow-Origin” header to the font.
Or, just load the font some other way (locally or with a CDN)
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin
You should learn to use your developer tools in Firefox. Fifth console message is this:
[08:28:41.886] Unrecognized at-rule or error parsing at-rule '#import'. # http://cdn.bigcartel.com/theme_stylesheets/19013562/2771282761/theme.css:474
From MDN:
The #import CSS at-rule allows to import style rules from other style
sheets. These rules must precede all other types of rules, except
#charset rules; as it is not a nested statement, it cannot be used
inside conditional group at-rules.
EDIT
Please look in your console, it gives you all the answers
[11:00:17.697] downloadable font: download failed (font-family: "BadgerFont" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff # http://cdn.bigcartel.com/theme_stylesheets/19013568/2771283940/theme.css
As the message says, Firefox will not allow you to embed cross-domain fonts. If you want to use that font, then download them from that website, if you are allowed, and upload them to your own domain and link to them yourself.

Is there a special way to type in icon font URLs? Mine just appear as unicodes

The website is here:
http://rjdlee.com/projects/mobile/index.html
Even in my local copy, I was experiencing some issues where the font wouldn't refresh after changing it. I've checked the url it is attempting to read for the font and it appears to be right. Is there something wrong?
Here is the code:
#font-face {
font-family: 'icons';
font-weight: normal;
font-style: normal;
src:url('../fonts/icons.eot?-gbp2x2');
src:url('../fonts/icons.eot?#iefix-gbp2x2') format('embedded-opentype'),
url('../fonts/icons.ttf?-gbp2x2') format('truetype'),
url('../fonts/icons.woff?-gbp2x2') format('woff'),
url('../fonts/icons.svg?-gbp2x2#icons') format('svg');
}
Here is the error:
[16:21:58.083] downloadable font: download failed (font-family: "icons" style:normal weight:normal stretch:normal src index:1): status=2147746065
source: http://rileedesign.com/projects/mobile/fonts/icons.ttf?-gbp2x2 # http://rileedesign.com/projects/mobile/css/main.css
Do you have access to your .htaccess file? This can happen if certain file types are forbidden/excluded. I had the issue before and it was fixed by adding the font types as allowed, e.g.:
<FilesMatch ".*\.(js|JS|css|CSS|jpg|JPG|gif|GIF|png|PNG|swf|SWF|xsl|XSL|svg|eot|ttf|woff)$">
Order Allow,Deny
Allow from all
</FilesMatch>
Turns out the issue was with my hosting provider.

Having issues with a custom font on my Storenvy page

I'm using a web font from FontSquirrel, that provided the webfont kit. I currently have the files in the root folder of "StilettoRedBand.com" but in my Storenvy page (stilettored.storenvy.com) the webfont isn't working in the title, or the footer.
I've been working on this project so much that I've appeared to have missed something and am having a hard time locating the issue, as it was working at first and then just stopped.
Can anyone help me out?
Here's the font source: http://www.fontsquirrel.com/fonts/WC-Mano-Negra-Bta
try that
#font-face {
font-family:WCManoNegraBta;
font-weight:bold;
src:url("path-to-the-font-file/WCManoNegraBta.otf") format("opentype");}
div {
font-family:WCManoNegraBta;
}
You need to make sure you got all the needed font-files (.eot, .ttf, .woff and .svg). Click the "Webfont kit" tab and download the whole package. Use this code and make sure your links are correct. You should also try removing 'text-rendering: optimizeLegibility;' if you are using this.
#font-face {
font-family: 'WCManoNegraBtaRegular';
src: url('WCManoNegraBta-webfont.eot');
src: url('WCManoNegraBta-webfont.eot?#iefix') format('embedded-opentype'),
url('WCManoNegraBta-webfont.woff') format('woff'),
url('WCManoNegraBta-webfont.ttf') format('truetype'),
url('WCManoNegraBta-webfont.svg#WCManoNegraBtaRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I am having the same issue with firefox for my storenvy store. Here is the fix I found:
How to add an Access-Control-Allow-Origin header
You just need the following code in a .htaccess file in the same folder as your fonts:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I haven't gotten it to work yet, but my website is hosted on godaddy so I don't know if my issue is related to that or not.
Good luck!
I was having the same problem! After reading this article I ended up getting the font to work for me.
What I did was add the #font-face code into my hosting site and saved it as a.css file
Example: http://lovepollution.com/andadrifont.css
Then I went to the theme section and clicked "css mode". I added below on the style sheet.
#import url('http://lovepollution.com/andadrifont.css');
Saved and works now.