En mi caso yo tengo la fuente CWBTRIAL.ttf, entonces quiero utilizarla en algunos titulos de mi Website, para lo cual voy primero que nada a generar mis font-face desde la pagina de fontsquirrel http://www.fontsquirrel.com/fontface/generator para lo cual voy a subir mi archivo .ttf y en el sistema me van a genera un archivo zip con los archivos que necesito para usarla en mis estilos css, despues de subir el archivo .ttf le damos en descargar Kit y en nuestro archivo zip vamos a encontrar 4 archivos que nos interesan en mi caso son lo siguiente:
En mi caso se descarga el archivo webfontkit-20120918-110312.zip lo extraje y los archivos que me interesan son los siguientes:
- cwbtrial-webfont.eot
- cwbtrial-webfont.svg
- cwbtrial-webfont.ttf
- cwbtrial-webfont.woff
Los cuales vamos a colocar en la siguiente ubicacion, en caso de que no exista creamos la carpeta en nuestra aplicacion de rails 3
app/assets/fonts/
Despues de eso vamos a utilizarla en nuestros estilo en mi caso que quiero aplicarselo a los titulos este es mi archivo de css “dashboard.css.scss”
@font-face {
font-family: 'CrossWordBelle';
src: url('/assets/cwbtrial-webfont.eot');
src:
url('/assets/cwbtrial-webfont.eot?#iefix') format('embedded-opentype'),
url('/assets/cwbtrial-webfont.woff') format('woff'),
url('/assets/cwbtrial-webfont.ttf') format('truetype'),
url('/assets/cwbtrial-webfont.svg#crosswordbelle_trialregular') format('svg');
font-weight: normal;
font-style: normal;
}
Ahora vamos a aplicarlo a nuestros titulos h2
h2 {
font-family: 'CrossWordBelle';
color: black;
font-weight: normal;
}
No Comments