I have the following file layout:
/website/index.html
/website/font-awesome/css
/website/font-awesome/fonts
/website/Subdirectory/page1.html
The page /website/index.html does not use Font Awesome at all; the files in /website/Subdirectory/ do use it.
If I directly access /website/Subdirectory/page1.html the Font Awesome icons show as a box with UniCode number inside. If I visit /website/index.html first, then visiting any page in the Subdirectory will show the icons as expected.
On page1.html I have <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">.
This is locally hosted; i.e. via file://
Update
downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): status=2147500037
source: file:///correct/path/to/website/font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0
I'm using Firefox on a Mac. According to Finder the font version is 4.2.0.
On Chrome this problem does not exist. Looks like some kind of browser implementation issue. Work arounds appreciated.
It looks like this is a known issue, due to "same origin" security policy, see https://bugzilla.mozilla.org/show_bug.cgi?id=760436
The reason why the site works after loading the higher level page is that the font has been cached already.
Either ensure that the font file is in the same directory as the page that's trying to load it, or a subdirectory of this (not a sibling or ancestor directory); or else relax the security check by setting security.fileuri.strict_origin_policy to false in about:config.
the issue for me was to set the environment variable as follow in my rails app.
config.action_controller.relative_url_root = "/myrailsapp"
see https://github.com/bokmann/font-awesome-rails
Related
I've been referencing the findings in this thread and in this question when trying to get a custom font that uses embedded bitmaps to render them via #font-face, and in my experimentation with fonts that I know are configured correctly, I found the following results displaying 日本語 using Windows 10 and Vivaldi (Chrome, etc), with ClearType on and configured (unsure if this matters):
span {
font-family: "SimSun"; // or just omitted, since this is a fallback font
}
#font-face { font-family: "font"; font-weight: normal; src: url('simsun_0.ttc'); }
span {
font-family: "font";
}
simsum_0.ttc is the font that I pulled from C:/Windows/Fonts/ and placed in the folder where the css lives. I've also verified that this file does indeed have embedded bitmaps and is configured correctly.
I've since just installed the font I'm working on and referenced it via its system name, which then loads the bitmaps correctly. Is there any way to get browsers to load the bitmaps from fonts loaded via #font-face? Is there any documentation or spec on this limitation, or possible work-arounds?
More examples
This works the same for custom-built fonts as well - here's an example with an .otf font in Chrome. The font loaded via it's name when installed on the system:
and the same font loaded via #font-face's url:
Chrome and Firefox (and likely others) run OTS on the fonts not available in the system, which removes the EBDT & EBLC tables (where the bitmaps are stored) from the font.
From the OTS readme:
The OpenType Sanitizer (OTS) parses and serializes OpenType files (OTF, TTF) and WOFF and WOFF2 font files, validating them and sanitizing them as it goes.
The C library is integrated into Chromium and Firefox, and also simple command line tools to check files offline in a Terminal.
The CSS font-face property is great for web typography. Having to use images in order to get the correct typeface is a great sadness; one should be able to use vectors.
However, on many platforms the system-level TrueType font renderers have never been part of the attack surface before, and putting them on the front line is a scary proposition... Especially on platforms like Windows, where it's a closed-source blob running with high privilege.
In 2014, there was interest in adding color bitmap tables to Chromium, and support was added to pass-through the color bitmap (CBDT & CBLC) tables to OTS, so it seems possible that support could be added for these as well, if the browser requests it.
The steps I see to make this possible are:
Add the ability to pass-through the EBDT & EBLC tables to OTS. This is the current location of the code that passes the color tables through.
Request that each project (Chromium, Firefox, etc) allow the pass-through.
Wait for all the updated code to be pushed down-stream.
There might be more complicated implementations of this sort of support (options in #font-face, etc), but this seems like the easiest, since the color tables are already supported (somewhat) in the same way.
A reliable and easy option is to use a service like FontSquirrel.
https://www.fontsquirrel.com/tools/webfont-generator
Upload the fonts and it will generate everything you need so you can download, copy and paste into your project.
Good luck!
The problem is #font-face doesn't support TrueType Collections (.ttc) files, so it will fail loading it. Does the console give you errors indicating something like this?
You could use a tool to extracy the needed .ttf from the .ttc file, if the license allows this. Or you could ask the foundry you got the font from to supply you with a .ttf (or .woff2, whatevr you need).
I've been using the same google fonts in development for a couple of months by now and today they just stopped to load in Chrome (works fine in FF).
I have the following line in my scss file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin);
and I have the following requests in Chrome Network tab that return 404
Request URL:http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2
Request URL:http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzJX5f-9o1vgP2EXwfjgl7AY.woff2
Also it's worth pointing out that the requests' paths are different for FF and Chrome
Any idea what might've caused google fonts stop to work? I update my ubuntu everytime it offers updates, is there a chance it has to do something with ubuntu update?
PS if I simply open link that I use for the #import, it shows me font-faces for all the types there are for this font, instead of just the three I need, and again, it shows me only 3 in FF
See https://github.com/google/fonts/issues/14. Chrome users of Google Fonts for non-latin scripts for Open Sans were temporarily impacted.
Font Source url > http://fonts.googleapis.com/css?family=Open+Sans:400,600,700&subset=cyrillic,latin
This looks like an issue with Google fonts, as when I point to /* latin */ http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2 it prompts me a file dialog to save.
Where as while pointing to /* cyrillic-ext */ http://fonts.gstatic.com/s/opensans/v10/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2 throws an error.
So it looks like font type is missing on the google server.
Google generates wrong URL's for some 'fonts.gstatic.com' fonts at the moment. This is Chrome specific issue only. The kernel of problem is wrong 'v10' part of URLs generated by Google.
I have discovered the problem for "Open Sans" font only.
For example, http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600,700&subset=cyrillic,latin at the moment gives wrong URL for:
/* latin-ext */ "Open Sans", 300 font (add http:// before, as I can't add more than 2 links now as novice):
fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
At the same time if you'll try to download same font with changed URL ('v10' with 'v11' replaced) using Chrome - the font will be downloaded without any problems. Just try the font link above with 'v10' to 'v11' replaced:
http://fonts.gstatic.com/s/opensans/v11/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2
Is there a way to copy (from Firebug for example) the absolute instead of the relative URL of a web font specified within an #font-face rule?
Example:
I'm viewing the main.css file for a site in Firebug and I get this:
#font-face {
font-family: "myfont";
src: url("myfont__-webfont.eot");
}
How would I find the absolute path for this font?
I know that it should be next to the CSS file in this case, but I can't seem to find it.
Firebug's CSS panel currently doesn't offer an option to copy the URL of the webfont yet. So I created an issue, which was copied over to GitHub as issue #7320 asking for this feature.
Though there's another way to reach this:
Switch to the Net panel and enable it
Reload the page via Ctrl+F5 (or ⌘+F5 on Mac OS X, I guess; circumvents the fonts cache)
Click the Fonts filter
Right-click the request for the font and choose Copy Location
Step 1- Go myfont_-webfont.eot
Step 2- Go Font-Face Generator service
Step 3- myfont_-webfont.eot convert to web font.
I've changed my fonts in the server, but the browser get the old version of the css file where fonts are writed, how to reset the cache?, i've tried to delete browser cache and delete the old file css, but they still are getting the old cs, i've tried to reload the server, how to fix that?
I've noticed this happen only in Firefox, which is very annoying, however, if this is the same situation as you here, refresh with SHIFT + CMD + R (if you're on a mac, I presume the windows alternative is CTRL + SHIFT + R)
That'll clear your cache for that page too + SHOULD show your fonts :)
Make sure your browser isn't displaying local fonts — I spent almost one hour trying to figure out how to clear the font cache in Firefox, while the issue had nothing to do with that.
Check your webserver logs : are font files downloaded ? If not, then it's likely you're using local fonts.
Consider this real case scenario :
#font-face{
font-family: SuperFont;
src: url('../fonts/Superfont.ttf'),
}
I copypasted this code from somewhere, removing part of the src definition, not noticing the ending comma which made this line invalid CSS. Therefore the font was not downloaded.
However, since I had Superfont already installed locally, it seemed to work because the browser recognized the font-family. Well, until I decided to change the font file, but keeping the font-family definition to spare further modifications of the CSS file…
Morality : when testing fonts, use an unambiguous custom font-family name.
Have you tried viewing the page in a different browser to ensure the old font isn't still being added to the page?
If you're still using the same CSS file, you can navigate to the CSS file and do a hard refresh on that Ctrl+F5.
Also, I've found that closing the page completely before clearing your cache can help too!
Do a : Ctrl + F5 on your browser
I have no idea why this is happening. I am following the standard tried and tested method of using google web fonts
<link href='http://fonts.googleapis.com/css?family=Sunshiney' rel='stylesheet' type='text/css'>
<style>
h1{ font-family: 'Sunshiney', cursive; }
</style>
<h1>Hi there</h1>
This works in Safari, Chrome and IE but not FF7.
Has anyone come across this. I've also tried using the JS integration and the #import syntax and it is the same. I'm really stuck.
This is a known issue with Google Web Fonts. An internal configuration change broke serving of one of the headers needed for reliable operation in Firefox and IE9+. The fix is propagating now and it should be working soon.
Thanks for reporting the issue!
(I'm an engineer on the Google Web Fonts team, found this in a twitter search trying to investigate how deep the breakage went)
I think its problem with google
On my browser FF 7.01 is show Comics Sans
http://fonts.googleapis.com/css?family=Sunshiney => redirect to
themes.googleusercontent.com/static/fonts/sunshiney/[...]3HZu7kw.woff
And response with no font data
but when type this adress in url bar i can save this font
so.
Just download this font and simple embennded to webpage
Will be faster
eq
====> 0,20second to download family=Sunshiney
=====> 0,30 to download woff font
There is currently an issue on Google's end with the Webfonts. It's odd because they were working just a few days ago, and I've seen them load up once or twice, but otherwise it's reverting to the fallback font.
Your best option is to download the file and manually embed it into your webpage using #font-face. There's a good article on that at Six Revisions.
I hope Google gets it sorted soon.
Just in case it helps someone, I just had a problem with Google Web Fonts not rendering on a colleague's Mac, but working on other (similarly configured) Macs. It was obviously something client side, and turned out to be the browser.display.use_document_fonts setting (see here).
To stop it happening, it's a case of going to Preferences .. Content .. Fonts & Colors .. Advanced and making sure "Allow pages to chose their own fonts, instead of my selections above" is checked.