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

fuentes html para 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

Debes declarar @font-face como este en tu 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, si quieres aplicar esta fuente a un párrafo, simplemente úsalo así ...

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

Más referencia

Answer 2

Después de la generación de los 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 4 * archivos .woff (para tipos de letra mencionados), colocados en el subdirectorio de fonts .

En 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 tener esas definiciones, puedes escribir, por ejemplo,

En 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 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 here . No todos los archivos woff funcionan correctamente en las últimas versiones de Firefox, y este generador produce fuentes "correctas".