1 reply [Last post]
brsastre
brsastre's picture
Offline
newbie
Last seen: 2 years 47 weeks ago
Timezone: GMT-3
Joined: 2016-08-20
Posts: 1
Points: 2

Hi!

Reading CSS Missing Manual third edition.
I'm on chapter 6 (Fonts)

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

Why is it that there are two 'src' ?
In other words, why couldn't the code be like this :

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

Just wondering.... thanks!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 35 min 27 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9738
Points: 3817

There are different file

There are different file formats which may or may not be supported by various operating systems. By sourcing different formats, you increase your chances of everybody being able to use your font face. See http://fileinfo.com/filetypes/font.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.