Special Font

[reekes]

Nothing I do seem to get the ‘Special Font’ to show up with any Google font I’ve tried.

In fact, any other font choice doesn’t seem to show up anywhere I’ve looked.

I’ve been trying to change the font type used in quote posts to use the ‘special font’.

But try as I might, I cannot get this (or any) font to show up. I do get some unpredictable results, like sans to serif changes, but never the font I’m trying to use.

I have a child theme, and everything else I’ve done is working. I’ve even deleted the child theme, and gone back to the default theme just to test, and still the Google font in the Theme Options isn’t working.

I can’t find the special font to appear anywhere.

How can I get a quote format post (or any content) to use the special font? Any clues?

Topic

[Jason Bobich]

Hello,

The “special font” gets applied only to these few things:

1. Titles in sliders
2. Slogan element of the Builder
3. Tweet element of the Builder
4. Any HTML element that you add class “special-font”

The special font doesn’t effect the quote post format, which simply shows a <blockquote>, and has its own font declaration. You’d need to target it specifically with your own CSS changes:

blockquote { font-family: "Your Font"; }

And for example, if you’ve set a Google font for your “special font” in your Theme Options, this means the theme is including it in the website for general use, as well. So, now you can take that and target your <blockquote> directly with that.

blockquote { font-family: "Google Font Name"; }

If you’re trying to do this and it’s not working, show me a link to your site. I’m sure there’s a simple explanation, and we can work it out.

======

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[reekes]

I see, thanks for the reply. I didn’t have any of the elements that would by default show the special font. Now that you’ve listed them (again) I recall having read that somewhere.

I can change the blockquote, or in my case the format-quote which is what I’m after, to be the Google font I want IF I hard code its name into the CSS.

I was thinking there’s a way to use special-font defined in the Theme Options panel by reference, rather than hard coding it into the CSS. Sounds like that identifier isn’t available within the CSS.

BTW – I think the special font should be used in format-quote posts, and maybe asides.

[reekes]

OH – the Google font must be named in the Theme Options or that font will not be available to the CSS. That was part of the problem I was having.

[Jason Bobich]

So you got it now? You’re good to go on this?

And yeah, if you don’t select a Google font in the theme options, you’d have incorporate manually yourself. If this is something you want to do for other reasons later on, here’s a topic from another forum that might be helpful —

=======

I know with your other themes that there’s a simple Google Fonts option but how are Google Fonts used with Jump Start? By this I mean the link / import / Javascript connection to Google’s site. I don’t know where I’d put the normal link, and my understanding is that using the @import option can potentially slow down page loads so do you modify the functions.php file, or use some other method. Could you please point me in the right direction?

http://support.themeblvd.com/forums/topic/google-fonts/

Hello,

It’s pretty straight forward. Essentially you’re just copying the instructions they give you in the Google font directory when using a font, and this is essentially all other Theme Blvd themes are doing for you behind the scenes when you configure those options.

So let’s take a font called “Marcellus” — Here’s the standard way Google tells you to implement it: http://www.google.com/webfonts#UsePlace:use/Collection:Marcellus

Step 1: Include the font.

So, in your Child theme’s functions.php, you could do something like this:

function my_fonts(){
	echo '<link href="http://fonts.googleapis.com/css?family=Marcellus" rel="stylesheet" type="text/css">';
}
add_action( 'wp_head', 'my_fonts' );

Note: If you were implementing multiple fonts, you could just put all the calls to them in that one function.

Step 2: Incorporate it into your CSS.

Now, just apply the font with CSS how you would any font.

body { font-family: 'Marcellus', serif; }

h1, h2, h3, h4, h5 { font-family: 'Marcellus', serif; }

.whatever { font-family: 'Marcellus', serif; }

etc, etc ...

[reekes]

Yeah, I’ve got it working. Thanks.

I was thinking something like this below would work, where special-font is defined in the Theme Options panel. Being able to use this identifier means I can always change the font in Options and not have to also hard code it in the CSS.

blockquote { font-family: special-font; }

[Jason Bobich]

There’s just nothing naturally in the CSS language that would allow you to do that. This is actually why developers have created things like SASS for those that want to go to extent of setting up the ability to do things like that. — where in this example you could setup some kind of “variable” to be used throughout your stylesheet.

[Author]

Replies