开发者

How to install a Font in server

I have downloaded and installed a font in my system, then i used this font in my project, its worked fine in local system, but when i upload this开发者_如何学编程 page to server its not working. How can i install a font in server? or How can i solve this issue?

Please Help me!!!!


With CSS3 it is possible to embed fonts on websites even if it isn't available on the user's machine.

First upload your font to a directory on your server.

Then register that font in your CSS so that you can use it like so:

@font-face {
 font-family: 'Raspoutine Medium';
  src: url(http://site/fonts/Raspoutine Medium.ttf);
}

Then, to use it on elements within your site:

body {
font-family: 'Raspoutine Medium', Arial, Helvetica, san-serif;
}

(see http://www.w3.org/TR/css3-fonts/#the-font-face-rule)

Note that this will only work in select modern browsers, namely current versions of Firefox, Chrome, Safari, Opera, and IE9. IE8 and older versions of IE don't support this so it's good to declare and test the site with a 'fall back' font.

Also note that there may be licensing issues depending on the font..


Even if you install the font in your server it does not mean that the font should work when your users try to access the site. The font has to be installed in all the machines that is going to access it so if your site is public you can't make every user to install the font. So a good practice and recommended method is to use default fonts.

Another option is to check out Google Fonts API. Advantages are

* A choice of high quality open source fonts.
* Works in most browsers.
* Extremely easy to use.


First you need to upload your font file to server, download zip file of your font and upload the unziped folder to server via FTP like filezilla then you may use this in you css but replace "font/path" with your path where you are going to upload the font and its not compulsory to upload all extension file given below but it is a good practice to do so if you don't want to upload any extension file just remove its entry from below code

@font-face { font-family: 'Font Name'; src: url('font/path/fontname.eot'); src: url('font/path/fontname.eot?#iefix') format('embedded-opentype'), url('font/path/fontname.woff') format('woff'), url('font/path/fontname.ttf') format('truetype'); font-weight: normal; font-style: normal;}

You can use it like

#element { font-family: 'Font Name'; }

Hope this helps


You can load a font from the server into a web page just like any other resource, using CSS3 for all modern browsers except for IE, which requires using WEFT.exe (download free from Microsoft) to create an EOT file from the TTF font file (store the TTF file in your local fonts directory before running WEFT).

Once you have the TTF and EOT files in your website directory, the following code should work:

/* Load font for IE only */
@font-face {font-family: Font Name;font-style: normal; font-weight: normal; src: url(FontName.eot)}
/* Load font for other browsers */
@font-face {font-family: Font Name; src: url(FontName.ttf)}
/* Specify default font and any other styles */
#id {font-family:Font Name,sans-serif}
...
<p id="id">Text to be displayed</p>


Right-click font you want to install and click Install or Drag font into/onto the Fonts icon in the Control Panel.


You can use / for getting relative paths.

@font-face {
    font-family: Font-Name;
    src: url(/content/font/Font-Name.ttf ); /* IE */
    src: local("B Yekan"), url(/Content/fonts/Font-Name.ttf format("truetype"); /* non-IE */
    font-style: normal;
    font-weight: 100;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