Why do my webfonts only work with Chrome?

Asked

Viewed 178 times

8

I’m creating a website through a Child Theme Bootstrap-based Shoestrap. When I use webfonts they only work in Chrome.

What I’m doing wrong?

This is my CSS

@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; }
css3 twitter-bootstrap css-font-face
  • 1

    Have you tried changing the CSS of h1 for: font-family:'Open Sans', sans-serif; and add font-style:italic;?

  • this does not match the declared "font-family"

4 answers

5

Check whether other source files can be accessed directly by the browser, your server may be experiencing missing declaration issues mime-type. Could be the file .htaccess that is blocking access to source files.

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

  • I’ve tried typing: <Filesmatch ".(eot|otf|Woff|ttf) $"> Setenvif Origin » " http(s)?: //(.+.)?(domain1.org|Domain.com) $" origin_is=$0 Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is </Filesmatch> and did not result

  • However I decided to use google fonts, and that worked. In other projects, with other sources I do not know if this is feasible. I have been working on the localhost

4


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

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

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

With this you avoid requests on your server as well.

About front-end performance, from a read on: http://browserdiet.com/pt/

I hope I’ve helped!

1

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

Try to render on this site: http://www.fontsquirrel.com/tools/webfont-generator, the best in my opinion.

I use this font on the company website where I work, see: http://www.lecom.com.br (google fonts)

The friend above is right, exists on google fonts, search there.

1

puts a comma after the source web name

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

I think that solves.

Browser other questions tagged css3 twitter-bootstrap css-font-face

You are not signed in. Login or sign up in order to post.