Last Updated: September 09, 2019
·
1.356K
· marioy47

Stylus con Google Web Fonts

Aunque CSS es código (stylus)[http://learnboost.github.io/stylus/docs/] válido algunas (fuentes de Google)[https://www.google.com/fonts], específicamente la que tienen nombres compuestos como Droid Sans, no funcionan.

Google nos ayuda con la creación del código CSS que se debe ingresar en la hoja de estylo diciendonos que se debe agregar una línea del tipo

@import url(http://fonts.googleapis.com/css?family=Droid+Sans)

La razón por la que específicamente esta fuente no funciona es por que el + tiene un significado especial en Stylus (es una suma obviamente).

La solución no puede ser más sencilla, simplemente se deben escapar los signos de suma de la siguiente manera

@import url(http://fonts.googleapis.com/css?family=Droid\+Sans)

Si se quiere ser más exaustivo, se puede agregar el código completo para importa el tipo de letra así:

@font-face
  font-family 'Droid Sans'
  font-style normal
  font-weight 400
  src local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v4/s-BiyweUPV0v-yRb-cjciL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff')