Hi All,
Here is a challenge I've never had to deal with, so really have no idea how to proceed.
A client has sent me two fonts.
They would like one to be used as H2
They would like the other to be used as body text ('p' I assume), and the bold version of this font to be used as H4.
Where do I upload these fonts to on the server (just upload the ttf?), and how can I implement such a thing in Buildr (Backgrounder)?
Any help, greatly appreciated.
Thanks, Nick

Nick what fonts and whose are they?
If they are custom may be a problem
I've use Google fonts that are close as can be to print fonts in the past

Hi Andrew,
This is what I was sent:
Large Heading font – Playball.ttf
Smaller heading font – Lato-black.ttf
Body text – Lato-regular.ttf

I have no idea where they are from or even if they are OK for web use.
Do you suggest not using these, but rather, finding something similar in Google fonts?

OK, had a quick search and discovered they are available as Google fonts.
So, what's next to do to get one for H2 and the other for body text and H4?

Hi Nick,

With the h2 would this be used also as h1,h3,h5,h6 ? e.g. this would be a site wide font

and the body text would be used throughout the site as a global font?

Cheers
Paul

Hi Paul,
Playball to be used for H1 and H2 and perhaps H3 (flexible)
Any other H will be Lato-black (including menu)
Body text will be Lato-regular

Is this possible? If not, what is easier to implement, and how do I do it?

Thanks, Nick

Best way to load cdn fonts, if not using the fonts loaded directly from your server, is to load from javascript. This will avoid 'fout.'

you can set the heading fonts generally in buildr. but to be specific, you will need to use custom.css and create selectors (classes and id's).

for modules, having a module class suffix works very well on module titles and any other class. example: for module class suffix "my-custom-class," in custom css would have .my-custom class h1, .my-custom-class h2, .my-custom-class .zen-module-title { add style here }

If on pages, in the menu item, add a page class and use exactly the same way - example, .my-page-class h3 { styles here } would render all h3's on that page the same way

If you need to do it inline, switch editor to code view and expand the declaration from <h2> to something along the lines of <h2 class="my-custom-class">, which would activate .my-custom-class h2, the first example above

Notice that you can build a deck of classes in custom.css - I like to keep these altogether, near the top - then utilize them endlessly with a little care as you build up the site. If you don't use any of the special classes, the template parameters will otherwise be in control.

Thanks blueshift,
I thought it would be as simple as going to the template style>design>Fonts, then (perhaps) activate Font loader.
After that, work down the Font page and place the google font in 'Body fonts', Headings and Main menu Fonts.
Then on this page at the bottom, is Custom fonts.

These are site-wide changes, which is fine.

Paul, is changing the General Settings (Font) an easier way to do the font changing, rather than actually creating a custom CSS that blueshift suggested? (I assume changing the General Setting creates a custom CSS in the background.)

I'm not strong on CSS, and if there is an easier path to achieve a goal, I will follow it.

Hi Nick,

The more fonts you load the slower the site will perform - some font files will perform worse depending on the file sizes.

With fonts there are trade always trade offs regarding FOUT and speed

Most browser manufacturers and major font providers are working to make font handling better - whichever font you use I would check on different browsers to see how it looks

You would add as many fonts as you can using the font template settings - so you would add a different body and heading font type

In the template fonts tab the custom fonts tab means you can add one font there from a google font

but you do need to add a selector for it to work

I can give more info on above please ask if needed

Cheers
Paul

What Blueshift is definitely a way you could go but as you've seen you can load 3 fonts by the settings first

Cheers
Paul

Thanks Paul,
Decided to use two fonts, one for body text (same one for navigation but with a greater weight ) and one for the headings.
It all seems to be running smoothly.
Only issue is, all headings are that one font. What if I want only H2 to be that font and all others to be the other font?
Is that where the custom font option comes into play?

Yes indeed - this is where the custom font does come in

You need to target the h2 - if it is site wide then that is much easier

Cheers
Paul

Maybe I misunderstood, but it seemed he needed differing fonts within the same classt, such h2 or h3. for this some minimal extra work is required. Typekit would allow one to target classes by name, but the other elements such as module class suffixes and inline code declarations would still be required.

I changed the heading font back to the same one as for body font.
That works, however, I can't get the H2 to change to the other font.

In Custom fonts I added H2 as the selector, then chose the google font that I want for H2. Is that all that is needed, or do I have to add something to the 'CSS to be applied to custom font' for it to show the font for H2?

Got a link for the site?

Cheers
Paul

Paul,
I got it to work for H1, 2 and 3.
These templates are awesome.

What if I want it to be more specific about which H2 to target, for example,
<H2 class = zt-block>
<a href = "...."> Juice </a>
</h2>

How do I target that H2? Can I do it from the Fonts in the template, or do i have to create a custom CSS for this?

Hi Nick,

h2.zt-block a {font-family: ...... ;}

Would be the style in this example

Cheers
Paul