-1

I found the most beautiful font here. I want to use it. I tried following:

@font-face {
    font-family: myFirstFont;
    src: url(http://fontsforweb.com/font/show/?id=78041);
}

div {
    font-family: myFirstFont;
}

(Source: https://www.w3schools.com/css/css3_fonts.asp)

Ralph Gottlieb
  • 11
  • 4
  • Did you read the How to section of that page? – SLaks Nov 28 '17 at 17:44
  • The page you link to provides an embedded link that you can use, and instructions for doing so. You just have to register. See "How to embed this webfonts [sic] on your website" on this page: http://fontsforweb.com/font/show/?id=78041 – Clinton Nov 28 '17 at 17:47

5 Answers5

0

That is not source for font its just website where you can download it. Download font and place in folder fonts then change your code src to that path.

stojevskimilan
  • 970
  • 8
  • 12
0

Download the full zip file, Extract it then put it in your project then use this code:

@font-face {
    font-family: myFirstFont;
    src: url(MonsieurPomme.woff);
}

div {
font-family: myFirstFont;
}
0

You need to download the font files and add links to the various formats, depending on which browsers you want to support:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

See https://css-tricks.com/snippets/css/using-font-face/ for more info.

Ted Whitehead
  • 1,731
  • 10
  • 18
0

Using font-face.

@font-face{
     font-family: ((fontName));
     src: url(fontname.woff);
}

Then you can call it just as how you call other fonts.

Christan Shane Plaza
  • 21
  • 9
0

You need to directly link to the font file instead of just the webpage.

@font-face {
    font-family: myFont;
    src: url('font.eot'); /* IE9 Compatible Modes */
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('font.woff2') format('woff2'), /* Super Modern Browsers */
         url('font.woff') format('woff'), /* Pretty Modern Browsers */
         url('font.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('font.svg#svgFontName') format('svg'); /* Legacy iOS */

}
div {
    font-family: 'myFont', serif;
}