Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Añade cualquier tipografía en tu web, con @font-face


@font-face, Añadir fuentes en tu web


Hoy me apetecía agregar está pequeña aportación para añadir fuentes o tipografías con la propiedad CSS3, que se denomina @font-face. Cómo mucha gente sabrá, existen 16 tipografías estándar para el uso de estilos con CSS, que se visualizan sin mayor problemática en los principales navegadores y sistemas operativos, Windows, Mac, Linux, etcétera. Qué podemos implantar sin mayor dificultad. Esas tipografías estándar que menciono, se pueden observar en la siguiente imagen, para que os hagáis una idea. Hay más tipografías, esto es sólo un resumen de las tipografías más comunes y usadas por los webmasters, y con soporte para los principales navegadores o browsers más modernos y no tanto.






Para agregar cualquier tipografía común en tu blog o web, como hemos visualizado antes, en la anterior imagen, sería de la siguiente forma, que verás en el siguiente ejemplo:


.nombre-clase {
color: #333333; /* Color de la fuente */
font-family: Tahoma, Geneva, sans-serif; /* Nombre de tu fuente común y la familia de la fuente */
}



Descripción @font-face para añadir fuentes más ortodoxas en tu web



@font-face es una regla o propiedad CSS3 para implantar tipografías o fuentes poco comunes, añadiendo la fuente seleccionada a usar, en un servidor, y en el archivo CSS se ejecuta de está manera, cómo se puede observar seguidamente o a continuación:


@font-face {
font-family: nombre de la fuente;
src: url(url de la fuente);
}

Ejemplo:

@font-face {
font-family: Pricedown;
src: url(Pricedown.ttf);
}


Y para usar la fuente es necesario poner su nombre, sin comillas


p {
font-family: Pricedown, serif;
}


@font-face, fuente Pricedown y formatos visibles en todos los navegadores:


@font-face {
 font-family: 'Pricedown';
 src: url('https://dl.dropboxusercontent.com/u/48457927/font.eot') format('eot'), 
      url('https://dl.dropboxusercontent.com/u/48457927/Pricedown.woff') format('woff'), 
      url('https://dl.dropboxusercontent.com/u/48457927/pricedow.ttf')  format('truetype'),
      url('https://dl.dropboxusercontent.com/u/48457927/Pricedown.svg') format('svg');
}

#prueba {
font-family: Pricedown;
font-weight: bold;
font-size: 140px;
line-height: 1.7em;
margin-bottom: 7px;
color: #eee;
text-shadow: 10px 10px 10px #000;
text-transform: uppercase;
text-align: center;
}


Ahora verás su implantación mediante el HTML, como el ejemplo de abajo:

<div id="prueba">Aizum Blog</div>


Ver un ejemplo de tipografía Pricedown, usando @font-face

Aizum Blog

Diversidad de formatos de tipografía para una web o blog


/* Tipología de formatos de fuentes */

woff - Web Open Font Format (.woff) /* Firefox 4-14, IE9, IE10, Chrome 20 */
truetype (.ttf) /* Navegadores Modernos */
opentype (.otf, ttf) /* Navegadores Modernos */
embedded-opentype (.eot) /* IE en general */
svg (.svg, .svgz) /* iPhones and iPad, Safari, IE 10, Chrome 20, Firefox 4-14 */


Formatos de fuentes que soportan los navegadores según webfonts.info




Páginas web dónde podéis conseguir fuentes para su descarga poco comunes


FontSquirrel

Losttype

MoveableType

FontFabric

Impallari

Fonts2u

Dafont

Fontspace

Urbanfonts

SearchFreeFonts


Algunos generadores para generar el @font-face en varios formatos


FontSquirrelGenerator

@Font-faceGeneratorKit

Font2Web

FontFaceGenerator

ConvertFonts

Everythingsfonts

WebFontGenerator


Bueno eso es todo amigos, espero que os haya aportado algo de luz sobre este tema de la implantación de fuentes poco usuales y originales, con la regla @font-face, para aquellas personas que no sabían insertar está fantástica propiedad que nos ofrece el CSS3 y sus tipografías, espero que os sirva de guía para implantarlo en vuestro site. Enjoy this!



Aizum Blog, lunes, junio 02, 2014


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9