this question overlaps html and css I guess. I am working on a site with small round graphics which have 2 or 3 words of text in them. The original supplied graphics included the text. Then it was decided for SEO reasons maybe the graphic should be separated and the text should be regular text.

I have worked out a way to have the text be regular text and it works fine. BUT the designers are using lots of fonts and now I am thinking adding this many google fonts is going to slow down the site for what is a really a design element not major content. Adding a font for what may be 2 or 3 words seems a bad idea.

So I was thinking if the designers add the text into the graphic and I put the text in a plain web font on the page as well but set its z-index so it is not seen below the graphic that might solve the problem. Nice font in graphic, real text for SEO.
I can not find any information on the SEO situation. Will the text which would not be visible still get picked up by search engines?
Does my solution seem reasonable or does anyone have a better idea?