CSS @ font-face无法正常工作（第二期）

Question

When I use my computer with Firefox or IE, the font doesn't work, only when using Chrome. Also, when I use my cellphone even with chrome, the font doesn't work.

Please consider my code below, with a huge help from Gerardo BLANCO.

 @font-face { font-family: Signika; src: url('cllean-directory/fonts/Signika-Regular.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Regular.woff') format('woff'), url('cllean-directory/fonts/Signika-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: Signika; src: url('cllean-directory/fonts/Signika-Bold.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Bold.woff') format('woff'), url('cllean-directory/fonts/Signika-Bold.woff2') format('woff2'); font-weight: bolder; font-style: normal; } @font-face { font-family: Signika; src: url('cllean-directory/fonts/Signika-Light.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Light.woff') format('woff'), url('cllean-directory/fonts/Signika-Light.woff2') format('woff2'); font-weight: lighter; font-style: normal; } @font-face { font-family: Signika; src: url('cllean-directory/fonts/Signika-Semibold.ttf') format('truetype'), url('cllean-directory/fonts/Signika-Semibold.woff') format('woff'), url('cllean-directory/fonts/Signika-Semibold.woff2') format('woff2'); font-weight: bold; font-style: normal; } font-family: SignikaS; } 

Answer 1

Few mistakes on your part. 1) It is better to name all of you font families as one. 2) You need to declare its respective weight and style. 3) Personal one -> Always put the family first

Hope this helps

 @font-face { font-family: Signika; src: url('fonts/Signika-Regular.ttf') format('truetype'), url('fonts/Signika-Regular.woff') format('woff'), url('fonts/Signika-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: Signika; src: url('fonts/Signika-Bold.ttf') format('truetype'), url('fonts/Signika-Bold.woff') format('woff'), url('fonts/Signika-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; } p { font-family: Signika; } 

 <p>Hi</p> <p style="font-weight:bold">Hi</p> 

Answer 2

Use semi-colons ex:-

@font-face {
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/signika-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Signika Regular'), local('Signika-Regular'),
       url('../fonts/signika-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/signika-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/signika-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/signika-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/signika-v8-latin-regular.svg#Signika') format('svg'); /* Legacy iOS */
}