Fuentes personalizadas en Android PhoneGap

Intenté crear fonts personalizadas para mi aplicación. Para eso, escribí este código en mi archivo html:

 @font-face { font-family: centurySchoolbook; src: url(/fonts/arial.ttf); } body { font-family: centurySchoolbook; font-size:30px; }  

En mi cuerpo Html:

  Custom Fonts 
This is for sample

Pero estos estilos no se aplican a mi cuerpo html. ¿Alguna ayuda para resolver esto?

    Lo hice funcionar después de hacer los siguientes pasos:

    -Ponga su CSS en un archivo, por ejemplo my_css.css :

     @font-face { font-family: "customfont"; src: url("./fonts/arial.ttf") format("opentype"); /* Make sure you defined the correct path, which is related to the location of your file `my_css.css` */ } body { font-family: "customfont"; font-size:30px; } 

    -Referencia de su archivo CSS my_css.css en su HTML:


    ¡Presta atención a la definición de tus caminos!

    Por ejemplo, supongamos que tiene la siguiente estructura de directorio:

    • www

      • your_html.html

      • css

        • my_css.css
      • fonts

        • arial.ttf

    Entonces, tendrías:

     @font-face { font-family: "customfont"; src: url("../fonts/arial.ttf") format("opentype"); /* Make sure you defined the correct path, which is related to the location of your file `my_css.css` */ } body { font-family: "customfont"; font-size:30px; } 

    y:


    Nota: si usa jQuery Mobile, la solución puede no funcionar (jQuery Mobile “interferirá” con el css …).

    Por lo tanto, puede intentar imponer su estilo utilizando el atributo de estilo.

    P.ej:

      Custom Fonts 
    This is for sample

    Una desventaja es que parece que el style no se puede aplicar en el body

    Por lo tanto, si desea aplicar la fuente a toda la página, puede intentar algo como esto:

       
    Custom Fonts
    This is for sample

    Espero que esto funcione para ti también. Déjame saber acerca de tus resultados.

    A continuación funciona como charm para fuente personalizada con jQueryMobile y Phonegap:

     @font-face { font-family: "Lato-Reg"; src: url("../resources/Fonts/Lato-Reg.ttf") format("opentype"); /* Make sure you defined the correct path, which is related to the location of your file `my_css.css` */ } body *{ margin: 0; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ font-family: "Lato-Lig" !important; font-weight: normal !important; } 

    También me enfrenté al mismo problema. Puse mi archivo css en la carpeta css . Puse el archivo ttf en la carpeta www y no funcionó correctamente, así que moví mi archivo ttf a la carpeta css . Aquí está mi código:

     @font-face { font-family: CustomArial; src: url('arial.ttf'); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { font-family: CustomArial; } 

    Si está utilizando jquery mobile, debe sobrescribir la fuente como:

     .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button { font-family: CustomArial !important; } 

    Tienes que anular la familia de fonts en tu CSS para cualquier clase móvil de jquery que tenga una familia de fonts: Helvetica, Arial, sans-serif; a

     font-family:CustomArial !important; 

    Ahora funcionará. Puede intentarlo así, puede ser útil para usted.

    aquí puede encontrar las fonts .ttf the google: https://github.com/w0ng/googlefontdirectory

    esta captura de pantalla debería ayudar

    en su archivo .css

     @font-face { font-family: 'Open Sans'; src: url('../font/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; } 
      

    con comillas en la familia de fonts y en la url funcionó para mí, dentro del archivo html y en Android.

    Funciona en dispositivos físicos, pero no en emuladores.

    Los posibles problemas se encuentran en default.css en cordova. Compruebe si el elemento del cuerpo tiene un estilo definido para ” texto-transformar: mayúscula “.

    Al menos ese fue el problema para mí, después de eliminar este elemento del cuerpo en index.css predeterminado si está utilizando en su aplicación, puede ayudarlo también.

    Para mí estaba usando gurmukhi / punjabi fonts, y después de la eliminación de la línea de index.css, solo funcionaba como charm con las definiciones de css below only

    Ejemplo:

     .demo { font-family: anmol } @font-face { font-family: anmol; src: url(../fonts/anmol.ttf); } 

    Estaba enfrentando un problema similar. El problema estaba en la ruta que tomaba cuando la fuente se entregaba a través de un archivo css externo. Para resolver esto, declare la URL de fuente en línea en el cuerpo de index.html

     

    Funcionó después de declarar la URL de la fuente de esta manera.

    Acabo de copiar mis ttf-fonts en el directorio [app-name] / css y he declarado las familias de fonts en el index.css. Ver imagen adjunta: mi index.css editado (Verifique las áreas marcadas en verde en la imagen adjunta). También cambié el estilo “background-attachment: fixed”; “Helvetica, Arial, no-serif …” a “Open Sans, Open Sans Condensed, no-serif”, – también eliminé la línea “text-transform: mayúscula”. Después de eso todo funcionó bien con mi fuente “Open Sans”. Por supuesto, también incluí mi propia hoja de estilo con declaraciones de los otros estilos y familias de fonts de mi proyecto.

    También estoy usando jQuery y jQueryMobile en ese proyecto. Usan la misma fuente (Open Sans), ¡pero agregué fonts adicionales que también funcionan!

    Feliz encoding!