I have the same issue here how i solve it.
I only use svg on mobile with media queries.
@media only screen and (max-width: 320px) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
@font-face {
font-family: 'open_sansbold';
src: url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
font-weight: normal;
font-style: normal;
}
}
Hope it's help you.