Making "overlay text" template allow for more than one overlay

I do it by separating the image outside the template and then can reuse Template:Overlay text for each different text overlay. And you can added an additional {{{3}} into the template for font family

<div style="position: relative;">
[[File:S1 End Card.png|600px|centre]]

{{Overlay text| |Test caption  |bottom=80px|left=0px|size=2em}}
{{Overlay text| |Test caption 2|bottom=48px|left=0px|size=2em}}
{{Overlay text| |Test caption 3|bottom=16px|left=0px|size=2em}}
</div>

Aha, that's great! Didn't think that you could separate the image from the template, but that's solved half of my problems. I'll try and add a font family selection to the existing code and make another reply in case I can't get it to work. Thanks once more!

Yeah, I'll admit I'm not an expert in templates and know that I have to add a series of curly braces along with a "3" in addition to declaring a font-family variable, but don't want to break my existing code. Sorry for doubleposting but how would I add this font-family selector?

font-family is on the top row of the template. You could make it {{{3}}} with default as impact

{{{3|impact}}}

<div class="overlay-text" style="position:relative; font-family:{{{3|impact}}}; text-align:center; font-size:{{{size|1.5em}}}; text-shadow:2px 2px #000000;">{{{1|}}}<div style="position:absolute; {{#if:{{{top|}}}|top:{{{top|}}};}} {{#if:{{{bottom|}}}|bottom:{{{bottom|}}};}} {{#if:{{{left|}}}|left:{{{left|}}};}} {{#if:{{{right|}}}|right:{{{right|}}};}} width:100%; pointer-events:none;">{{{2|}}}</div></div>

Ah, I understand now. Wasn't sure if I had to delete it and declare a new {{{3}}} variable at the end of the code.
Now all I need to know is how to define the font family when using the template: I've tried
{{Overlay text| |Test caption  |font-family=arial|bottom=80px|left=0px|size=2em}}
In addition to moving the "font-family" variable to the end of the declaration, after size=2em, and the font remains as Impact. Not sure if this is due to me inputting it wrong or Arial not being an existent font family, but once this is sorted out the template should be ready for general use.

There are 2 types of variable entry

1) non-labelled
you use {{{1}}}
so {{{2}}} is replaced with Test caption in {{Overlay text| |Test caption |bottom=80px|left=0px|size=2em}}

2) labelled
you use bottom=
so bottom=80px in used in the template
you have decided to use this option (|font-family=arial) for font-family so needs {{{font-family}}} instead of {{{3}}}

<div class="overlay-text" style="position:relative; font-family:{{{font-family|impact}}}; text-align:center; font-size:{{{size|1.5em}}}; text-shadow:2px 2px #000000;">{{{1|}}}<div style="position:absolute; {{#if:{{{top|}}}|top:{{{top|}}};}} {{#if:{{{bottom|}}}|bottom:{{{bottom|}}};}} {{#if:{{{left|}}}|left:{{{left|}}};}} {{#if:{{{right|}}}|right:{{{right|}}};}} width:100%; pointer-events:none;">{{{2|}}}</div></div>

There we go, now everything works! Thank you so much.