Hi!
I installed @font-your-face and enable everything in the module interface. But when i tried to enable a specific font in the UI, I always received this error message : "Font not found. Could not enable."

Did I forget to import something? Or is it a bug from the module?

Thank you for your help!

CommentFileSizeAuthor
#6 fontyourface-googledevtools.JPG123.86 KBcraigritchie

Comments

sreynen’s picture

sreynen commented

Can you give an example of a font this happens on, along with the provider?

Anaelle’s picture

Anaelle commented

Sure. For example, it happens on Open Sans Condensed (Font Squirrel).

sreynen’s picture

sreynen commented

What browser are you using? If you're able to use a web inspector to look at the HTTP request that happens when you click "enable", please post a screen shot of it here. Or if this is on a site I could access, you can also send me credentials via my contact form and I can check it directly.

Here's how this is supposed to work:

1) In the JavaScript, fontyourfaceEnableClick() gets the font ID (fid) from the HTML with link.parent().attr('data-fid');
2) The JavaScript then passes the fid with a POST request to admin/appearance/fontyourface/ajax/enable
3) The PHP looks at $_POST['fid'] and loads that font from the database.

That error happens when the incoming $_POST['fid'] is not found in the database, which means one of those 3 steps is going wrong. Either it's not getting the fid from the HTML, or it's not passing it correctly from JS to PHP, or it's not handling it properly in PHP.

craigritchie’s picture

craigritchie commented

Same issue here. Via both Chrome and Firefox, I've tried Bree Serif and Arimo (and a couple of others) from Google Web Fonts. I'm happy to look at a Web Inspector to troubleshoot, but I don't know what that is... can you describe how to get to the screen shot you need? Thanks.

sreynen’s picture

sreynen commented

Here are instructions for how to use the network panel in Chrome:

https://developers.google.com/chrome-developer-tools/docs/network

The network panel should show the AJAX request to admin/appearance/fontyourface/ajax/enable and the headers of that request should show the data being sent.

craigritchie’s picture

craigritchie commented
StatusFileSize
new fontyourface-googledevtools.JPG123.86 KB

Okay, I think the analysis is attached here. Three "undefined" requests.

sreynen’s picture

sreynen commented

Please click on one of those and get a screen shot of the headers for an individual request.

craigritchie’s picture

craigritchie commented

Here are the headers for all three, with my domain/dir X'd out:

Request URL:http://xxxx.xxx/xxxxx/admin/appearance/fontyourface/ajax/enable/undefined
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:application/x-www-form-urlencoded
Cookie:Drupal.toolbar.collapsed=1; Drupal.tableDrag.showWeight=1; __utma=160722927.1630144385.1328724441.1337058092.1337058122.11; __utmz=160722927.1337058122.11.4.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=site%3Axxxx.xxx%20xxx%20xx%20xxx; SESS43322c98eda9276bc0f3399024592433=n7E8l7XBjt_qe0W-NMcwF2oTtcdrFKDjUP40uPtCg9M; has_js=1
Host:xxxx.xxx
Origin:http://xxxx.xxx
Referer:http://xxxx.xxx/admin/appearance/fontyourface/browse/google_fonts_api?re...
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Language:en
Content-Type:application/json
Date:Mon, 28 May 2012 15:33:40 GMT
ETag:"1338219220"
Expires:Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive:timeout=10, max=29
Last-Modified:Mon, 28 May 2012 15:33:40 GMT
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding

Request URL:http://xxxx.xxx/admin/appearance/fontyourface/ajax/enable/undefined
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:application/x-www-form-urlencoded
Cookie:Drupal.toolbar.collapsed=1; Drupal.tableDrag.showWeight=1; __utma=160722927.1630144385.1328724441.1337058092.1337058122.11; __utmz=160722927.1337058122.11.4.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=site%3Axxxx.xxx%20xxx%20xx%20xxx; SESS43322c98eda9276bc0f3399024592433=n7E8l7XBjt_qe0W-NMcwF2oTtcdrFKDjUP40uPtCg9M; has_js=1
Host:xxxx.xxx
Origin:http://xxxx.xxx
Referer:http://xxxx.xxx/admin/appearance/fontyourface/browse/google_fonts_api?re...
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:no-cache, must-revalidate, post-check=0, pre-check=0
Connection:Keep-Alive
Content-Language:en
Content-Type:application/json
Date:Mon, 28 May 2012 15:33:40 GMT
ETag:"1338219220"
Expires:Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive:timeout=10, max=30
Last-Modified:Mon, 28 May 2012 15:33:40 GMT
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding

