CODEWITHSUNDEEP
phphtmlcsswebfonts
user9526715
user9526715

Reputation: 3

How could I use local fonts in website

I want to show my business tagline in "monotype corsiva" font it is not available on Google font so any body can please help me out for it .

Upvotes: 0

Views: 5923

Answers (4)

Inti
Inti

Reputation: 52

You need to upload your font and then write the code in css to access that.

@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 */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

In modern browsers you can only use .ttf file, so your font face code will be like:

@font-face {
      font-family: 'MyWebFont';
      src: url('webfont.ttf');
    }
    
    body {
      font-family: 'MyWebFont', Fallback, sans-serif;
    }

Make it correct answer if it resolve your problem. :)

Upvotes: 3

Hasanuzzaman Sattar
Hasanuzzaman Sattar

Reputation: 600

Paste all these font formates in your css folder otf/ttf/woff.

Add in your stylesheet:-

@font-face {
    font-family: 'MTCORSVA';
    src: url('./MTCORSVA.eot');
    src: local('MTCORSVA'), url('./MTCORSVA.woff') format('woff'), url('./MTCORSVA.ttf') format('truetype');
}

now use this to apply font family font-family: 'MTCORSVA';

Upvotes: 4

Mohsin
Mohsin

Reputation: 199

http://fontsforweb.com/font/show?id=6771

Please log in or register to get your embedding links or Download the font which has all the code needed included.

Upvotes: 1

Wils
Wils

Reputation: 1231

First you have to locate the otf/ttf/woff font file on your local machine.

Then, put this into the css file.

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

body{
    font-family: mylocalfont;
}

Upvotes: 1

Related Questions