Sorry if this is a stupid question but I imported a font stored on my computer into a CSS file and, although it works in Chrome, it doesn't in Microsoft Edge or Internet Explorer. I don't have any other browsers so I can't check with those and I was wondering if anyone would know why.
Linking CSS:
#font-face {
font-family: 'Linotte';
src: url('...\font\Linotte\Linotte.otf') format('otf'),
url('...\font\Linotte\Linotte.woff2') format('woff2'),
url('...\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I read that Edge doesn't have .woff2 support, so I figured linking both the .otf and .woff versions would help, but it hasn't. I get the following error in my Chrome console on any page that uses this font for both the .woff and .woff2:
Failed to load resource: net::ERR_FILE_NOT_FOUND
However, that error doesn't show up in the Edge console or the IE console.
When I go into sources, this is what shows up (won't let me imbed images yet, I'm very new): Sources
The folder the Linotte folder is in is in the same folder as the folder the CSS sheet is in, so I don't understand why it isn't showing the right thing.
Try replacing the three ... with ..:
#font-face {
font-family: 'Linotte';
src: url('..\font\Linotte\Linotte.otf') format('otf'),
url('..\font\Linotte\Linotte.woff2') format('woff2'),
url('..\font\Linotte\Linotte.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Also the convention is to use forward slashes, not backward.
Related
Visiting a website i have found out the menu links were abnormally bolder than wile watching the same page from my collegue computer with same browser.
Deleting the corresponding font from my windows font folder corrected the difference.
My question is how preventing this possibility when designing css fonts on a website
Most #font-face at-rules begin with a local(name-of-local-file) and then a reference to your distant url(/on/server/teh-webfont.woff).
Browsers will try, in this typical situation, to use the local file and if they find nothing will continue by downloading from your server the distant asset. If they find a local matching font, then they'll use it immediately and will stop their search of a font thus they won't download and use your distant asset.
Conclusion: don't use local() and only keep those url(). It's the contrary of this SO answer
Example without local() and many url() corresponding to many formats. Browsers will download the first one that please them, not 2+ of them:
#font-face {
font-family: 'Gudea';
src: url('./fonts/gudea/Gudea-Regular-webfont.eot');
src: url('./fonts/gudea/Gudea-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./fonts/gudea/Gudea-Regular-webfont.woff2') format('woff2'),
url('./fonts/gudea/Gudea-Regular-webfont.woff') format('woff'),
url('./fonts/gudea/Gudea-Regular-webfont.ttf') format('truetype'),
url('./fonts/gudea/Gudea-Regular-webfont.svg#gudearegular') format('svg');
font-weight: normal;
font-style: normal;
}
Download the font .ttf
Saving the font in a folder in your web site
For call font use this code in css:
#font-face {
font-family: "YourFont";
src: url('font/YourFont.ttf');
}
.example{
font-family: YourFont, sans-serif;
}
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?
I have the code below in my css file. The font renders as desired in all browsers on Mac OS, but will not render on Windows. Now before you say it's not Windows compatible, I have made a dummy page on the Windows machine, and it runs the '.woff' file fine in Chrome (not IE). Hovever IE can render this page. I feel like I'm missing something important in the #font-face. Here is my code:
#font-face { font-family: Skia;
src:url('./webfonts/skia.ttf') format('truetype'),
url('./webfonts/skia.eot') format('embedded-opentype'),
url('./webfonts/skia.woff') format('woff'),
url('./webfonts/skia.svg');
font-weight: lighter;
font-style: normal;
}
the 'webfonts' folder is in the same directory as the 'styles' folder where the css files are located.
>styles
>'style.css'
>webfonts
>'skia.ttf / woff / eot / svg'
In the <body> tag, I'm including font-family:Skia, sans-serif;
It looks like you're on the right track
#font-face {
font-family: "sansation";
src: url("fonts/sansation_light.eot");
src: url("fonts/sansation_light.eot?#iefix") format("eot"),
url("fonts/sansation_light.ttf") format("truetype"),
url("fonts/sansation_light.woff") format("woff"),
url("fonts/sansation_light.svg") format("svg");
font-weight: 200;
font-style: normal;
}
You do want to include the format, ie fixes for older versions of ie, woff for opera, and svg for mobile devices. This format usually never does me wrong!
Also, you can safely omit ./ since it relates to the current directory. You also should to include the font-weight and font-style. Checkout how google webfonts does this.
I have added a font to a site, added the CSS and uploaded the font files and it is working in IE but not in Firefox. Why is that?
CSS:
#font-face {
font-family: 'MyFont';
src: url('MyFont.eot');
src: url('MyFont.eot?#iefix') format('embedded-opentype'),
url('MyFont.woff') format('woff'),
url('MyFont.ttf') format('truetype'),
url('MyFont.svg#MyFontRegular') format('svg');
font-weight: normal;
font-style: normal;
}
label { font-family: 'MyFont'; font-size: 20px; }
The label was just a test, but it's working. The font files are in the same directory as the CSS.
I've tried almost everything, and its still not working....
Does anybody know what's wrong? Any help appreciated.
In order:
Check if the font is on Google Web Fonts. If it is, use that version, don't embed your self (for ease of use, caching, browser update compat. etc.)
If not, then check your MIMEs. To do this, use Firebug's Net panel to look at the headers and check they are correct.
If the MIME is wrong, then fix it using either .htaccess, or by writing a PHP file that uses file_get_contents() and header() to fix it.
I found out there was another CSS file, overwriting the one i made.
Problem solved
I've been through a slew of questions here and I'm not seeing why what I'm doing isn't working — but it isn't. I want to use a couple nonstandard fonts in a website, embedded via css.
Here's what the CSS I got from FontSquirrel looks like:
#font-face {
font-family: 'CrimsonRoman';
src: url('Crimson-Roman-webfont.eot');
src: url('Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('Crimson-Roman-webfont.woff') format('woff'),
url('Crimson-Roman-webfont.ttf') format('truetype'),
url('Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
Here's where it's referenced in my main css stylesheet:
p {
margin: 0 0 9px;
font-family: 'CrimsonRoman', Garamond, Times, Times New Roman, serif;
font-size: 13px;
line-height: 18px;
}
Everything's in the same directory right now, so I'm not even dealing with navigating through directories yet. The "p" declaration itself seems to be working, because if I change the first term to "Crimson," the name the font has on my computer, it loads it fine (or if I switch it to any other font I have installed locally). Whatever the problem is, I'm not seeing it.
Both sheets are linked successfully in my html doc, and the font's is linked before the main one.
I'm using Firefox to test.
Make sure your directory path is correct and pointing to the folder your font's are in on the server.
eg
#font-face {
font-family: 'CrimsonRoman';
src: url('/fonts/Crimson-Roman-webfont.eot');
src: url('/fonts/Crimson-Roman-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Crimson-Roman-webfont.woff') format('woff'),
url('/fonts/Crimson-Roman-webfont.ttf') format('truetype'),
url('/fonts/Crimson-Roman-webfont.svg#CrimsonRoman') format('svg');
font-weight: normal;
font-style: normal;
}
It's turned out to be something in how Dreamweaver renders pages, or reads CSS, etc. I finally uploaded everything to the site so I could show a couple people what was going on and the fonts mysteriously loaded. So my lesson for tonight is to regard Dreamweaver's design view as a potentially inaccurate sketch, and to look at things exactly where they'll be before I spend hours trying to fix something that isn't broken. :\
Not the answer you looking for but I really want to advice to use Cufon for this. (Direct link to Cufon)
Although #font-face is more and more supported by browsers like IE it still doesn't work perfect on each computer.
Cufon is, as we speak, supported by:
Internet Explorer 6, 7 and 8
Internet Explorer 9 beta (as of 1.09i)
Mozilla Firefox 1.5+
Safari 3+
Opera 9.5+ (9.01+ as of 1.10)
Google Chrome 1.0+
iOS 2.0+
Opera Mini (to a certain degree)
...and gives next to that way more cool font-options.