how to use uncommon fonts in html and css

Question

I want to use some uncommon fonts in html but could not get them to work. For example I want to use Kollekif font type but it's not working

<!DOCTYPE html>
<html>
<head>
<style>
p.b {
  font-family: "Kollekif", Times, serif;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
 
<p class="a">This work for Arial Font </p>

<p class="b">How can I make this font Kollekif</p>

</body>
</html>

how could I implement some of this uncommon fonts?

Either something like Google Fonts, or [`@font-face`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) — , Sep 08 '20 at 18:43
Try using Google Fonts. Here's a [font](https://fonts.google.com/specimen/Work+Sans) which looks almost identical to Kollektif. — Nanoo, Sep 08 '20 at 18:46

score 2 · Answer 1 · answered Sep 08 '20 at 18:44

To include a custom font, you'll need to include a resource where that font can be loaded.

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

For example, if you download the Kollekif and host them in a fonts folder where your html is hosted:

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

score 2 · Answer 2 · answered Sep 08 '20 at 18:51

Depending on your targeted browsers, you can use @font-face. You can learn more here: https://www.w3schools.com/Css/css3_fonts.asp

If you download the font to the same folder as the HTML page, you can use the following code (I assume the font is saved as Kollektif.ttf)

<style>
@font-face {
   font-family: myFont;
   src: url(Kollektif.ttf);
}

p.b {
   font-family: myFont;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

score 1 · Answer 3 · answered Sep 08 '20 at 18:44

1

You need to import the font, either from files or from say Google Fonts.

@import url(https://fonts.googleapis.com/css?family=Bungee);

CodePen using Google Fonts.

https://css-tricks.com/snippets/css/using-font-face/

answered Sep 08 '20 at 18:44

Lundstromski

1,197
2
8
17

score 1 · Answer 4 · answered Sep 08 '20 at 18:54

An uncommon font, or Non-Standard Fonts may not be available to use directly by calling their name. As it turns out, Kollekif may be one of them. To use such fonts you will have to import them beforehand to be able to use them.

Now I was unable to find an embedded link for Kollekif in particular so I used another example font. You can find many free fonts from Google Fonts, however if you really have to use Kollekif you can add the font file (.ttf, .otf, .woff etc) and link them using their relative path!

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap" rel="stylesheet">
<style>
p.b {
  font-family: "Long Cang", Times, serif;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
 
<p class="a">This work for Arial Font </p>

<p class="b">How can I make this font Kollekif</p>

</body>
</html>

how to use uncommon fonts in html and css

4 Answers4