Include different fonts in an HTML document

Question

I have to add a folder with a font family that has different styles (bold, light, etc.), the fonts are in .ot, .ttf and .woff. The font family and the main folder where the fonts are is called HKExplorerSoft.

How should I add these fonts to the projects and how can I use them later in my CSS? I understand I have to create a @font-face rule, something like:

@font-face {
  font-family: 'HKExplorerSoft';
  src: url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.woff'); 
}

But that doesn't work or I'm not sure how to use this in the CSS later.

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

If you want to import custom fonts you may have a look to this answer provided here :

edited May 23 '17 at 12:17

Community

1
1

answered Mar 31 '17 at 09:42

Kévin Joffard

26
5

I got the right answer there, Thank you. It was a path problem, but I also learned to add different types. – Sergi Mar 31 '17 at 09:51

score 0 · Answer 2 · answered Mar 31 '17 at 09:37

0

with use this way

.className{
  font-family: 'HKExplorerSoft';
}

answered Mar 31 '17 at 09:37

Lalji Tadhani

14,041
3
23
40

add more file like .ttf & .otf - src: url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.ttf'); – Lalji Tadhani Mar 31 '17 at 09:40

score 0 · Answer 3 · answered Mar 31 '17 at 09:42

0

Do it this way (in your stylesheet):

@import url('assets/HKExplorerSoft/hkexplorersoft-black-webfont.woff');

Check that the filepath is correct...

and then use this name in your styles like:

.myclass {
  font-family: 'HKExplorerSoft';
}

answered Mar 31 '17 at 09:42

Johannes

64,305
18
73
130

Include different fonts in an HTML document

3 Answers3