Question

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?

Answer 1

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');
}