1 reply [Last post]
brsastre
brsastre's picture
Offline
newbie
Last seen: 3 years 8 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: 11 hours 40 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

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.