Online font conversion

It is inevitable that some fonts on the website are not the default ones. You must use @ font-face to load your own specific fonts to achieve specific text effects. In this article, I will introduce you

@ Font-FACE: it is a free and common method and explains the advantages and disadvantages of various methods. The readers can still measure the usage in their own projects.

(1) [email protected]
First, let's talk about the original method to implement the custom webpage font @ font-face method. It is very easy to declare a custom @ font-face CSS syntax. Basically, as long

You specify the font name and path of the font file. Once the font is specified, you can apply it to any element.


@ Font-face {
Font-family: "Custom font name"; // defines the font name.
SRC: URL ('font. ttf'); // font file path
}
Body {
Font-family: "Custom font name ";
}

However, different browsers support fonts in different formats. For example, ie only supports fonts in EOT format, Firefox supports EOT and TTF formats, and Safari supports fonts in OTF, TTF, and SVG formats.

However, our website is also intended for IE viewers. Therefore, the previous common method obviously cannot meet our requirements. Therefore, we need more complicated and suitable methods for all browsers.


@ Font-face {
Font-family: 'mywebfont ';
SRC: URL ('webfont. eot');/* ie9 */
SRC: URL ('webfont. EOT? # Iefix') format ('embedded-OpenType '),/* IE6-IE8 */
URL ('webfont. woff') format ('woff'),/* modern browsers */
URL ('webfont. ttf') format ('truetype '),/* safari, Android, IOS */
URL ('webfont. SVG # svgfontname') format ('svg ');/* legacy IOS */
}

The advantage of this method is that you can place the font on your server and debug it on your own. However, the disadvantage is that the font must be generated in different formats. (here there is a generated font.

Formatted online tool: http://www.fontsquirrel.com/fontface/generator), slow font Loading

(2) Google webpage Fonts
Google Web Fonts

Apply the font to Your webpage. The Code is as follows:


<Link href = 'HTTP: // fonts.googleapis.com/css? Family = Arvo 'rel = 'stylesheet 'type = 'text/CSS'>

The advantage of this method is obviously fast loading, lightweight and free, but there are also some shortcomings that most fonts do not provide many styles.

In general, the second method is the most suitable method.


Online production font address: http://www.fontsquirrel.com/fontface/generator

Online font conversion