Self-hosting downloaded font

user_6358582 0
Viewed 130

I want to self-host a downloaded font. Do I have to list each of the font files in multiple urls? I'm using this snippet of code:

@font-face {
    font-family: <Your-font>;
    src: url(<your-font-path>);
}
html, body {
    font-family: <Your-font>, sans-serif; /*Specify your font name here*/
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
font-face css
2 Answers

Yes. For each of the fonts you have you will need a @font-face. More specifically, one for each font file you have downloaded. Let's say you have one font with three different files, one for regular, one for light and another for bold:

@font-face {
    font-family: font-regular;
    src: url('/font-regular.woff');
}

@font-face {
    font-family: font-light;
    src: url('/font-light.woff');
}

@font-face {
    font-family: font-bold;
    src: url('/font-bold.woff');
}

You can add more than one file for your font-face for browser compatility purposes, by adding the keyword format after the url. This however is not a workaround for having one font-face for multiple fonts. It only states to the browser that the same font can be found in other formats in other urls:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

See more in the official documentation: MDN

user_82862760

Your code is OK. You just have to repeat the secuence for any of the font variants you want to use. I mean, regular, italic, bold, bold-italic and so on. Also if you have different file types of the same font you have to include them, for example, ttf, woff, woff2 and other.

user_151074500
Related