Search code examples
htmlcssfont-face

Multiple font-face in external css

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.

Solution

  • 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.