CSS 3 out of 4 custom fonts don't load - html

I can't seem to make custom fonts load in Firefox 54.0 and Chromium 59.0.3071.86. Looking at the Network tab in Firefox's element inspection tool, I see no font being loaded/downloaded, same with Chromium.
Here's the relevant CSS: https://hastebin.com/raw/quyivirosa
And here's the HTML: https://hastebin.com/iciwavoyus.xml
I've checked, and the URLs to the fonts are all correct, so I have no idea why it refuses to work. What does work is the font in the navbar, but I'm guessing that one is being loaded locally, since it's installed on my system.
Is there something I've done wrong...? I've searched around, and could not find any solutions to my problem.

I found two errors in your css that, as soon as I fixed them, the fonts started working.
I changed
#font-face {
font-family: 'DejaVu Condensed'; !important
src: url('/fonts/DejaVuSansCondensed.eot');
src: url('/fonts/DejaVuSansCondensed.eot?#iefix') format('embedded- opentype'),
url('/fonts/DejaVuSansCondensed.woff2') format('woff2'),
url('/fonts/DejaVuSansCondensed.woff') format('woff'),;
font-weight: normal;
font-style: normal;
}
to
#font-face {
font-family: 'DejaVu Condensed' !important;
src: url('/fonts/DejaVuSansCondensed-Bold.eot');
src: url('/fonts/DejaVuSansCondensed-Bold.eot?#iefix') format('embedded-opentype'),
url('/fonts/DejaVuSansCondensed-Bold.woff2') format('woff2'),
url('/fonts/DejaVuSansCondensed-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
On line two, !important should be inside the semicolon.
On line six, I removed the coma that is right before the semicolon.
Once fixed, the font face kicked in

Related

How can i include different font-weights with one font file?

I am currently making a website in Wordpress. The problem I have is using a font. I couldn't find an answer to my question here, so I decided to ask myself. Someone send a font to me to use, but the problem is when I open the file there are different styles of that font. To be clearer: the font is Avenir Next and the different styles are Avenir Next Bold, Avenir Next Medium, Avenir Next Ultra Light.
It is not a google font. I have tried to include it with #font-face :
#font-face {
font-family: Avenir Next;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: bold;
font-weight: 700;
}
#font-face {
font-family: Avenir Next Medium;
src: url('http://localhost/cultuurfonds/wp-
content/themes/monstroid/fonts/Avenir-Next.ttf');
font-weight: normal;
font-weight: 400;
}
With this I can use the Avenir Next (which is pretty bold, so I don't want to use that), but Avenir Next Medium doesn't work.
It is a paid font, but I am not the one who bought it. That person send the font file (Avenir-Next.ttf) to me, so this is what I have to work with.
I prefer to not use a plugin to include it. I couldn't find a good plugin for it anyway. But if there is no other way than to use a plugin, I am willing to use it.
I hope my question is clear (first question here).
If you want to load fonts from your local files, firstly you have to use tools like https://www.web-font-generator.com/ to generate different formats of the font.
Then you have to load all formats of the font like this
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Regular.otf') format('opentype'),
url('fonts/AvenirNextLTPro-Regular.woff') format('woff'),
url('fonts/AvenirNextLTPro-Regular.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Regular.svg#AvenirNextLTPro-Regular') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'AvenirNextLTPro';
src: url('fonts/AvenirNextLTPro-Demi.eot?#iefix') format('embedded-opentype'),
url('fonts/AvenirNextLTPro-Demi.woff') format('woff'),
url('fonts/AvenirNextLTPro-Demi.ttf') format('truetype'),
url('fonts/AvenirNextLTPro-Demi.svg#AvenirNextLTPro-Demi') format('svg');
font-weight: 500;
font-style: normal;
}
As you can see font-family name is the same, but font weight size is different (Regular - 400 and Demi - 500)
Then, when you want to use different font weight in different elements you have to declare it like this:
p {
font-family: 'AvenirNextLTPro';
font-weight: 400;
}
h1 {
font-family: 'AvenirNextLTPro';
font-weight: 500;
}

Font is not being loaded