Request URL:http://xxxx.xxx/admin/appearance/fontyourface/ajax/enable/undefined
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Content-Type:application/x-www-form-urlencoded
Cookie:Drupal.toolbar.collapsed=1; Drupal.tableDrag.showWeight=1; __utma=160722927.1630144385.1328724441.1337058092.1337058122.11; __utmz=160722927.1337058122.11.4.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=site%3Axxxx.xxx%20xxx%20xx%20xxx; SESS43322c98eda9276bc0f3399024592433=n7E8l7XBjt_qe0W-NMcwF2oTtcdrFKDjUP40uPtCg9M; has_js=1
Host:xxxx.xxx
Origin:http://xxxx.xxx
Referer:http://xxxx.xxx/admin/appearance/fontyourface/browse/google_fonts_api?re...
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.52 Safari/536.5
X-Requested-With:XMLHttpRequest
Response Headersview source
Cache-Control:no-cache, must-revalidate, post-check=0, pre-check=0
Connection:close
Content-Language:en
Content-Type:application/json
Date:Mon, 28 May 2012 15:33:40 GMT
ETag:"1338219220"
Expires:Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified:Mon, 28 May 2012 15:33:40 GMT
Server:Apache
Transfer-Encoding:chunked
Vary:Accept-Encoding

sreynen’s picture

sreynen commented

Okay, so that narrows down the problem to either the JavaScript or the HTML. Let's check the HTML next. To do that, right-click (or control-click) on the footer of a font at admin/appearance/fontyourface/browse and select "Inspect Element" You should see something like this:

<div class="fontyourface-footer enabled-no" data-fid="4249"><a href="/admin/appearance/fontyourface/enable/4249%3Fdestination%3Dadmin/appearance/fontyourface/browse/font_awesome" class="enable-link">Enable</a></div>

Please take a screenshot of what you see, or otherwise add the HTML here.

craigritchie’s picture

craigritchie commented

<div class="fontyourface-footer enabled-no" data-fid="1"><span thmr="thmr_30"><a href="http://xxxxx.com/xxxx/#overlay=admin/appearance/fontyourface/enable/1%253Fdestination%253Dadmin/appearance/fontyourface/browse/google_fonts_api" class="enable-link">Enable</a></span></div>

sreynen’s picture

sreynen commented

Okay, so the only difference I see there is you're using Overlay. I'll try with that on and see if it's related. If it's not Overlay-related, I think we've narrowed it down to a JavaScript problem.

craigritchie’s picture

craigritchie commented

I just tried it without the overlay, still didn't work.

sreynen’s picture

sreynen commented

I also tested with overlay, and I'm not seeing the error. The problem seems to be in the JavaScript file at [module_directory]/fontyourface/modules/fontyourface_ui/js/browse.js, in the fontyourfaceEnableClick() function. To narrow it down further, I'll need someone who is seeing the error to debug that file with console.log messages. Specifically, something like this:

var link = $(this);
console.log(link.length);
console.log(link.html());
console.log(link.parent().length);
console.log(link.parent().html());
var fid = link.parent().attr('data-fid');
console.log(fid);

And then screenshots of what gets output in your browser's JS console.

craigritchie’s picture

craigritchie commented

I'm no JavaScript wiz. Do I add those lines to that function and then try again? Where will the output appear?

sreynen’s picture

sreynen commented

The same window you used to see the network traffic has a "Console" tab at the top, which is where console.log() output goes. And yes, you just need to replace the current code with that's above. The current code should look like this:

var link = $(this);
var fid = link.parent().attr('data-fid');
sreynen’s picture

sreynen commented
Status: Active » Postponed (maintainer needs more info)
craigritchie’s picture

craigritchie commented
craigritchie’s picture

