ok i have to admit i am very jealous of your site and want the fonts rolling on mine as well. Please oh Please share with me the edits for the forum and footer please.
Posted:
Thu Aug 23, 2012 4:48 am
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
Fonts
For the fonts I'm using 3 custom typefaces here, which is a little more than I might recommend for optimum performance, but I couldn't help myself
Upload the fonts to the style directory of your theme and add the provided css to your style.css (at the very top)
The other font I use comes as ready to deploy package, which you do not need the font-face generator for.
BlackJack (script font): http://www.fontsquirrel.com/fonts/BlackJack
I ended up with something like this at the top of my style.css
At this point you just need to add the font family to any elements you want displayed in that font:
The quote marks are only required if there is a space in the font name, but were included for illustration purposes.
Footer
I didn't actually edit any core files to restyle the footer, it's all done via CSS with the exception of removing the [ and ] characters with JavaScript from the legal menu. All the footer sections have share a common class and have unique ID's so I was able to target each section for styling
<div id="rn-foot1" class="rn-footer">
<div id="rn-foot2" class="rn-footer">
I would recommend playing with Firebug to see what I did there...
Forum Customization
I did some unique customization to the Forum templates which would probably take too long to explain in this post,... But a quick overview...
I'm not using forum icons in the traditional sense (some are used as background images for table rows) which required me to declare some styling inline. In other cases I'm styling text with CSS to look like buttons with custom fonts, etc. Some of the UI enhancements are powered by jQuery Tools http://jquerytools.org/ as the jQuery UI library is fairly large for the minor enhancements I was looking for. If you have other specific questions I'd be glad to offer more info; but it will likely be after I get back from vacation, approx Sept 1st.
Posted:
Thu Sep 13, 2012 2:18 am
nextgen Newbie
Joined: Aug 05, 2012
Posts: 49
Location: Maryland
OK i found out that you can get carried away with adding new fonts to a theme (i am guilty). Was like a new toy on christmas day. At one point i had 5 different fonts for a theme. Is there a methadone clinic for font addicts.
Posted:
Thu Sep 13, 2012 4:10 am
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
lol, I hear ya. Counting the IcoMoon icon font, which I've only used a little, I'm using 4 here
Posted:
Sun Sep 16, 2012 1:45 pm
kguske Newbie
Joined: Sep 02, 2012
Posts: 6
Really useful info, Spasticdonkey. I was going to ask your thoughts on using Google webfonts, but happened to check it today behind my company's firewall - the fonts weren't displayed. That's just another argument in favor of having the fonts loaded locally...so I followed this and have some nice fonts working on the local copy of nukeSEO.com. Once I find the right balance of appearance and readability through some @font-face love, maybe the site will get a new look... Thanks again for very useful info...
One thing that would be nice: having a font folder so themes that share fonts wouldn't need to duplicate them. Then again, since most sites only have 1 theme, it probably wouldn't be that helpful.
Posted:
Tue Sep 18, 2012 3:38 am
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
Glad you found it useful. I had thought about nesting fonts in a particular place, but since the Font Squirrel ready to deploy kits, and the @font-face Generator deploy the fonts and CSS file in the same directory, I did the same. Just means that you can copy/paste the CSS provided, without any changes.
I had not looked at the Google WebFonts in awhile, and it looks like their selection has greatly improved since my last visit. That would have been my main complaint, but interesting about the files being blocked @ your workplace. I take it they have blocked access to google in general.
For me I prefer loading the fonts from my own site, since Font Squirrel makes it so easy to do so; and since I'm now using minify on this site, I'm not as enthused about loading external css files. But I don't see a problem with those who might prefer the slightly easier method of using Google WebFonts
For those wanting to try Google WebFonts...While you can't use external files with the
addCSSToHead
file method, there is a "hacky" way to load them. I'm not familiar with any API restrictions, but this is how you might call them within RN. I actually used this in a soon to be released demo module....
Excited to see a new look for nukeSEO, curious to see what you come up with
Posted:
Fri Oct 19, 2012 1:23 pm
kguske Newbie
Joined: Sep 02, 2012
Posts: 6
The new fonts are installed, but not a drastic change. I have many background changes to make... I was looking into icomoon and using dingbat fonts instead of images (e.g. in some admin functions). Curious - you're using sprites for the footer icons- not icomoon?
Posted:
Fri Oct 19, 2012 3:57 pm
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
Cool stuff, glad you got a chance to play with your site, looks good
Yes, I'm using sprites based on the IconSweet icons which I put together some time ago; prior to finding Kickstart/IcoMoon. Although I did get into trying out icon fonts, which are a little difficult to add in XHTML in a valid method. You pretty much have to use JavaScript in any use of icon fonts, at least those that can be indexed by search engines, or that are used by nukeDH meta descriptions.
It's difficult because you need to store the necessary icon font letter in an attribute; usually within
<span>
. That doesn't leave you many possible valid attributes to pick from in XHTML. I ended up using the title attribute, which isn't perfect as it will be revealed on mouseover... So the attribute is removed after adding the icons via JS. Assuming the IconFont is otherwise installed as in KickStart, the modified JavaScript might look like so:
If you want to use within the WYSIWYG editor, you can't use empty spans as in KickStart, i.e.
Still a fan of both Sprites and Icon Fonts, and will still find uses for both going forward. Although hard to argue with the flexibility of Icon Fonts (color, size, and proper text alignment).
Posted:
Fri Oct 19, 2012 9:17 pm
kguske Newbie
Joined: Sep 02, 2012
Posts: 6
Thanks! I didn't need to use JS or worry about SEO on the admin functions (though I haven't checked compliance yet!), so that might be a valid use for icon fonts, especially for use in lists of potentially thousands of rows, even though the difference in the sprite approach wouldn't be significant. The other advantage of sprites: multiple colors...
Posted:
Wed Jan 23, 2013 10:33 am
Guardian Newbie
Joined: Sep 22, 2012
Posts: 23
I know this thread is old(ish) but it never ceases to amaze me how technology like @font-face grows so rapidly from "ooh, this is new, let's try it" to "which font should I use for this theme".
I think it's great that there is now an accepted consideration for typography when developing/designing.
Posted:
Sun Jan 27, 2013 6:24 am
spasticdonkey Newbie
Joined: Nov 18, 2010
Posts: 106
Location: Texas
Agreed! Amazing how quickly resources have developed, and the internet community has really stepped forward with some great open source fonts. Typography was one of my major complaints about web development for many years....
Not only can you build web ready collections of fonts, hosted free, but you can also download and install them on your pc. Create your collection and use the "Download your Collection" link at the top right. If that's not enough, you can download the entire google webfont collection
http://code.google.com/p/googlefontdirectory/
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum