CODEWITHSUNDEEP
css
nikel
nikel

Reputation: 653

Using Google Web Fonts Locally

My theme has following code:

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

This font doesn't support Turkish characters so I downloaded one that supports Turkish characters. However the theme has problems about showing bold and strong fonts.

I tried this code but it didn't work:

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

How can I show bold and strong tags using my theme?

Upvotes: 0

Views: 3988

Answers (2)

APAD1
APAD1

Reputation: 13666

Based off your latest update, here is how you would do it:

@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 */
}

Then let's say you wanted the H1s to be bold and the P tags to be regular, the CSS would look like this:

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

Upvotes: 2

coopersita
coopersita

Reputation: 5041

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

Notice the name of the font-family. That name should match the name from Google Fonts.

Here's an article about it

Upvotes: 1

Related Questions