Kevin Powell - Community•2w ago

@font-face practices

Hey, what are some best practices for using @font-face? Perhaps some properties that are a must? I currently use it like this, i'd appreciate any pointers, things i've missed or clarification that i've got it down. Thanks in advance.

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}

16 Replies

ἔρως•2w ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display add font-display: swap

snxxwyy•2w ago

ah cool thank you, what does it display if it can't download/render the font? The default one? I know it says it does this if you put the value to auto but how about the others? i still don't quite understand that.

ἔρως•2w ago

if it can't download the font, uses a fallback if no fallback is provided, uses the default font by the browser also https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range <-- use this

snxxwyy•2w ago

So for both of those if i understand correctly, this is the premis of them? font-display - specifies what fallback method is used either using the fallback in the declaration (font-family: xyz, fallback;) or making the text invisible unicode-range - what characters the font can affect

ἔρως•2w ago

no, font-display specifies how the font should behave until it's file is downloaded unicode-range specifies which character ranges the font includes, and the font won't be downloaded until a character in that range is displayed in the page

snxxwyy•2w ago

ohh i see, thank you also just a secondary question, if i have a font and want let's say a regular and bold version it has to be two separate declarations like the example below right? there's no way i can include both in one declaration?

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400; /* <-- this */
  font-display: swap;
  unicode-range: U+0025-00FF;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}
@font-face {
  /* same properties as one above */
  font-weight: 700; /* <-- this */
}

@font-face {
  font-family: 'xyz';
  font-style: normal;
  font-weight: 400; /* <-- this */
  font-display: swap;
  unicode-range: U+0025-00FF;
  src: 
    url(fonts/regular.woff2) format('woff2'),
    url(fonts/regular.woff) format('woff'),
    url(fonts/regular.ttf) format('truetype');
}
@font-face {
  /* same properties as one above */
  font-weight: 700; /* <-- this */
}

ἔρως•2w ago

unless it is a variable font, yes

snxxwyy•2w ago

alright cool got it, i've seen people define two values in the font-weight property before e.g. font-weight: 400, 500, what does that do?

ἔρως•2w ago

nothing https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

snxxwyy•2w ago

alright, thank you, everything there really helped out

ἔρως•2w ago

you're welcome by the way, the correct syntax is font-weight: 400 500

snxxwyy•2w ago

yeah just noticed that myself haha, thanks

ἔρως•2w ago

it means that the font has font-weights between 400 and 500, so, a variable font

snxxwyy•2w ago

ahh i see

vince•2w ago

that's good to know because I've been writing separate font-faces for each font-weight 😂 😂

ἔρως•2w ago

if you use variable fonts, you don't need to do that, and this is understood as a range from 400 to 500 (441 is valid, as well as 499 or 401)

Gaming

Programming

@font-face practices