so for the company I work for, I'm writing a script that automatically attempts to add padding to the navigation to approximately fill up the remaining space (as adding padding manually to these elements is a repetitive process I wanted to try to omit)
The script is here: http://a.ndrv.in/Skinning/SmartNav/smartnav.js
We also use the Adobe TypeKit service, which also changes certain fonts that we declare. However, if a font is particularly thin (anything with the condensed keyword), About 50% of the time, it seems to determine the amount of space versus the original font size (which is normally Ariel) rather than the newer, more condensed font size. The "SmartNav" script is loading lower on the page, but even when I push it to the bottom of the site, it still doesn't load correctly 50% of the time.
So, I'm wondering if there's a specific way I can tell this script to wait until this font loads before it tries to determine how much padding to add to each menu element.
Yes there is a way. As per their documentation
<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js"></script>
<script type="text/javascript">
try {
Typekit.load({
loading: function() {
// JavaScript to execute when fonts start loading
},
active: function() {
// JavaScript to execute when fonts become active
},
inactive: function() {
// JavaScript to execute when fonts become inactive
}
})
} catch(e) {}
</script>
You will call your script when typekit is active :)