I'm using a custom font I found on Google Fonts for the heading tags in a site I'm working on. It works fine in Chrome for Windows using any of the methods described in the Getting Started guide. However, the font wouldn't render in Chrome for Android, in fact it doesn't even fall back to my secondary choice which is 'Impact' and is considered 'web safe.' So I downloaded it locally, converted it to every relevant format, and using this guide on @font-face produced the following CSS which did not solve the problem:
@font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
local('assets/fonts/Oswald-Regular.woff2') format('woff2'),
local('assets/fonts/Oswald-Regular.woff') format('woff'),
local('assets/fonts/Oswald-Regular.ttf') format('truetype'),
local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
src: url('https://fonts.googleapis.com/css?family=Oswald') format('truetype');
}
Then I found a solution using media queries and produced the following CSS, which also did not work:
@media only screen and (max-width: 320px) {
@font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
@media only screen and (max-device-width: 720px) and (orientation:portrait) {
@font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
@font-face {
font-family: 'Oswald';
src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
}
}
In both solutions I'm using the following simple CSS to use the font:
h1, h2, h3, h4, h5, h6 {
font-family: "Oswald", "Impact", "Charcoal", sans-serif;
}
This is becoming quite the thorn in my side and it's holding me up because I can't present it to the customer until the prototype works on mobile. Any help would be enormously appreciated. Thanks!
