How to find text in images with the browser control+F

Why not try out the Google Font Directory

The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

To accomplish this I have used the typeface.js Javascript library

You can generate custom fonts for this library using this generator

These sites also have examples and usage instructions.

Generally the best approach to image replacement is to do so exclusively within the stylesheet.

The HTML should still look like:

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

Your CSS can then do:

h2#fantastic-section-of-awesomeness {
    background: ...; /* The replacement image */
}
h2 span {
    text-indent: -100000px;
}

Note that the text is not actually hidden. Some screen readers interpret display: none; incorrectly (even when given in a media="screen" stylesheet). Instead, we simply shift it far off the left side of the screen where it can't realistically be seen.

I have not specifically tested this for Ctrl+F, but the fact that the text is still technically visible should allow the browser to find it.

It will not be able to highlight the image as a match, however, which may still lead to confusion. There's no real way around that without using an @font-face.