Using font variations/ligatures from a custom font in my site title

Site URL: https://www.willmiller.co

So, I've built out my photography site using the Bedford template because it compliments the branded content that I created for my business.

The logo that I made was created in photoshop from a font pack that I purchased, which I've already added the font and CSS into my site to assign it's role as my site title, H1, and H3.

The logo I created ended up not needing any customization on PS, except for the fact that it was created using some custom character variations/ligatures that were provided with the font (the issue specifically is with the lowercase "r" in my site title vs the "r" with an extended ear on my logo).

I would like to also continue to use this character variation in my site title, but I can't figure out how to use any of the variations in font/custom ligatures in the title. 

Some of the solutions I've tried after doing my own research:

-copy+pasting the unicode "r" into the site title box (which I either did incorrectly or just didn't work).

-saving the original photoshop design as a .png with a transparent background, and then uploading it as my "site logo" (this would've worked, however the .png defaults to a white background. It shows up as a white rectangle and it messes with the padding on my navigation bar)

I'm including a photo of:

-the CSS I've added in to customize my Site title, H1, and H4 settings, which also includes the custom font name.

-the desired "logo" I'd like to have as my site title instead, with the "r" variation that I'd like to have.

-a screenshot of my site as it is right now.

I'm assuming this is something that can be solved without custom CSS, but any advice is welcome. Thanks in advance!