making site responsive with @fontface (px rem) – resizing problems

I’m using the twenty-twelve theme to rebuild my site to be more responsive and I have a twofold problem, mostly with IE. I hate it personally but 1/3 of my traffic uses it and I don’t think it’s nice to tell brides (I’m an event planner) to pick anther browser since their’s blows. Doing my website is something I (usually) enjoy but I am no professional.

The problems:

1) Internet explorer will – a) load my header text using @fontface and place a black box around the header image (which shouldn’t be there) or will b)
not load @ff and not place black box around image. ???

@font-face {
    font-family: Alex;
    src: url('fonts/AlexBrush-Regular-OTF-webfont.eot');
    src: url('fonts/AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/AlexBrush-Regular-OTF-webfont.woff') format('woff'),
         url('fonts/AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
         url('fonts/AlexBrush-Regular-OTF-webfont.svg#Alex') format('svg');
    font-weight: normal;
    font-style: normal;
	}

No black boxes in code.

And 2) Since this site is to be responsive I would like the font to resize appropriately. Any suggestions for having the header font resize for iPhone? I’m using 32px, 2.27 rem.

Thanks in advance.