11

I've included a custom font on my website (Segoe UI), however the font file are around 1mb, which takes a few seconds to load the first time.

I'm on a Mac, and the font is not shipped with OSX. However, as far as my knowledge goes, it's included with Windows.

How can I make CSS only load the font if it's not already existing on the client?

Patrick Reck
  • 11,246
  • 11
  • 53
  • 86
  • do you accept a javascript solution? – Fabrizio Calderan Jan 22 '13 at 10:40
  • I would prefer if I could keep it in the CSS. However, if that is not possible, `JS` will have to do. It's a pain having such a slow loading frontpage – Patrick Reck Jan 22 '13 at 10:42
  • 2
    See if this possible duplicate: [@font-face src: local - How to use the local font if the user already have it?](http://stackoverflow.com/questions/3837249/font-face-src-local-how-to-use-the-local-font-if-the-user-already-have-it) may help you. – Fabrizio Calderan Jan 22 '13 at 10:47
  • 1
    Segoe UI is not a free font, and you would need a permission from Microsoft to use it as a web font. – Jukka K. Korpela Jan 22 '13 at 13:12

1 Answers1

15

Using local('Segoe UI') worked out. Seems like it prioritizes the sources from first to last.

Here's the working code

@font-face {
    font-family: Segoe;
    src: local('Segoe UI'), url('fonts/segoeui.ttf') format('truetype'), url('fonts/segoeui.woff') format('woff');
}
Vic Seedoubleyew
  • 9,888
  • 6
  • 55
  • 76
Patrick Reck
  • 11,246
  • 11
  • 53
  • 86