craigritchie commented 
1 browse.js:19
Enable browse.js:20
1 browse.js:21
<a href="/xxxxxx/admin/appearance/fontyourface/enable/213%3Fdestination%3Dadmin/appearance/fontyourface/browse/google_fonts_api%253Fname%253Dbree%2526tag_id%253DAll%2526subset_id%253DAll%2526foundry%253DAll%2526license%253D%2526Drupal_toolbar_collapsed%253D0%2526Drupal_tableDrag_showWeight%253D0%2526__utma%253D160722927.2101747305.1322705219.1333313944.1341460354.7%2526__utmz%253D160722927.1333313944.6.2.utmcsr%25253Dgoogle%25257Cutmccn%25253D%252528organic%252529%25257Cutmcmd%25253Dorganic%25257Cutmctr%25253D%252528not%252520provided%252529%2526SESS43322c98eda9276bc0f3399024592433%253DUq9yN8fN2FNhylT-bEXsdEQV3P7LquftFVqWzotQkSM%2526has_js%253D1" class="enable-link">Enable</a> browse.js:22
undefined browse.js:24
1 browse.js:19
Enable<span class="fontyourface-indicator"></span> browse.js:20
1 browse.js:21
<a href="/xxxxxx/admin/appearance/fontyourface/enable/213%3Fdestination%3Dadmin/appearance/fontyourface/browse/google_fonts_api%253Fname%253Dbree%2526tag_id%253DAll%2526subset_id%253DAll%2526foundry%253DAll%2526license%253D%2526Drupal_toolbar_collapsed%253D0%2526Drupal_tableDrag_showWeight%253D0%2526__utma%253D160722927.2101747305.1322705219.1333313944.1341460354.7%2526__utmz%253D160722927.1333313944.6.2.utmcsr%25253Dgoogle%25257Cutmccn%25253D%252528organic%252529%25257Cutmcmd%25253Dorganic%25257Cutmctr%25253D%252528not%252520provided%252529%2526SESS43322c98eda9276bc0f3399024592433%253DUq9yN8fN2FNhylT-bEXsdEQV3P7LquftFVqWzotQkSM%2526has_js%253D1" class="enable-link">Enable<span class="fontyourface-indicator"></span></a> browse.js:22
undefined browse.js:24
1 browse.js:19
Enable<span class="fontyourface-indicator"></span><span class="fontyourface-indicator"></span> browse.js:20
1 browse.js:21
<a href="/xxxxxx/admin/appearance/fontyourface/enable/213%3Fdestination%3Dadmin/appearance/fontyourface/browse/google_fonts_api%253Fname%253Dbree%2526tag_id%253DAll%2526subset_id%253DAll%2526foundry%253DAll%2526license%253D%2526Drupal_toolbar_collapsed%253D0%2526Drupal_tableDrag_showWeight%253D0%2526__utma%253D160722927.2101747305.1322705219.1333313944.1341460354.7%2526__utmz%253D160722927.1333313944.6.2.utmcsr%25253Dgoogle%25257Cutmccn%25253D%252528organic%252529%25257Cutmcmd%25253Dorganic%25257Cutmctr%25253D%252528not%252520provided%252529%2526SESS43322c98eda9276bc0f3399024592433%253DUq9yN8fN2FNhylT-bEXsdEQV3P7LquftFVqWzotQkSM%2526has_js%253D1" class="enable-link">Enable<span class="fontyourface-indicator"></span><span class="fontyourface-indicator"></span></a> browse.js:22
undefined browse.js:24
sreynen’s picture

sreynen commented
Status: Postponed (maintainer needs more info) » Active

I think I see the problem now, and it's actually in #11, which has an extra span I didn't notice before. Rather than figure out where that span is coming from and how to get rid of it, let's just work around it. Try changing this line:

var fid = link.parent().attr('data-fid');

To this:

var fid = link.parents('.fontyourface-footer').attr('data-fid');

And see if that fixes it for you.

craigritchie’s picture

craigritchie commented

Oh, that span is from the Theme Developer module. I'll try turning that module off and see if the font choice works.

craigritchie’s picture

craigritchie commented

Oh, that span is from the Theme Developer module. I'll try turning that module off and see if the font choice works.

craigritchie’s picture

craigritchie commented

Done! Turning off the Theme Developer module and enabling a font appears to have worked. Thanks!

sreynen’s picture

sreynen commented
Title: Font not found. Could not enable. » "Font not found. Could not enable." error with Theme Developer module
Category: support » feature

Okay, I'm going to leave this open as a feature request so we can make it work even with that module enabled. Probably a pretty common use case to use the two together.

Drave Robber’s picture

Drave Robber commented
Version: 7.x-2.2 » 7.x-2.x-dev
Status: Active » Closed (cannot reproduce)

It seems Theme Developer has changed its manners to be less intrusive - the span is now appended after the div, not inserted inside it:

<div class="fontyourface-footer enabled-no" data-fid="17785" thmr="thmr_472 thmr_420">
  <a href="/admin/appearance/fontyourface/enable/17785%3Fdestination%3Dadmin/appearance/fontyourface/browse/edge_fonts%253Fname%253D%2526foundry%253DAll%2526license%253D" class="enable-link" thmr="thmr_421">Enable</a>
</div>
<span thmr='thmr_472' class='devel-themer-wrapper'></span>

I can enable and disable fonts without problems. Thus, this issue is not reproducible anymore.

Feel free to reopen if you can reproduce it.

(And thanks to the developers of Theme Developer!)