Omaan Finna-näkymään on mahdollista lisätä ns. verkkofontti (Web fonts). Verkkofontin käyttö omassa Finna-näkymässä on organisaation omalla vastulla: joidenkin fonttien käyttö saattaa rikkoa näkymää, ja fontin käyttöoikeus on aina varmistettava ennen käyttöä.

Mikäli näkymässä päädytään käyttämään verkkofonttia, suosittelememme latamaan fontit palvelimelle  WOFF(2)-muodossa. WOFF-muodolla on tällä hetkellä laajin tuki eri selaimissa.

Verkkofontin käyttöönotto

  • Lataa WOFF-fonttitiedostot themes/custom/files/fonts -hakemistoon. Hakemisto fonts pitää luoda ennen fonttien latausta.

  • Lisää custom.less -tiedostoon seuraava koodin pätkä ja muuta koodia vastaamaan palvelimelle lisättyä fonttia (esimerkissä on käytetty Open Sans -fonttia)

    /* Open Sans */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../files/fonts/OpenSans-LightItalic-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../files/fonts/OpenSans-Light-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../files/fonts/OpenSans-SemiBoldItalic-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../files/fonts/OpenSans-SemiBold-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../files/fonts/OpenSans-BoldItalic-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../files/fonts/OpenSans-Bold-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../files/OpenSans-Italic-webfont.woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../files/fonts/OpenSans-Regular-webfont.woff');
}

@font-family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
  • No labels