I’m trying to replace some “text graphics” on my site with Typekit fonts using Typeface. I was using the graphics in place of headers, but the graphics contain two colors for emphasis.
However, I can’t find a way in Foundry to apply more than one color to a header stack. The font is correct, etc. but aside from assigning a second color to the secondary text (which doesn’t work because that font is too small), it appears this isn’t possible.
I assume something like Font Pro from Joe Workman might allow this, but I was hoping it was possible from within the built in Foundry stacks.
I may be misunderstanding what you’re trying to do, but why not use 2 header stacks in a 1 column stack and you can then change the colors, size and/or fonts of each.
1 Like
Thank you. I should have included an example, which I will do now.
These are single line “headers”. Even if I tried to do a two column stack, etc. I wouldn’t be able to space them properly.
It appears that using a Foundry header stack, I can’t control colors, but with the Font Pro stack, I could just use the standard header stack and apply the font family and style options, not including color. Then I should be able to just apply color to the individual words. I can’t be certain without spending the $50 to buy it . . . unfortunately, the Foundry TypeFace stack doesn’t apply any settings to standard text boxes or I could have tried do that as well.
I know just enough to be dangerous, but I think you can put the following HTML code inside each Header stack to change the individual colors:
<span style="color:black;">A Best Business</span> <span style="color:red;">Practice</span>
<span style="color:black;">Protect Your</span> <span style="color:red;">Business</span>
Apparently, danger is your game! When I paste this
<span style="color:#1C3F94;">A BEST BUSINESS</span> <span style="color:#CB2026;">PRACTICE</span>
I get exactly what I want. When I set the letter spacing to 2px, it’s almost perfect. Thanks very much!!
You could also check out Header Pro by Big White Duck stacks (Donation Ware) for another option that would also work.
https://www.bigwhiteduck.com/stacks/headerpro/
1 Like
I took a look at that earlier . . . do you know if it’s compatible with the TypeKit fonts that TypeFace imports?
Edit : I installed the Header Pro font. Same basic issue in that I need to paste the HTLM code into the stack to get the two colors, BUT it does allow me to do a 1.5px spread on the letters which just about replicates what I’d been doing in Illustrator for the graphic so I think I’m done with this one minor issue.
Thanks to all! I know the Font Pro stack would probably have allowed even more customization but it’s nice to be able to do what I need with as little extra code as possible and being able to replace those graphics with a single font should help with load times.
Adding a color picker option for the Secondary Text feature of the Header stack is on my long list of todos.
1 Like
Adam - There is already the ability to choose a color for the secondary text. The issue for me is that the secondary text is about 80% smaller than the primary text (bootstrap css tags it as “small” so it doesn’t allow me to have the same SIZE at a different color. I tried to find a way to add some custom CSS code to supersede that but no luck.
I fully recognize that a work around bypasses the simplicity that Foundry was meant to offer. Typing in some simple HTML commands in conjunction with the Header Pro kerning and the TypeFace Typekit support gave me the end result I needed.
Ah, yes, I had a brain-fart. I totally forgot that I worked in the custom color picker for that a while back. Probably should have waited until post-coffee yesterday before doing support, huh. LOL 
That said, yes, the secondary text is supposed to be smaller. That is what makes it secondary to the main part of the header. You could add a <span> to your header for the part of the header you’d like to alter and add some inline styling to it to change its color. That does make things more work though and heads off of the path of simplicity though as you point out.
For the time being though I’m glad you found a solution to what you needed to do for this project.
1 Like
I wanted to follow up on this post as I received an email from BWD (he was notified about this thread apparently) and the Header Pro stack allows for up to three “segments” each of which can be set separately as far as font, size, color, etc. so I was able to replace the HTML text above with just the actual words and format them as needed. The only issue is that spaces at the front or back of each segment are ignored so I had to set right or left padding to have it spaced correctly between colors.
Otherwise, great solution and remarkable support from BWD and Adam, of course.
