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

100

¿Dónde coloca 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 'fuente impresionante' está almacenada en un archivo 'fuente impresionante.woff'.

Don P
fuente

Respuestas:

168

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

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, puede 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 la generación de archivos woff, que se pueden incluir en hojas de estilo CSS, se encuentra aquí . No todos los archivos woff funcionan correctamente en las últimas versiones de Firefox y este generador produce fuentes "correctas".

bhovhannes
fuente
¿Puede explicar cómo funcionan los iconos de materiales? stackoverflow.com/questions/45323577/…
Sunil Garg
16

Debes declarar @font-faceasí 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 desea aplicar esta fuente a un párrafo, simplemente úsela así ...

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

Más referencia

Sr. Alien
fuente
1
para la etiqueta src, ¿cómo se usa rel = "preload" para el archivo woff en este caso?
Mike