top

Fonts demo

bookmarks
https://fonts.google.com/
https://fonts.google.com/?subset=cyrillic

https://fonts.adobe.com/
https://www.cdnfonts.com/

https://03www.ru/fonts2/index.html
https://fonts-online.ru/
https://ffont.ru/fonts
https://fontsforweb.com/fontcategories/list

http://convertfonts.com/
https://www.fontsquirrel.com/
https://everythingfonts.com/font-face
https://everythingfonts.com/ttf-to-woff
https://everythingfonts.com/ttf-to-woff2
https://www.kirsle.net/wizards/ttf2eot.cgi

https://fonts.google.com/icons
https://fontawesome.com/versions
https://github.com/google/material-design-icons/tree/master/font
https://developers.google.com/fonts/docs/material_icons?hl=ru
https://konstantinbulgakov.com/tools/icons#other


https://htmlbook.ru/blog/svoi-shrift-na-stranitse
https://bloggood.ru/wordpress/kak-vyvesti-standartnye-dashicons-ikonki-na-wordpress.html/

https://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
https://snipp.ru/html-css/cors-fonts

https://htmlacademy.ru/blog/html/fonts-loading

https://web.dev/explore/fast?hl=ru#optimize-webfonts
Быстрое время загрузки
Улучшите производительность вашего сайта.

		
top

font-family: dashicons

<link rel="stylesheet" href="dashicons/dashicons.css" type="text/css">
https://github.com/WordPress/dashicons

https://getuikit.com/v2/docs/icon.html
https://getuikit.com/docs/icon

https://www.w3schools.com/html/html_symbols.asp
top

font-family: 'FontAwesome' 4.3.0

<link rel="stylesheet" href="font-awesome430.css" type="text/css">
https://fontawesome.ru/cheatsheet/
https://fontawesome.ru/all-icons/
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
https://fontawesome.com/versions
https://use.fontawesome.com/releases/v5.1.0/css/all.css
https://use.fontawesome.com/releases/v5.15.4/css/all.css

https://fontawesome.com/versions

