La regla @ font-face de CSS3

Ahora aprenderemos utilizar la regla @font-face, veremos qué es, para qué sirve y cómo funciona, básicamente se trata de la regla que nos da más opciones para establecer la fuente o tipo de letra que queremos utilizar en nuestra página web, ahora ya no estamos limitados a la cantidad de tipografías que pueda tener el usuario, ahora tenemos el control para implementar una fuente personalizada que queremos.

Qué es y para qué sirve @font-face CSS

@font-face es una regla de CSS que permite establecer una fuente tipográfica o también conocida como tipografía o tipo de letra para los elementos de texto que se desean. En palabras simples, @font-face es la regla que debemos usar si queremos emplear algún tipo de letra en especial, que no esté disponible en el dispositivo del usuario por defecto.

En la siguiente imagen se muestra solo unas cuantas fuentes de la gran cantidad de fuentes de Google fonts.

font-face de CSS3

Recuerda que el tipo de letra podíamos establecer mediante la propiedad font-family, sin embargo hay un número limitado de tipos de letra que podemos usar directamente; aparte de ellas existen otros tipos de fuente mucho más interesantes, más atractivas y especiales que seguramente te pueden interesar utilizarlas en algún proyecto. La regla @font-face viene a dar esta posibilidad de que podamos hacer uso de dichas fuentes tipográficas especiales.

Cómo poner fuentes personalizadas con CSS

Poner una fuente personalizada con CSS en muy fácil, para ello estableceremos una regla @font-face, mediante ciertas propiedades y valores que aprenderemos más adelante en esta entrada; dentro de dicha regla estableceremos el nombre de la tipografía, dicho nombre es un nombre personalizado, podemos elegir el que queremos, luego estableceremos la ubicación u origen de esa fuente tipográfica, ya sea que este se encuentre en una carpeta del proyecto o en algún lugar remoto al que se puede acceder mediante una dirección URL.

Te recomendamos ver:  Imágenes de fondo con CSS3 background-size

Además, podremos establecer algunas características como el peso del texto, algún estilo, etc. todo ello lo haremos declarando las propiedades respectivas dentro de la regla @font-face.

Por último, una vez creada la regla con las respectivas propiedades y valores, es momento de asociarla a cualquier elemento de texto que queremos. Asociar una regla @font-face ya creada, a un elemento de texto es muy simple, solo declaramos la propiedad font-family para el elemento de texto y en su valor colocamos el nombre de la regla @font-face creada.

Por ejemplo:

Creando una regla @font-family

@font-face {
  font-family: nombrepersonalizado;
  src:url();
  font-style: cursive;
  font-weight:700;
}
  
  
  

Ahora asociemos a un elemento de texto, a un párrafo.

p {
  font-size:30px;
  font-family:nombrepersonalizado; 
}

A grandes rasgos y de forma genérica hemos conocido la manera en la que funciona la regla @font-face y cómo este nos permite establecer una tipografía personalizada. A continuación destripemos cada propiedad y los valores que pueden tomar y al final practicaremos con varios ejemplos.

Propiedades necesarias

La regla @font-face requiere establecer dos propiedades importantes para funcionar, si una de ellas no se encuentra declarada, entonces no será posible su aplicación; dichas propiedades son: font-family y src, veamos de qué trata cada una de estas.

Font-family

La propiedad font-family nos permite ponerle un nombre al nuevo tipo de letra que estamos agregando, este nombre puede ser cualquier nombre de tu elección. El nombre se establece en el valor de la propiedad font-family

La propiedad font-family es bastante conocida, nos permite establecer un tipo de letra, pero en este caso servirá para colocar un nombre para la nueva fuente que estamos agregando o si prefieres entender como “creando”.

Src

La propiedad src nos permite establecer cuál es dicha fuente personalizada, dicha fuente puede estar contenida en un archivo o puede estar alojada en un servidor remoto, es decir fuera de la carpeta de documentos, en dicho caso utilizaremos la dirección URL donde se encuentra la tipografía que deseamos emplear.

