CODEWITHSUNDEEP
htmlcssgoogle-chromefontstruetype
user4657588
user4657588

Reputation:

CSS - Include multiple fonts in one CSS file

How can I add more that one font in a CSS file? I have tried the following but it doesn't seem to work.

@font-face {
    font-family: 'Inspira_Reg';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Bold';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Italic';
    src: url('http://myfonturl.com');
}

@font-face {
    font-family: 'Inspira_Medium';
    src: url('http://myfonturl.com');
}

And then to use the font, I simply set the font-family property in the CSS IDs like so:

#titleSection {
   margin: 25px 5px auto auto;
   font-size: 11px;
   text-align:left;
   font-family: 'Inspira_Reg';
   color: black;
}

But it doesn't seem to work. The font doesn't seem to get recognized, it just seems to use Arial or whatever the default is.

I am using the latest version of Google Chrome and the font types I am using are TTF files.

Thanks, Dan.

Upvotes: 2

Views: 8654

Answers (2)

hadi
hadi

Reputation: 1120

well every thing looks good except for the font url. you should give the local address of your font. let me give you an full example buddy:

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
   font-family: myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>
so place your font the html folder and use the code :)

Upvotes: 0

jbutler483
jbutler483

Reputation: 24529

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

For cross browser compatibility, It seems that font-face requires multiple definitions. For example, this is from a CSS-tricks article: 

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

An alternative to using this would be to use an import (which would need to be placed at the start of your css file)

Something like:

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

which could then be used via:

font-family: 'Open Sans', sans-serif;

This could be used for multiple fonts, by importing them at the top of your CSS, and using the font-family declaration.

For many different fonts, and more information on using them, you could have a look here on google fonts

Upvotes: 1

Related Questions