fa-lg fa-2x fa-3x fa-4x fa-5x
`
top

font-family: 'Glyphicons Halflings'

<link rel="stylesheet" href="glyphicon.css" type="text/css">
 https://getbootstrap.com/docs/3.3/components/
top

font-family: 'Ratchicons'

<link rel="stylesheet" href="ratchicons/ratchicons.css" type="text/css">
	http://goratchet.com/getting-started/
	http://goratchet.com/components/
top

custom font families

	<link rel="stylesheet" href="https://romanlaptev.github.io/css/lr/fonts-CDN.css">
font-family: "Golos Text", serif;
			
.golos-text-400 {/* Regular 400 */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
font-family: "Golos Text", serif;
			
.golos-text-500 {/*  Medium 500  */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
font-family: "Golos Text", serif;
			
.golos-text-600 {/* SemiBold 600 */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
font-family: "Golos Text", serif;
			
.golos-text-700 {/* Bold 700 */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
font-family: "Golos Text", serif;
			
.golos-text-800 {/* ExtraBold 800 */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
font-family: "Golos Text", serif;
			
.golos-text-900 {/* Black 900 */
  font-family: "Golos Text", serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
}
font-family: "Merriweather", serif;
			
.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}
font-family: "Merriweather", serif;
			
.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}
.lr-font-arial {font-family:'Arial';}
.lr-font-amatic {font-family:'Amatic SC';}
.lr-font-anton {font-family:'Anton';}
.lr-font-barlow{font-family:'Barlow';}
.lr-font-basic{font-family:'Basic';}
.lr-font-bebas{font-family:'Bebas Neue';}
.lr-font-bitstream{font-family:'Bitstream Charter';}
.lr-font-caudex{font-family:'Caudex';}
.lr-font-chelsea{font-family:'Chelsea Market';}
.lr-font-cinzel{font-family:'Cinzel';}
.lr-font-corben{font-family:'Corben';}
.lr-font-garamond-c{font-family:'Cormorant Garamond';}
.lr-font-cormorant-sc{font-family:'Cormorant SC';}
.lr-font-comfortaa{font-family:'Comfortaa';}
.lr-font-damion{font-family:'Damion';}
.lr-font-dancing{font-family:'Dancing Script';}
.lr-font-garamond-e{font-family:'EB Garamond'}
.lr-font-enriqueta{font-family:'Enriqueta'}
.lr-font-forum{font-family:'Forum'}
.lr-font-fredericka{font-family:'Fredericka the Great';}
.lr-font-hind{font-family:'Hind';}
.lr-font-georgia{font-family:'Georgia';}
.lr-font-helvetica{font-family:"Helvetica Neue", Helvetica;}
.lr-font-jockey{font-family:'Jockey One'}
.lr-font-josefin{font-family:'Josefin Slab'}
.lr-font-jura{font-family:'Jura'}
.lr-font-kelly{font-family:'Kelly Slab'}
.lr-font-inter{font-family:'Inter'}
.lr-font-lato{font-family:'Lato'}
.lr-font-libre-b{font-family:'Libre Baskerville'}
.lr-font-libre-f{font-family:'Libre Franklin'}
.lr-font-lobster{font-family:'Lobster'}
.lr-font-marck{font-family:'Marck Script'}
.lr-font-monoton{font-family:'Monoton'}
.lr-font-montserrat{font-family:'Montserrat';}
.lr-font-mfcandy{font-family:'Mf Candy';}
.lr-font-haviland{font-family:'Mr De Haviland'}
.lr-font-niconne{font-family:'Niconne'}
.lr-font-noticia{font-family:'Noticia Text';}
.lr-font-nimbus{font-family:'Nimbus Sans L';}
.lr-font-opensans-cond{font-family:'Open Sans Condensed';}
.lr-font-opensans{font-family:'Open Sans';}
.lr-font-oswald{font-family:'Oswald';}
.lr-font-overlock{font-family:'Overlock';}
.lr-font-pacifico{font-family:'Pacifico';}
.lr-font-patrick{font-family:'Patrick Hand';}
.lr-font-play{font-family:'Play';}
.lr-font-playfair{font-family:'Playfair Display';}
.lr-font-poppins{font-family:'Poppins';}
.lr-font-play{font-family:'Play';}
.lr-font-pt-sans{font-family:'PT Sans';}
.lr-font-questrial{font-family:'Questrial';}
.lr-font-raleway{font-family:'Raleway';}
.lr-font-rochester{font-family:'Rochester';}
.lr-font-roboto{font-family:'Roboto';}
.lr-font-rozha{font-family:'Rozha One';}
.lr-font-sacramento{font-family:'Sacramento';}
.lr-font-sail{font-family:'Sail';}
.lr-font-sarina{font-family:'Sarina';}
.lr-font-sans-serif{font-family:sans-serif;}
.lr-font-signika{font-family:'Signika';}
.lr-font-spinnaker{font-family:'Spinnaker';}
.lr-font-suez{font-family:'Suez One';}
.lr-font-tahoma{font-family:Tahoma;}
.lr-font-unica{font-family:'Unica One';}
.lr-font-work-sans{font-family:'Work Sans';}
.lr-font-google-sans{font-family:'Google Sans Text';}
.lr-font-ubuntu{font-family:'Ubuntu';}
.lr-font-yeseva{font-family:'Yeseva One';}
.lr-font-kurale{font-family:'Kurale';}

localhost fonts

font-family:"hattori-hanzolight", serif;
@font-face {
	font-family:hattori-hanzolight;
	src:url('http://localhost/fonts/H/hattori_hanzo/hattori_hanzo-webfont.eot');
	src:url('http://localhost/fonts/H/hattori_hanzo/hattori_hanzo-webfont.eot?#iefix') format('embedded-opentype'),
		url('http://localhost/fonts/H/hattori_hanzo/hattori_hanzo-webfont.woff') format('woff'),
		url('http://localhost/fonts/H/hattori_hanzo/hattori_hanzo-webfont.ttf') format('truetype');
	font-weight:400;
	font-style:normal
	font-display: swap;
}
.lr-font-hattori{font-family:hattori-hanzolight;}
.lr-font-hattori-italic{font-family:hattori-hanzolight-italic;}
.lr-font-RussiaMedium{font-family:"RussiaMedium";}
.lr-font-RussiaRegular {font-family:"RussiaRegular";}
.lr-font-RussiaBold {font-family:"RussiaBold";}
.lr-font-RussiaLight {font-family:"RussiaLight";}