Observa el siguiente ejemplo; se trata de establecer el origen de la fuente tipográfica, si el archivo se encuentra en loca, entonces el valor será: local("nombre de fuente"), en caso se encuentre en una dirección URL ya sea una parcial o una absoluta, será: url(), se pueden especificar varias separándolas con comas (,), para asegurar la disponibilidad e incluso en otros formatos, el navegador puede aplicar el primer disponible o compatible.

src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');

También debemos mencionar que existen formatos de tipografías, estas tendremos que especificarlas mediante la format(). Más adelante veremos ejemplos aplicando la teoría y todas las propiedades aprendidas.

Te recomendamos ver:  Degradados y fondos en CSS3

Propiedades opcionales

Además de las propiedades requeridas, podemos utilizar las opcionales, estas nos ayudarán a especificar mejor algunas características de la tipografía establecida con anterioridad mediante las propiedades requeridas. Conozcamos algunas de dichas propiedades opcionales.

font-stretch

La propiedad font-stretch nos permite especificar como se alarga el texto, es decir la distancia entre letras y el valor predeterminado es el normal, no altera el texto, sin embargo podemos entre los valores que podemos elegir mencionamos los siguientes:

  • Normal: normal
  • Condensado: condensed
  • ultra-condensado: ultra-condensed
  • extra-condensada: extra-condensed
  • semi-condensado: semi-condensed
  • expandido: expanded
  • semi-expandido: semi-expanded
  • extra-expandida: extra-expanded        
  • ultra-expandido: ultra-expanded

font-weight    

La propiedad font-weight es bastante conocida, pues nos permite definir el peso de la fuente, sus valores pueden ser normal, bold y números que van del 100 al 900. El valor por defecto es normal, este no afecta al texto.

Un valor de bold hace que el texto se vuelva en negrita y los valores numéricos son proporcionales. Un valor de 100 crea un texto delgado, a medida que va creciendo 900 es el texto más grueso. Valores intermedio crear efectos proporcionales.

Font-style

La propiedad font-style es otra bastante conocida, nos permite definir un estilo, el valor por defecto que toma es el normal, podemos elegir entre itálico y oblicuo, estos harán que el texto adquiera una ligera y sutil inclinación.

  • Normal: normal
  • itálico: italic
  • oblicuo: oblique

unicode-range           

Esta es una propiedad opcional que sirve para establecer el rango específico de caracteres que puede ser usada por la fuente establecida, definir esta propiedad hará que ciertos caracteres estén disponibles cuando sea necesario en la página. Si dentro del contenido existe algún carácter dentro del rango establecido, entonces la fuente se descarga, en caso contrario, es decir si en el contenido no se emplea algún carácter del rango establecido, entonces la fuente no se descarga innecesariamente. 

Te recomendamos ver:  Transiciones en CSS3

Los valores que puede tomar  es una U seguido del signo + y seguido de valores hexadecimales Su valor por defecto es “U + FFFF 0-10

Ejemplos de fuentes personalizadas con CSS

  
  <p class="sinfuente">Párrafo con tipo de letra por defecto y de 27px.</p> 
  <p class="confuente">Párrafo de fuente personalizada por @font-face de 27px.</p>

  <style>
  @font-face {
    font-family: 'Goldman';
    src: url(https://fonts.gstatic.com/s/goldman/v1/pe0uMIWbN4JFplR2HDVyBw.woff2) format('woff2');
    font-style: normal;
    font-weight: 400;
    }
    
    .sinfuente {font-size:27px;}
    .confuente {
      font-family:Goldman;
      font-size:27px;
    }
  </style>

Otro ejemplo

 <p class="sinfuente">Párrafo con tipo de letra por defecto y de 27px.</p> 
  <p class="confuente">Párrafo de fuente personalizada por @font-face de 50px.</p>

  <style>
    @font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: local('Tangerine Regular'), local('Tangerine-Regular'), url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  
    .sinfuente {font-size:27px;}
    .confuente {
      font-family:Tangerine;
      font-size:50px;
    }
  </style>

@font-face google fonts

En los ejemplos anteriores hemos utilizado las fuentes de Google fonts, puedes acceder a su sitio web y descargar las fuentes que deseas aplicar en tu proyecto.

Curso css3 - temas
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos