@font-face syntax rules
@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }
YourWebFontName: This value refers to your customized font name. It is best to use the default font you downloaded. It will be referenced to the font-family in your Web element. Such as "font-family:"YourWebFontName";"
source: This value refers to the storage path of your customized font, which can be a relative path or an absolute path;
format: This value refers to the format of your customized font, which is mainly used to help the browser identify it. Its values mainly include the following types: truetype, opentype, truetype-aat , embedded-opentype, avg, etc.; weight and style: You must be familiar with these two values. Weight defines whether the font is bold, and style mainly defines the font style, such as italics.
Example: (Take SingleMaltaRegular as an example)
Download the required fonts.
Get the .eot, .woff, .ttf, .svg font format font required by @font-face. You can do it on this website. Click to enter (fontsquirrel)
Download the Font Squirrel file to your local computer and unzip it. You can get the font.
Create a new folder fonts in the project and download the fonts and put them in it.
Style writing format:
@font-face { font-family: 'SingleMaltaRegular'; src: url('../fonts/singlemalta-webfont.eot'); src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/singlemalta-webfont.woff') format('woff'), url('../fonts/singlemalta-webfont.ttf') format('truetype'), url('../fonts/singlemaltawebfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal;}?
Final font that can be quoted:
body{ font-family: 'SingleMaltaRegular'}