¿Cómo uso las fuentes .woff para mi sitio web?

Question

¿Dónde colocas las fuentes para que CSS pueda acceder a ellas?

Estoy usando fuentes no estándar para el navegador en un archivo .woff. Digamos que su 'impresionante fuente' almacenada en un archivo 'awesome-font.woff'.

Answer 1

Después de la generación de archivos woff, debe definir font-family, que se puede usar más adelante en todos sus estilos CSS. A continuación se muestra el código para definir tipos de letra de familias de fuentes (para normal, negrita, negrita-cursiva, cursiva). Se supone que hay archivos 4 * .woff (para los tipos de letra mencionados), ubicados en el subdirectorio fonts.

En el código CSS:

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font.woff") format('woff'); 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-bold.woff") format('woff'); 
    font-weight: bold; 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-boldoblique.woff") format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

@font-face { 
    font-family: "myfont"; 
    src: url("fonts/awesome-font-oblique.woff") format('woff'); 
    font-style: italic; 
} 

Después de que las definiciones, sólo pueden escribir, por ejemplo,

En el código HTML:

<div class="mydiv"> 
    <b>this will be written with awesome-font-bold.woff</b> 
    <br/> 
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b> 
    <br/> 
    <i>this will be written with awesome-font-oblique.woff</i> 
    <br/> 
    this will be written with awesome-font.woff 
</div> 

En el código CSS:

.mydiv { 
    font-family: myfont 
} 

La buena herramienta para generar archivos woff, que se puede incluir en las hojas de estilo CSS, se encuentra en here. No todos los archivos woff funcionan correctamente en las últimas versiones de Firefox, y este generador produce fuentes "correctas".

Answer 2

tiene que declarar @font-face como esto en su hoja de estilo

@font-face { 
    font-family: 'Awesome-Font'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff'); 
} 

Ahora bien, si desea aplicar este tipo de letra a un párrafo simplemente utilizar de esta manera ..

p { 
font-family: 'Awesome-Font', Arial; 
} 

More Reference