18 Sep Como agregar font-face o como crearlos y agregar nuestros estilos de letra en Rails sin usar google
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