Change Font of Headline Section's Text Overlay

Site URL: https://www.solafoodcoop.com/blog

I am trying to use a different font than my global font on my blog homepage. I'd like to use Andika for "Morsel" and "Lato" for "A Tasty Blog by SoLA". I would also like to play around with the font sizes if possible. Lastly, I'd also like to add the opaque box behind the text as well.

https://www.solafoodcoop.com/blog

See attached image that I'm trying to recreate. Appreciate any help for those items. I've tried to add some custom CSS from other threads but nothing is working.

Add to Home > design > Custom CSS

/* A Tasty blog font */
div#block-943bb600925bcab1664b h3 {
    font-size: 5rem;
    font-family: 'Lato', sans-serif;
}