Online font conversion

Source: Internet
Author: User

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:, slow font Loading

(2) Google webpage Fonts
Google Web Fonts

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

<Link href = 'HTTP: // 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:

Online font conversion

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.