Prioritise SVG font with Google Web Fonts Prioritise SVG font with Google Web Fonts google-chrome google-chrome

Prioritise SVG font with Google Web Fonts


You'll need to host the files as using the @import or <link> methods reference a CSS file that only calls the WOFF file (because of browser detection). Ex. http://fonts.googleapis.com/css?family=Open+Sans:

@font-face {  font-family: 'Open Sans';  font-style: normal;  font-weight: 400;  src: local('Open Sans'), local('OpenSans'), url('http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');}

Once you host the file locally, you can then move the SVG call up in the stack to prioritize it. You can see an example here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

@font-face {  font-family: 'MyWebFont';  src: url('webfont.eot');   src: url('webfont.eot?#iefix') format('embedded-opentype'),  url('webfont.svg#svgFontName') format('svg'),  url('webfont.woff') format('woff'),  url('webfont.ttf')  format('truetype');}