CODEWITHSUNDEEP
htmlcssfonts
Mr. Fox
Mr. Fox

Reputation: 328

How to use "Monotype Corsiva" font in CSS statement?

I'm not sure about what font it is but I assumed it as a Monotype Corsiva (please correct me if I'm wrong), and here's my current CSS which doesnt seem to work because the font didn't change a bit

CSS:

<div style="font-family:Monotype Corsiva, Times, Serif; background-color:#74b3bc; height:46px; minSize=10;maxSize=100;">

enter image description here

Upvotes: 2

Views: 28425

Answers (4)

dzogbenyui agblevon
dzogbenyui agblevon

Reputation: 3

  • Make sure the font is downloaded and installed on your server.
  • And in CSS, your can write this simple code. It will work. It does for me.

font-family: 'Monotype Corsiva';

Upvotes: 0

Aslam Khan
Aslam Khan

Reputation: 400

Add this script

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
      WebFont.load({
      google: {
      families: ["Lato:100,300,400,700,900","Karla:regular","Cookie:regular"]
    }
    });
</script>

then add this style

<h2 style="font-family: Cookie;">Example</h2>

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201598

This part of your code is correct. There are syntax errors later in the style sheet, but they do not prevent the declaration font-family:Monotype Corsiva, Times, Serif from taking effect. It causes Monotype Corsiva to be used, if the user’s computer has such a font installed. Apparently, the computer where you tested this does not have that font.

Upvotes: 1

Sam Joy
Sam Joy

Reputation: 126

If you look on google fonts I'm sure you will find something similar. Here is an example of using Google web fonts with a font called "Cookie" and it is quite similar.

Firstly put this in your page ...

 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      google: {
        families: ["Cookie:regular"]
      }
    });
</script>

and then to use it in your actual web page include it in your css like so.

body {
   font-family: "Cookie"
}

If you do check out google fonts you can add as many as you want using the javascript code above, just simply stick a comma between each font and make sure they are in quotes like this...

 <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
      WebFont.load({
      google: {
      families: ["Lato:100,300,400,700,900","Karla:regular","Cookie:regular"]
    }
    });
</script>

and the 100,300,400,700,900 - is the font weight, so by declaring it here you can use it in your css.

and to be safe here is a JSFiddle

enjoy :)

Upvotes: 3

Related Questions