Использования Google Web Fonts Локально

Question

Моей темы имеет следующий код:

@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300italic,400italic"); 

Этот шрифт не поддерживает турецкие символы, так что я скачал один, который поддерживает турецкие символы. Однако тема имеет проблемы с отображением смелых и сильных шрифтов.

Я попробовал этот код, но он не работает:

@font-face { 
     font-family: '../fonts/SourceSansPro-Bold'; 
     src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
     src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
      url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
      url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
      url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 

    font-weight: bold; 
    font-style: normal; 
} 

Как я могу показать смелые и сильные теги с помощью мою тему?

Answer 1

Основе вашего последнего обновления, вот как вы могли бы сделать это:

@charset "utf-8"; 
@import url(font-awesome.min.css); 
@font-face { 
    font-family: 'SourceSansPro-Regular'; 
    src: url('../fonts/SourceSansPro-Regular.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Regular.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'SourceSansPro-Black'; 
    src: url('../fonts/SourceSansPro-Black.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Black.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Black.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Black.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

@font-face { 
    font-family: 'SourceSansPro-Bold'; 
    src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
     url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Тогда предположим, что вы хотели, чтобы H1S быть смелыми и P теги регулярными, то CSS будет выглядеть следующим образом:

h1 { font-family: 'SourceSansPro-Bold'; } 
p { font-family: 'SourceSansPro-Regular'; } 

Answer 2

Try:

@font-face { 
     font-family: 'Source Sans Pro'; 
     src: url('../fonts/SourceSansPro-Bold.eot'); /* IE9 Compat Modes */ 
     src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
      url('../fonts/SourceSansPro-Bold.woff') format('woff'), /* Modern Browsers */ 
      url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ 
      url('../fonts/SourceSansPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ 

    font-weight: bold; 
    font-style: normal; 
} 

Обратите внимание на название семейства шрифтов. Это имя должно совпадать с именем из Google Fonts.

Here's an article about it