CSS introduces external fonts

How do I introduce an external font?
1. Get Related Documents
Most of the font packages we download on our web site are files that end in TTF, but we typically need four of files for our front-end development.
The font suffix is related to the browser, as shown below

• . TTF or. OTF for Firefox 3.5, Safari, Opera
• . EOT, for Internet Explorer 4.0+
• . SVG, for Chrome, IPhone
  So how do we get these four kinds of documents? This is a recommended online font conversion software, with the following address:
  Https://www.fontsquirrel.com/tools/webfont-generator
  2. Introduction of external files

  @font-face {font-family: ‘HansHandItalic‘;src: url(‘fonts/hanshand-webfont.eot‘);src: url(‘fonts/hanshand-webfont.eot?#iefix‘) format(‘embedded-opentype‘),     url(‘fonts/hanshand-webfont.woff‘) format(‘woff‘),     url(‘fonts/hanshand-webfont.ttf‘) format(‘truetype‘),     url(‘fonts/hanshand-webfont.svg#webfont34M5alKg‘) format(‘svg‘);font-weight: normal;font-style: normal;}

  3. Using fonts

  body{font-family: ‘YaHei Consolas Hybrid‘;font-size: 16px;}

CSS introduces external fonts