All geek questions in one place

@ font-face - how to make it work in all browsers

The @ font-face rule is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari.

However, Internet Explorer 9 only supports .eot fonts, and Firefox, Chrome, Safari, and Opera only support .ttf and .otf fonts.

Note. Internet Explorer 8 and earlier do not support @ font-face.

This text is from here . Therefore, to work @ font-face for IE9, I just have to specify the EOT font file:

@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ }

In particular, I use Myriad Pro, and I have OTF fonts. How can I convert them to an EOT type?

And as for IE7 and IE8, what trick / hack should I use to get the desired result?

+4
source share
4 answers

Firstly, you do not have the copyright to embed most fonts - everyone can download them, so you do not need to put the font on your server to download.

My advice would be to use the squirrel font tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and code for you.

Be careful not to share fonts that you do not have rights to.

+3
source

I think it is almost completely cross-browser

 @font-face { font-family: 'Name'; src: url('location.eot'); src: url('location.eot#iefix') format('embedded-opentype'), url('location.woff') format('woff'), url('location.ttf') format('truetype'), url('location.svg#Name') format('svg'); font-weight: normal; font-style: normal; }

Location is the path on your server, and Name is the font name

+9
source

Jacktheripper has already posted a good font,

I recommend you the following good articles on this topic:

Article by Paul Irish

Article from fontspring

Personally, I use Google Web Fonts and am very pleased with this. You have no problem converting fonts, embedding the correct code, and taking care of copyrights using the large number of fonts available.

0
source 
 @font-face { font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome.woff2') format('woff2'), url('/fonts/awesome.woff') format('woff'), url('/fonts/awesome.ttf') format('truetype'), url('/fonts/awesome.eot') format('embedded-opentype'); }

The local () directive allows you to reference, download, and use locally installed fonts.

The url () directive allows you to load external fonts and is allowed to contain the optional hint format ()

0
source

Source: https://habr.com/ru/post/1400815/

More articles:


All Articles