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;
}

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!

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>

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.