1

En mi proyecto tuve que tengo que usar la tipografía "Cooper Black", ya que esta no existe en google fonts tuve que descargarla manualmente y subirla a la carpeta de mi sitio web.

Cuando visualizo mi sitio web en un laptop o computador de escritorio mi sitio web sí reconocer la tipografía "Cooper Black" en todas la páginas, pero cuando la veo desde cualquier teléfono o tableta, en ves de reconocer Cooper Black me muestra la Roboto Slab.

Revise el CSS y el HTML y agregue correctamente la fuente, aun no comprendo porque no funciona.

Agradecería una respuesta.

Mi css es el siguiente:

*{
    font-family: 'Noto Sans JP', sans-serif;
    transition: .2s ease-in-out;
}

@font-face {
    font-family: 'Cooper';
    src:'cooper-black.ttf';
}
h1{
    -webkit-text-stroke: 2px var(--color-primario);
    color: white;
    font-family:'Cooper', 'Roboto Slab', sans-serif;
    font-size: 65px !important;
    -webkit-text-stroke-width: medium;
    font-style: italic;
    margin-bottom: 100px;
    text-align: center;
    span.black-text{
        color: var(--color-primario);
        font-family: inherit;
        }
}
3

1 respuesta 1

1

La sintaxis de @font-face es:

@font-face{
    font-family:<nombre_de_la_fuente>;
    src: url(<ruta_url>) [format()][,url(<ruta_url>) [format()]]*;
    [font-weight:<weight>];
    [font-style:<estilo>];
    [font-stretch]:<stretch>];
    [unicode-range]:<range>];
}

en tú caso sería:

@font-face {
    font-family: 'Cooper';
    src:url('cooper-black.ttf') format("truetype");
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.