Declara un @font-face mediante un map de atributos. Requiere name y path, y permite configurar weight, style, display y exts. También admite los aliases n, p, w, s, d y e para esas mismas claves.
Por defecto usa extensiones woff2, woff y ttf. También admite eot, otf y svg en la lista exts; cuando usas eot o svg, el mixin ajusta el valor de src con el formato requerido para cada caso.
@mixin font-face($attr: (
name: null,
path: null,
weight: normal,
style: normal,
display: swap,
exts: (woff2, woff, ttf)
);
| Clave | Tipo | Default | Descripción |
|---|---|---|---|
| name | n | String | null | Nombre de la familia tipográfica para font-family. |
| path | p | String | null | Ruta base del archivo sin extensión. |
| weight | w | String | Number | normal | Define font-weight dentro de @font-face. |
| style | s | String | normal | Define font-style dentro de @font-face. |
| display | d | String | swap | Define font-display dentro de @font-face. |
| exts | e | List | (woff2, woff, ttf) | Lista de extensiones a generar en src. Soporta eot, woff2, woff, ttf, otf y svg. |
Fira Sans normal
Fira Sans bold
<p class="font_face_example_normal">Fira Sans normal</p>
<p class="font_face_example_bold">Fira Sans bold</p>