I'm using a new CDN and recently I made a google font for my website menu. Now I activated the CDN, but the "custom font" shall I say is not appearing. All images, files and css are OK. Only this custom font.
I have this in the style.css (I have the fonts stored in my server).
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.eot');
src: url('DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
url('DroidKufi-Bold.woff') format('woff'),
url('DroidKufi-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.ttf');
My website is http://www.formulawahad.com // Is there a fix for that?
Thanks a lot.
This issue is maybe related to CORS. Your CDN provider need to enable cross-origin resource sharing (CORS). This will set the header to: Access-Control-Allow-Origin “*”. Otherwise is the content rejected.
Related
#font-face {
font-family: Han Sans;
src: url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff2) format('woff2'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.woff) format('woff'),
url(http://before-the-dawn.com/spoqa-han-sans/han-sans-regular.ttf) format('truetype');
font-weight: 500;
}
I uploaded some font files onto my webhosting, and trying to load it as webfont. But it seems that I can't use theese, and I can't even know why..
If this is an Adobe font, make sure you have your permissions are correctly set on the Typekit site.
I am using custom web font in my blogger blog. It is not working since few weeks ago. There is a solution for this error that i show on stackflow website but i can't apply it for blogger blog because there is no .htaccess file in blogger. please some one help me. my font face code here. and my website is http://vishwatestblog.blogspot.com/
#font-face {
font-family: 'fmmalithix';
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c');
src: url('https://googledrive.com/host/0ByuGuHHrxa5GY0JSNTR4TUhaZ3c?#iefix') format('embedded-opentype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GMm45RW5zWkd1Slk') format('woff2'),
url('https://googledrive.com/host/0ByuGuHHrxa5GUUJGS0dxME5XbDQ') format('woff'),
url('https://googledrive.com/host/0ByuGuHHrxa5GN2xhWmQ2bHdDRDA') format('truetype'),
url('https://googledrive.com/host/0ByuGuHHrxa5GRzhxSzRhN1dBTEE#fmmalithix') format('svg');
font-weight: normal;
font-style: normal;
}
It looks like the font files doesn't have the CORS headers and thats the reason, you aren't able to see the font being applied.
Also, as the files are being downloaded from googledrive, you need to be signed in to access the file.
I dont think you can host the font files on a google drive and access without authorization.
you can check it yourself, font urls you mentioned throw a 404 if you open in incognito mode.
Please Check, you have correctly placed the font file and the google drive directory.
#font-face
{
font-family: 'Font Family';
src: url('source.ttf') format('truetype'); ---> Font Type
}
Im using SourceSansPro-Bold. I have one file ttf downloaded, and I have other format declared as google links. But my question is if the these links are correct?
The problem is that Google links has word 'V4 declared, probably version 4, but I need fonts in version "bold".
How to check if there are the same fonts (both in bold version)?
Or how to modify google link to get bold font for sure?
Css Font definition:
#font-face {
font-family: 'source sans pro';
font-style: normal;
font-weight: bold;
src: font-url('SourceSansPro-Bold.ttf');
src: font-url('SourceSansPro-Bold.ttf') format('truetype'),
local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
Google font declaration with V4 string inside:
http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eo
You can select which weight of font you want here:
https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro.
If you want to download these files locally.
Visit the href from the <link>
Visit the url: from the #font-face of the font you need.
This will download the font.
I am using the below font-face rule in my application
#font-face{
font-family: frutilicn;
src: url('../fonts/FrutigerLTW01-47LightCn.eot');
src: url('../fonts/FrutigerLTW01-47LightCn.ttf') format('truetype');
}
When I access the page the font style does not work . I am getting an error in firebug like this:
"NetworkError: 404 Not Found http://localhost/fonts/FrutigerLTW01-47LightCn.ttf"
The 'font folder' is in the same folder as the stylesheet and FrutigerLTW01-47LightCn.ttf is in the font folder
What does that mean and what do I need to do?
Thanks.
We put our purchased fonts (which we embed onto the website) in the root of the site, therefore avoiding issues with relative linking.
#font-face{
font-family: 'Frutiger';
src: url('/FrutigerLTW01-47LightCn.eot');
src: url('/FrutigerLTW01-47LightCn.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS