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.
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
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
I am looking at the source code of a project where a licensed font from myfonts.com is used.
The css file contains this -
/* #import must be at top of file, otherwise CSS will not work */
#import url("//hello.myfonts.net/count/123d4d");
#font-face {
font-family: 'SoliPx';
src: url('webfonts/123D4D_1_0.eot');
src: url('webfonts/123D4D_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/123D4D_1_0.woff') format('woff'),url('webfonts/123D4D_1_0.ttf') format('truetype');
}
And as mentioned in the source urls - there are eot, woff, ttf files in the local webfonts folder of project.
I know how #font-face and webfonts work in general.
But in the case above where a licensed/commercial font is used, I don't see any font files downloaded in Dev Tools, but the text is rendered with the specified font.
There is a net request that goes to hello.myfonts.net/count/123d4d with status 200 and response content-type of "text/css" but nothing in the response body.
What is happening internally? How this is working?
I've dealt with this before, and here is what that imported file does:
As far as actually loading the fonts, it does nothing. I've left it out before (while testing) and the fonts load fine from my server.
It counts the number of times the files is imported by your CSS (hence the /count/in the URL). If you read the myfonts.com webfont license, most of the webfonts come with a monthly pageview cap. If you pass that cap myfonts will want to charge your account again, or suggest you purchase a new license with a higher cap.
So what we really have here is an API endpoint that returns an empty CSS file. Every time that CSS file is loaded, myfonts adds a +1 to the number of monthly page views to the account that corresponds with the hash at the end, in your case 123d4d.
Once again, it has nothing to do with loading the fonts themselves. You have the files on your server, and they will load when referenced—full stop.
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