Multiple font-face in external css - html

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.

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

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.

Related

Why isn't #font-face working on my website?

I've got a woff file named 'azonix-webfont.woff'. I added it to my website using #font-face. but it's not working. The text is displayed with the default font. Where's the error?
<head>
<meta charset="UTF-8">
<style>
#font-face
{
font-family: Azonix;
src: url(azonix-webfont.woff);
}
</style>
</head>
<body>
<p style="font-family: Azonix;">Hello!</p>
</body>
The text is displayed in default font. I don't know where's the error.
Edit: OK, I found the answer. It started working when I posted the files to the server.
You should upload your font to transfonter.org and convert. Will come css code with transfonter zip folder. And then you should change font url in css, according to place of your font files. Like this:
#font-face {
font-family: 'Proxima Nova Cn Lt';
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot');
src: url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff2') format('woff2'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.woff') format('woff'),
url('../../fonts/Proxima/ProximaNovaCond-SemiboldIt.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

fonts are not loading on MVC.?

I am building project on MVC it's like my college project. i have uploaded template and made layout in which included all css and scrips. everything seems perfect except fonts.
<link rel="stylesheet" href="~/Content/frontend/fonts/font-awesome/css/font-awesome.css" type="text/css">
<link rel="stylesheet" href="~/Content/frontend/fonts/elegant_font/HTML_CSS/style.css" type="text/css">
<link rel="stylesheet" href="~/Content/frontend/fonts/et-line-font/style.css" type="text/css">
inside css i found this is how urls are set should i also set them like links. with ~/contnet like this.
#font-face {
font-family: 'FontAwesome';
src: url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.eot#v=4.1.0');
src: url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.eot##iefix&v=4.1.0') format('embedded-opentype'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.woff#v=4.1.0') format('woff'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.ttf#v=4.1.0') format('truetype'), url('/Content/frontend/fonts/font-awesome/fonts/fontawesome-webfont.svg#v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Here is location where fonts are.
Errors i found with fontawsome are displayed but i have gave proper location where their files are.

Adding fonts in Qualtrics

Is it possible to add custom fonts in CSS in Qualtrics; i.e. exotic fonts that are not already proposed (Arial, ComicSansMS, CourrierNew, Georgia, Lucida…)?
I've implemented a <link rel="stylesheet'…> directing to an external stylesheet referring to custom fonts, but it doesn't work. Inline CSS works for other fonts, but not for non-websafe fonts.
Put in the first lines a link tag to the .css:
<link href="https://foo.com/fonts.css" rel="stylesheet" type="text/css">
Create the .css folder that contains:
#font-face {
font-family: 'fontOne';
font-style: normal;
font-weight: 400;
src: local('fontOne'), url(http://foo.com/fonts/fontOne.woff) format('woff');
}
Refer inline as <p style="font-family:'fontOne';">YourText</p>

Custom CSS font not loading on homepage first visit

I am making a simple website for someone and I want to include some custom fonts in it, namely Open Sans Condensed Light/Bold.
The font does load. But not on the first load of the page. You have to click on one of the links on the page to make the custom fonts load, or have to have visited the website and done that before.
This is obviously a problem as first time visitors will be confronted with an ugly looking website. When inspecting the not-working website in firebug, the font-family css part has a greyed out name, meaning it was not activated for some reason.
I use the following code in my CSS:
#font-face {
font-family: 'OpenBold';
src: url('opensans-condbold-webfont.eot');
src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condbold-webfont.woff2') format('woff2'),
url('opensans-condbold-webfont.woff') format('woff'),
url('opensans-condbold-webfont.ttf') format('truetype'),
url('opensans-condbold-webfont.svg#open_sans_condensedbold') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OpenSansLight';
src: url('opensans-condlight-webfont.eot');
src: url('opensans-condlight-webfont.eot?#iefix') format('embedded-opentype'),
url('opensans-condlight-webfont.woff2') format('woff2'),
url('opensans-condlight-webfont.woff') format('woff'),
url('opensans-condlight-webfont.ttf') format('truetype'),
url('opensans-condlight-webfont.svg#open_sanscondensed_light') format('svg');
font-weight: normal;
font-style: normal;
}
body, html{
font-family:"OpenSansLight";
margin:0;
padding:0;
background-image:url(../images/sintbg1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-attachment:fixed;
}
I do include my Stylesheet. My <head> looks like
<meta charset="utf-8">
<title>Sinterklaas <? echo $titel?></title>
<base href="http://www.mywebsite.info">
<link href="css/style.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
Anyone have any idea what I can change to make this work? Maybe something I overlooked? I've been struggling with this for almost a week now.
I found the answer to my problem.
It had to do with my base href.
It used to be the href to my website. Changing it to:
<base href="http://<? echo $_SERVER['HTTP_HOST']; ?>" />
Solved my problem. Turns out the fonts only load when "www" is placed in front of the href or something.
Anyway, I hope this helps someone! I had been looking for the answer for weeks.

#font-face issues

I am having some issues with loading a custom font on a site that I am working on.
Seems to work in Chrome, but that is it...
https://andstones.site-ym.com/
I attach a custom stylesheet,
<link charset="utf-8" type="text/css" href="http://www.korymathewson.com/fonts/styles.css" rel="stylesheet">
and in the stylesheet I write:
#font-face {
font-family: ChunkFiveRegular;
src: url('Chunkfive-webfont.eot');
src: local('☺'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
font-weight: normal;
font-style: normal;
}
Then I call that as a font-family..
h1.fontface {
font: 60px/68px 'ChunkFiveRegular', Arial, sans-serif;
letter-spacing: 0;
}
p.style1, #MainMenu {
font: 18px/27px 'ChunkFiveRegular', Arial, sans-serif !important;
}
But it still does not show up in firefox or IE ... any help or advice you can lend?
Firefox only allows embedded fonts that are on the SAME DOMAIN as the site requesting it. There is a (sort of) workaround here:
http://openfontlibrary.org/wiki/Web_Font_linking_and_Cross-Origin_Resource_Sharing
You might want to try to use http://www.fontsquirrel.com/ to allow you to have the fonts themselves embedded in the CSS -- very useful!
Hope this helps
What is 92p? A node or is it meant to be a class? CSS class/id names can't start with a number.