0

I know that it's possible to have multiple font-faces on css. Now I have two html pages that use these fonts but in the future there'll be more; now those font-faces are declared via inline css and used via classes. What I really wanted was to wrap up all my font-faces into a single fonts.css and then on each individual html pages reference that css and use <p class="...-font"><p>

So my fonts' css is like this:

@font-face {
        font-family: 'Komika';
        src: url('/bin/res/font/KOMIKAX_-webfont.eot');
        src: url('/bin/res/font/KOMIKAX_-webfont.eot?#iefix') format('embedded-opentype'),
        url('/bin/res/font/KOMIKAX_-webfont.woff') format('woff'),
        url('/bin/res/font/KOMIKAX_-webfont.ttf') format('truetype'),
        url('/bin/res/font/KOMIKAX_-webfont.svg#KomikaAxisRegular') format('svg');
        font-weight: normal;
        font-style: normal;
}
.komika-font {font: 30px 'Komika', Tahoma, sans-serif;}

@font-face {
        font-family: 'Nevis';
        src: url('/bin/res/font/nevis-webfont.eot');
        src: url('/bin/res/font/nevis-webfont.eot?#iefix') format('embedded-opentype'),
        url('/bin/res/font/nevis-webfont.woff') format('woff'),
        url('/bin/res/font/nevis-webfont.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
}
.nevis-font {font: 500% 'Nevis', Tahoma, sans-serif;}

And the html is like this:

<head>
<link rel="stylesheet" href="/bin/res/style-fonts.css.php" type="text/css" />
<link rel="stylesheet" href="/bin/res/style.css.php" type="text/css" />
<title><?php echo $photo_title ?></title>
</head>

<body>
    <h1 class="____">Some text here</h1>
<body>

And at the ____ should be "nevis-font" but the IDE (Dreamweaver) doesn't even autocomplete.

Is it possible? Because I tried it and it didn't work (the chosen font wasn't displayed).

I think I got it, the problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.

Community
  • 1
  • 1
dialex
  • 2,706
  • 8
  • 44
  • 74
  • 1
    You should always show us what isn't working. Showing us what is working but you don't want is useful but doesn't help us work out where you went wrong in what you actually *want* to do. – Chris Jul 18 '12 at 17:13
  • 2
    I'm a little bit concerned that you're putting an asset like fonts into the /bin/ directory. – Lie Ryan Jul 18 '12 at 17:17
  • Ok I'll upload more info, the contents of the css and of the html. What other info would be useful? What is wrong with putting fonts inside /bin/? It's a personal website and the folder's structure is kind of adhoc :P – dialex Jul 18 '12 at 17:21
  • 1
    @DiAlex: Does the file actually exists in the path you indicated? Use Chrome Developer Tools or Firebug to inspect your requests. Make sure they are returned correctly, and that the contents of the files is what you expect. – Madara's Ghost Jul 18 '12 at 17:32
  • 1
    Also you should define your font sizes in terms of `em`, not percents or pixels, to support people who need larger fonts. – Roddy of the Frozen Peas Jul 18 '12 at 17:32
  • are there conflicting styles in your other style sheet? – imakeitpretty Jul 18 '12 at 17:35
  • why wouldn't you just define h1 {font-family:'nevis', tahoma, sans-serif}? Are you trying to have multiple different H1 styles? I'm not sure that's the best way to do that. – imakeitpretty Jul 18 '12 at 17:37
  • Guys, I checked every file and retyped everything and it seems to be working now (I'll do some further testing)... can't figure out what was wrong -_- Thanks anyway! And thanks @Truth for suggesting Chrome Developer Tools ;) – dialex Jul 18 '12 at 17:38
  • @RoddyoftheFrozenPeas about em and %, see this: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ – dialex Jul 18 '12 at 17:54

2 Answers2

1

Yes it's possible. We'll need more details on the problem you used to have in order to answer a more detailed answer.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

The problem was that the css containing the font-faces can't end with .php like I had. I just use *.css.php because the .php forces the server to compress the css files.

dialex
  • 2,706
  • 8
  • 44
  • 74