Web front-end custom font implementation

Different browser support for font files is not the same here only the support TTF file format browser such as the implementation of Google

1. The new HTML file code is as follows

2. Under the same directory, create a new CSS file named Font.css

3. Find the TTF file for the font you need, such as Singlemalta.ttf

4. Use the @font-face module to refer a custom font to your project

@font-face is written in CSS as follows

Here the URL path is written with an absolute path

5. We can see that our custom font is called Firstfont, and this custom font is useful in the H1 style of the 1.

6. Effects

Add: If the browser needs to use this font in other format files can be clicked on this URL to upload your TTF format files can be converted to other formats of the other browser use, when the introduction of multiple text paths in SRC, the browser may only recognize the last path

Web front-end custom font implementation