font face - google - La fuente personalizada no se carga en el marco iónico

google fonts

Question

Quiero aplicar la fuente Open Sans en mi Proyecto Iónico. He usado este código dentro de mi carpeta SCSS donde se encuentra mi archivo scss personalizado (settings.sccs y otros archivos scss) ( demoProject / scss_setting.scss )

@font-face {
  font-family: ''Open Sans'';
  src: url(''../www/fonts/opensans-regular-webfont.eot'');
  src: url(''../www/fonts/opensans-regular-webfont.eot?#iefix'') format(''embedded-opentype''),
  url(''../www/fonts/opensans-regular-webfont.woff'') format(''woff''),
  url(''../www/fonts/opensans-regular-webfont.ttf'') format(''truetype''),
  url(''../www/fonts/opensans-regular-webfont.svg'') format(''svg'');
  font-weight: 200;
}
body{
 font-family: ''Open Sans'';
}

las fuentes se encuentran aquí ( demoProject / www / fonts )

y tratar de aplicar en todo el cuerpo, pero la consola del navegador está mostrando

 GET http://localhost:8100/www/fonts/opensans-regular-webfont.woff 
:8100/www/fonts/opensans-regular-webfont.ttf:1
GET http://localhost:8100/www/fonts/opensans-regular-webfont.ttf 

Answer 1

Creo que vas demasiado atrás en la cadena de directorios.

Creo que quieres algo más como esto:

@font-face {
    font-family: ''Open Sans'';
    src: url(''../fonts/opensans-regular-webfont.eot'');
    src: url(''../fonts/opensans-regular-webfont.eot?#iefix'') format(''embedded-opentype''),
    url(''../fonts/opensans-regular-webfont.woff'') format(''woff''),
    url(''../fonts/opensans-regular-webfont.ttf'') format(''truetype''),
    url(''../fonts/opensans-regular-webfont.svg'') format(''svg'');
    font-weight: 200;
}
body{
    font-family: ''Open Sans'';
}

Aquí hay un tutorial para agregar Font Awesome en su proyecto, que es una fuente personalizada:

http://blog.nraboy.com/2014/10/use-font-awesome-glyph-icons-ionicframework/

Avísame si eso te ayuda.

Saludos,

Answer 2

Sus fuentes deben ubicarse en demoproject / www / lib / ionic / fonts

y luego referido desde el css (en su ubicación predeterminada www / css / stylesheet.css así:

@font-face {
  font-family: ''Open Sans'';
  src: url(''../lib/ionic/fonts/opensans-regular-webfont.eot'');
  src: url(''../lib/ionic/fonts/opensans-regular-webfont.eot?#iefix'') format(''embedded-opentype''),
  url(''../lib/ionic/fonts/opensans-regular-webfont.woff'') format(''woff''),
  url(''../lib/ionic/fonts/opensans-regular-webfont.ttf'') format(''truetype''),
  url(''../lib/ionic/fonts/opensans-regular-webfont.svg'') format(''svg'');
  font-weight: 200;
}
body{
 font-family: ''Open Sans'';
}