Using paragraph font for button

For some reason the Collapse-O-Matic button is in a different font from the default font used on the page. Please see my test page here.

Incorrect. The trigger font is using the default font for your page. It is your paragraph elements that have a custom font defined in CSS:

p {
    font-family: 'Montserrat';
}

The bottom Read less button is in the normal paragraph font, however, the top Read more and Read less buttons are in a different font. Is it possible to change that to the default font used on the page?

Again, it’s how your CSS is set up. If you want the trigger font to match that of the paragraph then you need to do this in CSS. You can either change the trigger css:

.collapseomatic {
    font-family: 'Montserrat';
}

Or actually change your sites default CSS:

body, button, .archive .read-more a, .blog .read-more a, .search-results .read-more a, input, select, textarea {
    color: #726b60;
    font-family: Lora, Georgia, serif;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.5;
}

Also, while the top buttons respect my custom arrows, the bottom Read less button doesn’t. How do I add my custom arrows to the bottom button as well?

Provide the bottom trigger your custom ‘myarrows’ class.

Lastly, before opening another thread, is there a quick way to prevent the indent of the target text (so that it is flush left with the other paragraphs)?

Yes, add the following CSS:

.collapseomatic_content {
    margin-left: 0 !important;
}

Thanks so much! I’m learning more every day ??

The only thing now is that the top button is still indented. How do I assign margin-left=0 to the button as well?

Then:
Provide the bottom trigger your custom ‘myarrows’ class.
Would you be able to tell me how to do that?
I tried this:
<span class="collapseomatic colomat-close" id="bot-swine" trigclass="myarrows"> Read less</span>[/expand]
but that didn’t have any effect.

Also, I was wondering, is there a way to have the button inline with the preceding paragraph? Currently I have a separate shortcode block for the Collapse-O-Matic shortcode. Is there a way of adding an inline shortcode as the last element of a text paragraph?

How do I assign margin-left=0 to the button as well?

Can you describe a bit more one what you mean by button?

…but that didn’t have any effect.

Ah, not quite, more like so:
<span class="collapseomatic colomat-close myarrows" id="bot-swine"> Read less</span>[/expand]

Ah, by button, you mean trigger. ok.
Take a look at these two posts and let me know if you get stuck:
https://spacedonkey.de/1578/collapse-o-pro-matic-css-tricks-arrows/
https://spacedonkey.de/2025/collapse-opro-matic-css-tricks-ii-font-awesome-arrows/

This will also explain how to adjust the trigger (or ‘button’ left and right as required using:

.collapseomatic.myarrows {
    padding-left: 0;
}

Is there a way to have the button inline with the preceding paragraph?

Yes, it is a bit more involved, but since you are in a learning mood, check out these posts:
https://spacedonkey.de/2110/collapse-o-matic-inline-roll-your-own-triggers/
https://spacedonkey.de/2828/collapse-o-matic-inline-trigger-with-block-target/

All the best and ping back if you get stuck!

Wow, thanks so much, this is all awesome.
I’m figuring it out ??

Those links were very helpful, I got almost everything working as I want it to.
Just one thing: When using the “Inline Roll-your-own Triggers” per the link above, how do I also get it to swap the title for the top trigger from “Read more” to “read less”? Here’s how I have it, I added ‘swaptitle=”Read less”‘ as I had it previously when using the shortcode method, but that doesn’t actually change the text. This is the code I have:

<span class="collapseomatic myarrows" id="my_id"  title="Read more" swaptitle="Read less">&nbsp;Read more . . .</span></p>
<p><span id="target-my_id" class="collapseomatic_content ">Target Content
<span class="collapseomatic colomat-close myarrows" id="bot-my_id">&nbsp;Read less</span></span>
</p>

In the example above, you simply need to add:
<span id="swap-my_id" class="colomat-swap" style="display:none;">&nbsp;...Read Less</span>

All together (and simplified for easier understanding) it would look like so:

<span class="collapseomatic myarrows" id="my_id"  title="Read more">&nbsp;Read more . . .</span>
<span id="swap-my_id" class="colomat-swap" style="display:none;">&nbsp;...Read Less</span>
<span id="target-my_id" class="collapseomatic_content ">Target Content
<span class="collapseomatic colomat-close myarrows" id="bot-my_id">&nbsp;Read less</span>
</span>

Fantastic! All perfect. Thanks a ton ??

Yeah! That’s what we like to hear. Glad it you got it worked out–was even kind of fun, no?
Issue marked as resolved.

Yes, it was fun ??
I’m not the kind of guy who would take a class on HTML or CSS programming or anything – maybe I should but seems too daunting – but I love to figure out things related to a particular problem and then through inference and trial and error I learn how things work.
So you’ve taught me a bunch of things – I feel I know a tiny little be more about websites … ??