Why do my webfonts only work with Chrome?

Navigation
8

I'm creating a website through a child theme of Shoestrap, based on Bootstrap. When I use webfonts they just work in Chrome.

What am I doing wrong?

My CSS is this 

@font-face {
   font-family: 'open_sansitalic';
   src: url('assets/fonts/OpenSans-Italic-webfont.eot');
   src: url('assets/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
        url('assets/fonts/OpenSans-Italic-webfont.woff') format('woff'),
        url('assets/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
        url('assets/fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
   font-weight: normal;
   font-style: normal;
}

h1 { font-family: 'open_sansitalic' sans-serif;  font-size: 40pt; line-height: 50pt; color: #f68934; }
    
asked by anonymous 06.03.2014 / 19:52

4 answers

4

Try using Google fonts, the Open Sans is available in it .

Choose the styles you want and then just add them in your HTML: 

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

And to use in CSS: 

font-family: 'Open Sans', sans-serif;

This avoids requests on your server as well.

About performance on the front-end, one read: link

I hope I have helped!

    
06.03.2014 / 22:43
5

Make sure the other source files can be accessed directly by the browser, your server may be experiencing problems with mime-type declaration. It may be the .htaccess file that is blocking access to font files.

The extensions are: * .svg, * .woff, * .ttf and * .eot

    
06.03.2014 / 20:46
1

Often this happens due to poor rendering of the files at the time they are generated. This has happened to me many times.

Try to render on this site: link , the best in my opinion.

I use this source on the company website where I work, see: link (google fonts)

The above friend is right, there is in google fonts, search there.

    
07.03.2014 / 03:25
1

put a comma after the source web name 

ex: font-family: 'open_sansitalic', sans-serif;  font-size: 40pt; line-height: 50pt; color: #f68934;

I think this will solve.

    
07.03.2014 / 13:18
Number of repetitions per character How to know which DATETIME format used in a particular SQL Server column?