I'm at my wits end with this problem. I'm trying to include a font. The CSS file is located at project/css/.
My font is located at project/fonts/iconfont/.
I have the following font files in that folder (even though I'd probably only need woff):
icons.eot
icons.svg
icons.ttf
icons.woff
This is how I try to include my font:
#font-face {
font-family: icons;
src: url(../fonts/iconfont/icons.woff) format('woff');
font-weight: normal;
font-style: normal;
}
However I can't use the font. Checking with Chrome developer tools it doesn't even load. What am I doing wrong here?
Try to link all fonts format in #font-face selector and call font-family with custom name in quotation marks.
/*--- Define a custom web font ---*/
#font-face {
font-family: 'YourWebFont';
src:
url('../fonts/iconfont/icons.woff') format('woff'),
url('../fonts/iconfont/icons.ttf') format('ttf'),
url('../fonts/iconfont/icons.eof') format('eof'),
url('../fonts/iconfont/icons.svg') format('svg');
}
/*--- Use that font on the page ---*/
body {
font-family: 'YourWebFont', sans-serif;
}
Good luck!

CSS Font-face isn't working

I'm trying to import a CSS font but unfortunately it's not working and I'm really unsure why.
The font in the filesystem called 'deadjim.ttf' It is placed inside my main public_html and yes it is the correct path, visiting the path downloads the file.
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
I've tried clearing my cache but this hasn't worked either. Apparently it's working on Safari but I have no means of checking having a windows PC
Make sure that you're calling the font like normal; #font-face doesn't apply any styles to the html, it just defines the font.
#Define your font
#font-face {
font-family: 'deadjim';
src: url('http://url.com/deadjim.ttf'); /*URL to font*/
}
#Will apply the font as default on the entire page
html, body{
font-family: 'deadjim';
}
To be sure your font works in all browser / most platforms, you will need to do something similar to this (with all formats provided) - it's not enough to just have the .ttf-file.
Here's an example of including FontAwesome:
#font-face {
font-family: 'fontawesome';
src: url('fontawesome-webfont.eot?v=4.7.0');
src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

Custom fonts not rendered in bold or italic in IE

I'm trying to load local fonts with custom names. Everything works perfectly in all browsers except IE, as always. The font isn't being rendered in bold or italic. I can't seem to understand what I'm doing wrong here.
Here is a demo:
http://jsfiddle.net/maitreyjukar/5ga5k2oa/
I am loading the font using the following CSS
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
font-weight: normal;
font-style: normal;
}
for all combinations of font-weight and font-style.
This is not only not an IE-specific issue it doesn't work on other browsers like Firefox.
Just write one font-face Rule istead of four like this:
#font-face {
font-family: k_Arial;
src: local("Arial"),
local("Helvetica"),
local("sans-serif");
}
Here is My Solution: http://jsfiddle.net/deepak__yadav/1eed9na5 i hope you will understand what you did wrong.
It's not an IE-specific issue - I'm on Firefox 38 and it doesn't work here either...
local sources are usually used to search on a user's machine before pointing to a URL, in order to speed things up.
However, you seem want to solely use locally installed fonts with a certain fallback order.
To achieve this, you could simply do the following:
body {
font-family: Arial, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
Bonus tip: Combine the bold and italic classes and you don't need an additional class bolditalic.
JS-Fiddle
you can define your font like below example, this will work in all the browsers.
#font-face {
font-family: 'ProximaNovaRegular';
src: url('../fonts/ProximaNovaRegular.eot');
src: url('../fonts/ProximaNovaRegular.eot') format('embedded-opentype'),
url('../fonts/ProximaNovaRegular.woff2') format('woff2'),
url('../fonts/ProximaNovaRegular.woff') format('woff'),
url('../fonts/ProximaNovaRegular.ttf') format('truetype'),
url('../fonts/ProximaNovaRegular.svg#ProximaNovaRegular') format('svg');
}

Ie8 not rendering embedded fonts to dynamic divs

#font-face {
font-family: "England Hand";
src: url("fonts/englandhand.eot?#iefix") format("embedded-opentype"),url("fonts/englandhand.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
I have the above as the font style. Its included in the body of the page. I have not added the font family to a div and it renders there ohk. When I create a clone of this div and assign it another position and id, the font stops rendering.
There is also no error in the console. This error only occurs on IE 8 and works fine on IE 9 .
SOLUTION
Look out for js errors. Surely there will be one in there leading to the issue
I think your missing some prefixes for the ie8/ie9 support. Your code needs to look something like:
#font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype'),
url('deutsch-webfont.svg#deutsch_gothicnormal') format('svg');
font-weight: normal;
font-style: normal;
}