Jump to content
gershonb

Font-Family will not load in Jquery

Recommended Posts

Hello. I am building a page for people with disabilities that involves demonstrating several fonts. There will be a pane with buttons that either a) call different classes that will load the environment, or B) call the jquery .css() function to load the environment that way. I have gotten both methods to work--for everything except the font-family. I've put the font-stacks into the classes, loaded the classes, and everything but font-family works. I've also loaded everything into a .css() statement--and everything but font-family works. Here's the jQuery I'm using now: <code> $(document).ready(function(){$("#numone").click(function(){ $("#texdiv").toggleClass("graybkd"); $("#texdiv").html("Here the text is blue on a Gray Background. Does this feel better? This font should be Arial, which is easier for vision-impaired people to read..."); }); }); </code> When I do everything with the .css(), the toggleClass statement is commented out and after the event handler the code looks like this: <code>$("#texdiv").css({"font-family" : "Verdana", "background-color" : "#dddddd", "border-color" : "#0000dd"}); --- etc. </code> If you want to see how this all works, you can check the following jsfiddle.net page:http://jsfiddle.net/gershonb/eJapD/118/ As you will see, everything works--except the font-family change. It kind of stumps me when everything works except for one small part. Thanks Gershon

Share this post


Link to post
Share on other sites

It's working fine for me. I removed Tahoma and Verdana from the CSS class, because those will take precedence over Arial. I also switch SanSerif to the generic sans-serif. I added the code you showed as the handler for the second button. I can click either button and it will change the style appropriately. One issue is that using the css method will apply those styles directly to the element, meaning they will take precedence over anything else (like a class). So after using the css method, when I click the first button the only things that change are the properties that are defined in the class but not from the css method. http://jsfiddle.net/eJapD/121/

Share this post


Link to post
Share on other sites

Dear justSomeGuy Thanks for fiddling with my fiddle. I've tried yours and tried mine again (button #two was superfluous, btw). The thing is, the only font face that appears is a serifed font. No sans-serif font will load from this code. I've tried loading things like Comic Sans (important for dyslexics) and no go. Might it be necessary to prefetch the fonts in the <head> section with some code? Not sure exactly how to do that. There are other specialty fonts that I'm sure I'll have to load on the page. But here, either with toggleClass or .css() methods, the basic font family that loads at the beginning of the document doesn't change. Might it be that the default web font (serif) gets set up like a global variable? Also: is there a good reference for how javascript/jquery pages load? Thanks. (still puzzled) Gershon

Share this post


Link to post
Share on other sites

I see the fonts changing in my version. There are ways to work with certain specialty fonts, but when you define fonts in CSS like that then you're telling the browser to use a font that is already installed on the computer. There's nothing to load, if the font is installed then the browser will use it. I see it changing between Times, Arial, and Verdana when I click the first button then the second button on the version I linked to. After clicking the second button the font won't change again because the style is inline.

Also: is there a good reference for how javascript/jquery pages load?
Quirksmode has a good Javascript section here: http://quirksmode.org/js/contents.html But other than that, I'm not real sure what to tell you. When the browser loads a web page it will execute whatever Javascript code it finds in the order in which the code is written. You can use event handlers to execute code when a certain event happens, like the page finishes loading or you click something. Otherwise, it just executes whatever code it finds on the page.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...