How To Add New Fonts In CSS For Local Testing

I'm currently making a webpage that imports the needed fonts from Google Fonts this way: @import url(http://fonts.googleapis.com/css?family=Italianno); The problem is that every t

Solution 1:

Hey make a fonts folder with css folder and put the desired font there. Then in CSS call this code as example for MeriyoUI font as mentioned below. This would load the font onto your app.

For this you just need to download the font and put that in fonts folder. (pre-requisite).Try using web safe fonts.

Hope it helps.

CSS

@font-face
{
    font-family: 'Meiryo UI';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/MeiryoUI.ttf');
}

Solution 2:

1. create a folder in website directory and move your fonts to it! ( .ttf , .eot , .woff )

example: directory --> webfonts

2. create a css document for that!

example: directory --> css --> webfont.css

3. use this code into webfonts.css

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

4. and in the first line of haed element into your webpage, use bellow code:

<link rel="stylesheet" href="css/webfonts.css" type="text/css"/>

Solution 3:

Use CSS3 @font-face. Try making font face of your fonts from any fontface generator like this http://www.fontsquirrel.com/tools/webfont-generator. And to learn how to use them take a look in here http://css-tricks.com/snippets/css/using-font-face/