How to add a font to a page?

For cross-browser compatibility, you need to create several different font formats of your choice (ttf, eot, svg, etc.). This can be done on this free service or this service , if there are problems with Cyrillic fonts. Download the font (for example, ttf ), get a set of necessary files at the output. It connects, as correctly suggested by colleagues above, using @ font-face . First, initialize the font:

 @font-face { font-family: 'MyFont'; src: url('my-font.eot'); src: url('my-font.eot?#iefix') format('embedded-opentype'), url('my-font.woff') format('woff'), url('my-font.ttf') format('truetype'), url('tmy-font.svg#MyFont') format('svg'); font-weight: normal; font-style: normal; } 

And further, we define the style for a particular element in the usual mode:

 h1 { font-family: MyFont; } 

Maybe that's it? Need to add to your CSS :

 @font-face { font-family:Название шрифта; src:/fonts/название шрифта.ttf;} 

And then, to apply to everything:

 *{ font-family:Название шрифта; } 

As I added BuxtonSketch :

 @font-face { font-family: 'BuxtonSketch'; src: url('fonts/buxtonsketch.eot'); src: url('fonts/buxtonsketch.eot?#iefix') format('embedded-opentype'), url('fonts/buxtonsketch.woff') format('woff'), url('fonts/buxtonsketch.ttf') format('truetype'), url('fonts/buxtonsketch.svg#buxtonsketch') format('svg'); font-weight: normal; font-style: normal; } 

And in the fonts folder there naturally were the buxtonsketch.eot , buxtonsketch.ttf and buxtonsketch.woff .

Custom fonts

Look here . There is no answer there, but adding a font from there is very easy.