Fonty zewnętrzne – pliki .otf

Open Type Format .otf

1. Wgrać pliki do katalogu ./webroot/fonts/Akrobat-Regular.otf …

2. Deklaracja fontów w pliku css np.  ./css/fonts.css

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-ExtraLight.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Akrobat';
    src: url('../fonts/Akrobat-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

Użycie np. w innych / lub tym samym pliku css

/* Regular */
p, td, th, div, li {
font-family: 'Akrobat';
font-weight: 400;
font-size: 10pt;
}

/* Black */
b, strong {
  font-family: 'Akrobat';
  font-weight: 900;
  font-size: 9pt;
}

/* Thin */
em, i, small {
  font-family: 'Akrobat';
  font-weight: 100;
  font-size: 9pt;
}