font-face not working in firefox - html

I am having a hard time of why my font-face is not working in firefox, it worked perfectly fine in chrome, here's the css that I have:
#font-face {
font-family: 'ArvoRegular';
src: url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.eot');
src: url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.woff') format('woff'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.ttf') format('truetype'),
url('http://cf.shopious.com/fonts/arvo-fontfacekit/arvo-regular-webfont.svg#arvoregular') format('svg');
font-weight: normal;
font-style: normal;
}
.arvo-regular {
font-family: 'ArvoRegular', Arial, sans-serif;
}
Here's the site. Based on my understanding that this is the correct way to do it

There's nothing I see wrong with your CSS. I'm betting it's a cross-domain issue (I've run into that in the past). Take a look at this article: http://davidwalsh.name/cdn-fonts.

Related

How can I load a custom font with CSS in Safari?

I am creating a simple web page and I am applying a custom font (Roboto). I have declared them in the CSS file but Chrome detects it fine and Safari does not.
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto500.eot');
src: url('/fonts/roboto500.eot') format('embedded-opentype'),
url('/fonts/roboto500.woff2') format('woff2'),
url('/fonts/roboto500.woff') format('woff'),
url('/fonts/roboto500.ttf') format('truetype'),
url('/fonts/roboto500.svg') format('svg');
}
#font-face {
font-family: 'Roboto';
src: url('/fonts/roboto700.eot');
src: url('/fonts/roboto700.eot') format('embedded-opentype'),
url('/fonts/roboto700.woff2') format('woff2'),
url('/fonts/roboto700.woff') format('woff'),
url('/fonts/roboto700.ttf') format('truetype'),
url('/fonts/roboto700.svg') format('svg');
}
h1.site-title,
h2.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
h4.subtitles {
font-family: 'Roboto' !important;
font-weight: bold;
}
p {
font-family: 'Roboto' !important;
font-weight: normal;
color: rgb(90, 90, 90);
}
I checked with the Safari console to see if it was getting the fonts, and it does, but when I look at the files one by one, they don't match the original font.
Finally, thanks to some comments and such, I got it to work using another download link:
https://fonts.googleapis.com/css?family=Roboto
From here Google offers different components to add to the CSS of your project, what I did was, just in case in the future that typography was no longer available in that link and I lost it, I downloaded it from the link that appears and I put it locally in my project and linked it with the relative path.
I have no idea if it was because the files I downloaded didn't work or any other reason, but the fact is that from this link and using only the one in woff2 format, it works both in Chrome and Safari.
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(../fonts/roboto/roboto.woff2) format('woff2');
}
I hope this may be of help to someone in the future. Many thanks to all of you who have responded.

#font-face doesn't work in chrome, how can I fix that?

I used font face to use custom font in Chrome, but it doesn't works.
In Firefox, it works well. How can I fix it?
This is what I wrote.
#font-face {
font-family: 'abril';
src: url('./assets/fonts/AbrilFatface-Regular.eot');
src: url('./assets/fonts/AbrilFatface-Regular.eot?#iefix') format('eot'),
url('./assets/fonts/AbrilFatface-Regular.woff') format('woff'),
url('./assets/fonts/AbrilFatface-Regular.ttf') format('truetype'),
url('./assets/fonts/AbrilFatface-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
div.page-title {
font-family: 'abril';
}
I have used this font before. It worked well for me. Please try Using this Google Font (Hope its the same ). You can even download from there and use it.

How to install font in a website in html css?

I wanna make a website with a font named SutonnyMJ.TTF (in Bangla). I tried many resources, but i failed to do this.
i use #font-face { font-family: SutonnyMJ; src: url('../fonts/SutonnyMJ.TTF'); }
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.eot');
src: url('../fonts/SutonnyMJ-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype'),
url('../fonts/SutonnyMJ-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
but they does not work that i want.
Is there anyone to help me please, How can i solve this?
you can probably remove a couplke lines from there and remove legacy support your site will probably work fine with just this
#font-face {
font-family: 'SutonnyMJ';
src: url('../fonts/SutonnyMJ-webfont.woff') format('woff'),
url('../fonts/SutonnyMJ-webfont.ttf') format('truetype');
}
With #font-face you loaded in a custom font but you aren't using it yet
You still have to apply it to your website
body {
font-family: 'SutonnyMJ', sans-serif;
}

#Font-Face cross browser compatibility issue

I'm having a hard time making a font look properly in the major browsers (I'm only using the Windows versions BTW for now, don't have access to Mac), I'll try to mention the code and how it behaves with each change I did to the SVG line because that's what most people suggest changing after doing some research about similar issues.
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
font-weight: normal;
font-style: normal; }
This code makes the font look very pixelated in:
Google Chrome and Safari
However it looks fine in FireFox and IE.
This is the 2nd code (I bumped up the SVG line):
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg#RobotoLight') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font isn't even displayed anymore and is replaced by a default webfont in:
FireFox, Chrome and Safari
Still looks normal in IE.
Finally, when I remove the "#RobotoLight" from the SVG line, like this:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg');
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype'),
font-weight: normal;
font-style: normal; }
Font still isn't displayed in FireFox, but it now works properly (without Pixelation) in Chrome, Safari and IE!
So can someone help me make the 3rd code work with FireFox as well please, cross browser font compatibility is driving me insane.
ps: I'm not an experienced developer and still new to this, I bought a ready template that I'm trying to change some stuff in it to create a basic website for myself, I'm not sure if this matters but I didn't change the font-family name in the CSS sheet, I added the fonts in the proper folder and edited the SRC URL to the right path.
I assume the font-family name is for my own reference in the CSS sheet and browsers don't actually verify it.
Any help would be MUCH appreciated!
You have a comma and a semicolon mixed up. The correct block would be:
#font-face {
font-family: 'RobotoLight';
src: url('../font/jura-demibold.eot');
src: url('../font/jura-demibold.eot?#iefix') format('embedded-opentype'),
url('../font/jura-demibold.svg') format('svg'),
url('../font/jura-demibold.woff') format('woff'),
url('../font/jura-demibold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
change
url('../font/jura-demibold.svg') format('svg');
to
url('../font/jura-demibold.svg') format('svg'),
EDIT: These little mistakes happen to the best of us.

Custom Font STILL wont work in IE

The webpage where I'm trying to get the custom font "Duke-Fill" to display is http://www.hamlinforcongress.com/helpout.php
I'm using:
#font-face {
font-family: 'header_font';
src: url('Duke-Fill.eot?#iefix') format('embedded-opentype'),
url('Duke-Fill.woff') format('woff'),
url('Duke-Fill.ttf') format('truetype'),
url('Duke-Fill.svg#svgFontName') format('svg');
}
.header_font{
font-family: header_font;
}
I've tried every other suggestion I can find on the Internet, but nothing can make the custom font display in Internet Explorer. It works perfectly in every other conceivable browser, but not IE (surprise surprise). Help?
#font-face {
font-family: 'NimbusSanConD-Lig';
src: url('fonts/228BFB_1_0.eot');
src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'),
url('fonts/228BFB_0_0.woff') format('woff'),
url('fonts/228BFB_0_0.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
This code works in IE. It was generated using Font Squirrel