1

Quiero utilizar un tipo de letra en concreto en un sitio web. No quiero utilizar ningún tipo de complemento, y la tipografía que quiero, no la encuentro gratuita para añadir medie¡ante enlace por lo que he decidido con el método @font-face

1 - A el archivo styles.css le añado el siguiente código:

@font-face {
    font-family: university-roman;  
    src: url(https://mySitioWeb.com/wp-content/themes/flatsome-child/fonts/university-roman.otf);
    font-weight: normal;  
}

2 - He creado la carpeta fonts en la ruta siguiente de mis directorio:

wp-content/themes/mi-Tema/fonts/university-roman.otf

3 - He añadido el css correspondiente a el texto donde quiero añadir las nuevas fuentes:

.site-title-main { 
font-family: "university-roman", Arial, sans-serif; 
}

Pero el texto no muestra las fuentes de University.

¿ Que estoy haciendo mal ?

¿ Como puedo hacer que funciones los nuevos tipos de letras ? Espero haber descrito el problema que no puedo solucionar. Gracias

2
  • 1
    mira a ver si te sirve esto
    – chikebox
    el 9 jun. 2022 a las 13:31
  • Gracias por tu aporte @chikebox , pero si usted se fija, lo que muestra su enlace, es lo que yo hice. Gracias
    – Diana
    el 9 jun. 2022 a las 13:55

2 respuestas 2

3

Fíjate que cuando defines el atributo font-family dentro de @font-face ese es el valor que tienes que usar cuando mencionas el nombre de fuente en el CSS.

O sea, en tu ejemplo, quedaría así:

@font-face {
    font-family: university-roman;  
    src: url(https://mySitioWeb.com/wp-content/themes/flatsome-child/fonts/university-roman-otf);
    font-weight: normal;  
}

.site-title-main { 
    font-family: "university-roman", Arial, sans-serif; 
}
7
  • Gracias por el aporte @HernanColiqueo , efectivamente no la estaba llamando, pero después de corregir, sigue sin funcionar. Editare la pregunta para que no haya más confusiones
    – Diana
    el 9 jun. 2022 a las 14:07
  • 1
    Se me ocurre que el src no es correcto, ya que lo tienes en local... porque no apuntas a tu carpeta local?
    – chikebox
    el 9 jun. 2022 a las 14:12
  • 1
    si, podrías mostrar el código completo o usar rutas relativas? en el src fijate dice "university-roman-otf" el 9 jun. 2022 a las 14:32
  • 1
    tambien fijate que en el src está definido como parametro y no como string, te diría lo encomilles el 9 jun. 2022 a las 14:35
  • El código que muestro es el que utilizo @HernánColiqueo . No hice todo exactamente como lo muestro en la pregunta. Y todo el código esta como lo muestro, he probado a cambiar lo de las comillas, pero sigue sin funcionar
    – Diana
    el 9 jun. 2022 a las 17:58
1

Puedes probar a cargar las fuentes desde CDN,(Content Delivery Network - red de entrega de contenidos) esto puede funcionar.

Otra opción es subir tus fuentes a Firebase y llamarlas allí.

Fuente de inspiración

De cualquier modo, llamas a las fuentes con @font-face en tu archivo styles.css de la siguiente forma:

@font-face {
    font-family: 'University Roman Std';
    font-style: normal;
    font-weight: 400;
    src: local('University Roman Std'), url('https://fonts.cdnfonts.com/s/39875/UniversityRomanStdRegular.woff') format('woff');
}
@font-face {
    font-family: 'University Roman Std';
    font-style: italic;
    font-weight: 400;
    src: local('University Roman Std'), url('https://fonts.cdnfonts.com/s/39875/UniversityRomanStdItalic.woff') format('woff');
}
@font-face {
    font-family: 'University Roman Std';
    font-style: normal;
    font-weight: 700;
    src: local('University Roman Std'), url('https://fonts.cdnfonts.com/s/39875/UniversityRomanStdBold.woff') format('woff');
}

Y lo llamas desde el CSS personalizado:

.section-title-main {
        font-family: 'University Roman Std', sans-serif 
}

Espero esto sea de ayuda

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.