Apply Typeface font to part of paragraph

Foundry
1

I am working on a website for a friend, and they want the first of each paragraph in a section to be in a different font than the rest of the paragraph. (They’re a good friend – I’m not going to question their design decisions.)

The only way I can think of to do this within Foundry is to use HTML for the first paragraph, and do something like this:

<p class="theme_style"><span class="foundry-typeface-one">This is in Typeface One.</span> And this isn't.</p>

This works fine, but I have a few questions:

  • Is there a recommended way to do this within Foundry?
  • Is this approach likely to break anything in the future?

Thanks!

2

Just use multiple Paragraph stacks. Set the first Paragraph to the Typeface font you want.

3

I edited this message five times to get exactly what I wanted. I see that I should have edited it six times. :roll_eyes:

I typed “the first of each paragraph” when I meant “the first sentence of each paragraph.”

So – to correct “they want the first sentence of each paragraph in a section to be in a different font than the rest of the paragraph.”

Oh, and also…thanks @elixirgraphics for answering the actual question that I asked…next time I’ll ask the correct question the first time.

Hope I haven’t used up all my question karma at this point…

4

I think you were generally on the right track with using the <span> tag. Here’s a few suggestions for more flexibility in the future.

  1. You can use a span tag inside a Foundry Paragraph stack, you don’t need to use an HTML stack. That will allow you to use all the other options of the Paragraph stack. Just use the span tag and omit the <p> tag you used above.

  2. I would not directly reference the Foundry Typeface in the class of the span. I would use my own custom class, something like “first_sentence” for my class name. In the site-wide CSS area, I’d then use the “font-family” attribute to specify the font. I would use the Typeface stack to actually load the font, but just reference it by name in my CSS.

This gives you way more flexibility. Perhaps the client decides he’d like all those first sentences to be a different color, or bold, or he decides it looks better if they matched the rest of the paragraph. To make any of these additional changes, you will only need to edit your CSS rule and have it change all those special sentences on the site.

This also helps to ensure that any changes made to Foundry down the road, don’t cause any issues with your custom code.

2 Likes
5

Thanks much, @DLH. I wasn’t aware that html would work in the paragraph stack. I’ve only been messing around with Foundry for a few weeks, and I find out something new every day…

6

Morning! Looks like @DLH has you covered. You’d have to code it this way pretty much no matter how you were doing it, framework or not since it isn’t a normal thing to do.

7

Thanks, @elixirgraphics. I think I’ve talked them into going with just having the very first paragraph on the page in a different typeface, which of course is much easier.

1 Like