I'm diving into the world of CSS compilers with Stylus for the first time, and I'm facing an issue with loading Google Web Font URLs correctly.
Below is the code snippet causing trouble:
@font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}
This results in:
@font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW...");
}
I've attempted to troubleshoot by progressively loading each character. I managed to successfully compile part of the URL using this simpler version:
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);
Which compiled as:
src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");
However, as soon as I add the final 'o' to 'Roboto', it reverts back to the unintelligible "data:application/octet-stream;base64,QGZv..." output.
I tested other URLs with similar outcomes. I even attempted escaping the "=" sign which worked, but I still couldn't get it to compile beyond 'Robot'.
Currently, I'm manually inputting the correct URLs in the CSS file. It's a temporary workaround, but I'm eager to solve this issue and understand where I'm going wrong.