La police importée ne fonctionne pas

J'ai essayé pendant des heures d'utiliser la police personnalisée Titillium Web, mais je n'ai pas réussi. Voici ce que j'ai essayé:La police importée ne fonctionne pas

ajoutant la ligne suivante dans la head partie du modèle global

`<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,600i,700" rel="stylesheet">`

Ajouter ce qui suit dans 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; }

Utilisation de la police sur une élément html

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

Aucun travaillé. Une idée?

Merci

Source

2017-09-13 Wyvh

Vous devez donner un élément HTML 'un font' dans votre CSS. En ce moment, tout ce que vous avez fait est de déclarer un 'font-face' – ifconfig

Hey. J'ai essayé d'appliquer "font-family: 'Titillium Web'" sur plusieurs éléments html, mais j'avais une ancienne police aléatoire qui remplaçait la police personnalisée, comme si elle ne fonctionnait pas ou n'existait pas. – Wyvh

Vous ne l'avez pas montré dans le code que vous avez posté. Pouvez-vous poster ce code? – ifconfig

@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; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<title>Title of the document</title> 
 
</head> 
 

 
<body> 
 
<p id="f">Sample</p> 
 
<p id="s">Another Sample</p> 
 
<p id="t">Last Sample</p> 
 
</body> 
 

 
</html>

Source

2017-09-13 01:21:33

Votre code fonctionnait sur Chrome jusqu'au redémarrage de Firefox. Maintenant tout est purrfect. Merci ! – Wyvh

La police importée ne fonctionne pas

Répondre

Questions connexes