How to embed any font in a Web page

Source: Internet
Author: User

Today, we introduce a more commonly used method of embedding arbitrary fonts in Web pages, and this method is css mainly @font-face implemented by attributes.
The fonts文件夹 font used to store the output in this instance, which is css文件夹 used to store CSS styles and HTML pages for output presentationindex.html

Sneak Peek

View Preview Download Attachments

1) Get the three file formats you want to use to make sure the font is displayed correctly in the main browser.

. TTF or. OTF for Firefox 3.5, Safari, Opera

. EOT, for Internet Explorer 4.0+

. SVG, for Chrome, IPhone

Generally we are in some free Fonts are mostly in. ttf format, we can convert the. ttf format font file to another two formats, here is recommended an online conversion website, online conversion address:/HTTP

Conversion method

2) After acquiring the fonts in three file formats, we need to @font-face declare the font using the property

Case FONT:

Planet kosmos.ttf Click to download font access password: 7788

Bleeding Cowboys.ttf Click to download font access password: 6052

Haunted Mouse.ttf Click to download font access password: B2FB

@font-face {font-weight:normal;font-style:normal;font-family: ' Mywebfont '; Src:url (' Webfont.eot '); Src:url (' Webfont.eot #iefix ') format (' Embedded-opentype '), url (' Webfont.woff '), Format (' Woff '), url (' Webfont.ttf ') format (' TrueType '), url (' webfont.svg#webfont ') format (' SVG ');}

fnont-family: ' Mywebfont ', MyWebFont for the definition of the font family, according to their own needs to change, but also need to replace the above code in the webfont name of their own font.

This example code is as follows:

@font-face {font-weight:normal;font-style:normal;font-family: ' Planet-webfont '; Src:url ('. /fonts/planet/planet-webfont.eot '); Src:url ('. /fonts/planet/planet-webfont.eot? #iefix ') format (' Embedded-opentype '), url (' ... /fonts/planet/planet-webfont.woff ') format (' Woff '), url ('.. /fonts/planet/planet-webfont.ttf ') format (' TrueType '), url ('.. /fonts/planet/planet-webfont.  svg#planet-webfont ') format (' SVG ');}

3) using fonts, first define the font attributes in the CSS, as follows:

P {font-family: ' Webfont ', Arial, Sans-serif;}

There are 3 types defined in this example, the code is as follows:

h1{font-family: ' Planet-webfont ', Arial, Sans-serif;} h2{font-family: ' Bleeding cowboys-webfont ', Arial, Sans-serif;} h3{font-family: ' Haunted Mouse-webfont ', Arial, Sans-serif;

4) This example also defines CSS for H1, H2, H3, p four tags

#h1css h1 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:1.5em;} #h2css h2 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:1.5em;} #h3css h3 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:0.2em;}. Pcss p{text-align:center;color: #ffffff;} P A{color: #ffffff; text-decoration:none;} P A:hover{color:yellow;}. hr1{clear:both;border-bottom:1px solid #efefef; margin:40px 0;5) Add CSS style links <link rel= "style on related pages type= "Text/css" charset= "Utf-8"/>

This example code:

<link rel= "stylesheet" href= "csstype=" Text/css "charset=" Utf-8 "/> 

6) Finally let's take a look at index.html the code that invokes the Font style page

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" " ">Head><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "><title> How to embed any font </title>styleSheettype= "text/css  "href=" css/demo.css "/><body><div id=" h1css ">target  = "_blank" ></a></p></div></body></html ;  

How to embed any font in a Web page

Related Article

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.