Imported font doesn't work

Question

I've been trying for hours to use the Titillium Web custom font but haven't succeeded. Here's what I tried:

Adding the following line in the head part of the overall template
```
``
```

Adding the following in CSS

@font-face {
    font-family: 'Titillium Web Bold';
    src: url('data/fonts/TWeb/titilliumweb-bold-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-bold-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-bold-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-bold-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'Titillium Web BoldItalic';
    src: url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-bolditalic-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-bolditalic-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'Titillium Web Italic';
    src: url('data/fonts/TWeb/titilliumweb-italic-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-italic-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-italic-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-italic-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'Titillium Web Light';
    src: url('data/fonts/TWeb/titilliumweb-light-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-light-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-light-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-light-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'Titillium Web';
    src: url('data/fonts/TWeb/titilliumweb-regular-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-regular-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-regular-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-regular-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }
@font-face {
    font-family: 'Titillium Web Semibold';
    src: url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff2') format('woff2'),
         url('data/fonts/TWeb/titilliumweb-semibold-webfont.woff') format('woff');
         url("data/fonts/TWeb/titilliumweb-semibold-webfont.ttf") format("truetype"),
     url("data/fonts/TWeb/titilliumweb-semibold-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal; }

Using the font on an html element

a.random {font-family: 'Titillium Web';} or a.random {font-family: 'Titillium Web', sans-serif;}

None worked. Any idea ?

Thanks

Shadow Fiend · Accepted Answer

 @import url('https://fonts.googleapis.com/css family=Titillium+Web:300,400,400i,600,600i,700');
#f{
  font-family: 'Titillium Web', sans-serif;
}
 #s{
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
}
 #t{
  font-family: 'Titillium Web', sans-serif;
  font-style:italic;
  font-weight: 700;
}





Title of the document



Sample
Another Sample
Last Sample

Imported font doesn't work

Answers (1)

Related Questions

Imported font doesn&#39;t work

Answers (1)

Related Questions

Imported font doesn't work