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');
}
Related
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;
}
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
To my knowledge to use a custom font, stored locally in this case, you would use something similar to this.
#font-face {
font-family: 'theFontFamily';
src local('the font'),
local('the-font'),
url(path/to/the-font);
}
.fontClass {
font-family: 'theFontFamily', extra_settings;
}
So using this font, locally, would you expect this to work?
#font-face {
font-family: 'Pacifico';
src: local('Pacifico Regular'),
local('Pacifico-Regular'),
url(resources/fonts/Pacifico.ttf);
}
.logo-container {
font-family: 'Pacifico', cursive;
}
As when I try it, the code changes the font, just not to the desired font. It looks like this.
Whereas if I use the import link, <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">, just using the following code works.
.logo-container {
font-family: 'Pacifico', cursive;
}
This looks like this.
I have probably made a simple mistake and I would appreciate if someone would be able to aid me in fixing this.
Make sure you link the source url properly. Try
#font-face {
font-family: 'myPacifico' ;
src: url('/resources/fonts/Placifico.ttf') format('truetype');
}
That's basic enough, then to use...
.logo-container {
font-family: 'myPacifico', san-serif; }
San-serif in this case is a fallback. In this case, ive linked to the regular ttf file. For bold and other styles, u'ld have to link to that in another #font-face with a different name.
Perhaps this will work (tricky to say for sure without being able to test 100%):
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.eot');
src: url('Pacifico-Regular.eot?#iefix')
url('Pacifico-Regular.woff2') format('woff2'),
url('Pacifico-Regular.woff') format('woff'),
url('Pacifico-Regular.ttf') format('truetype'),
url('Pacifico-Regular.svg#svgFontName') format('svg');
}
To just use the TrueType font locally:
#font-face {
font-family: 'Pacifico';
src: url('Pacifico-Regular.ttf');
}
Bear in mind you should have more than just the TrueType font for the highest level of browser compatibility, but for testing with just TTF you can delete any lines not referring to the TTF version.
I'm working on a style to change font to a custom one for a project. the code seems to work in the editing window but real sites doesn't seem to work. I think its falling back on a system default. How do I get around this? I'm using chrome if that matters.
#font-face {
font-family: 'wantedfont';
font-style: normal;
font-weight: 400;
src: local('wantedfont'),url(http://hazel-is.me/times_new_ancient.ttf);
}
*{
cursor: url(http://puu.sh/hoJq2/46859bf607.gif), progress;
font-family: wantedfont !important;
}
you can use the "bulletproof" syntax and add a ☺︎ as local font name to make sure it does not load a local font. more importantly add format declaration, full rule should be as such:
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('☺︎'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
#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;
}