I'm currently trying to fix an issue with my portfolio website. I use a custom font to keep the page looking good, but for some reason #font-face refuses to work.
Here's my CSS:
#font-face{
font-family: 'Quicktype';
src: url('Fonts/quicktype_condensed-webfont.woff2') format('woff2'),
url('Fonts/quicktype_condensed-webfont.woff') format('woff'),
url('Fonts/QuickType Condensed.ttf') format('truetype'),
url('Fonts/QuickType Condensed.eot'),
url('Fonts/QuickType Condensed.eot?#iefix') format('embedded-opentype'),
url('Fonts/QuickTypeCondensed.svg#QuickTypeCondensed') format('svg');
font-weight: normal;
font-style: normal;
}
Here's a link to my website:
http://alfabitsgamedev.com/
And here's a link to my github file hierarchy.
https://github.com/Alfabits/alfabits-game-dev-3
I've tried using as many font file types as I can, but it's not working on any of the browsers I use. I've tried different font directory paths, but that doesn't seem to work either. I've also looked around and none of the solutions I've found have solved my problem.
The website always returns with either a 404 Error for the .ttf, .woff, and .woff2 fonts (never the other fonts, for some reason), or a weird GET error.
I know I can't use .htaccess files, since github pages hosts only static stuff and can't do server side logic. So I'm kind of lost as to why this is happening and how I can fix it. Thanks in advance, if you can manage to help.
I found the solution! I was using Absolute Links instead of Relative Links. Relative Links make the intended path start from where the currently-used file is located, and needs to start with a '/'. Absolute Links will start the intended path starting from the system's root folder, not the file's.
Find more here: coffeecup.com/help/articles/absolute-vs-relative-pathslinks
Also, credit to Frits for the solution!
Unrelated answer, in case anyone comes across this issue. Make sure that you have a .nojekyll file in the root directory of your github-pages branch/dir if you have any directories that start with _, such as the ones that webpack creates: ./_/node_modules/#fortawesome/....
https://github.blog/2009-12-29-bypassing-jekyll-on-github-pages/
Related
Good morning!
My Team and I spent most of yesterday trying to figure out why that when I started the server yesterday morning, the website I was working on came up with every font on it displaying Times New Roman. The site is written in JSF utilizing an Eclipse Workspace, so we at first thought it was an issue with the Workspace, since the site was showing up correctly for one of my coworkers.
After hours spent rebuilding and debugging the Workspace, we came to the conclusion that it was either the code or the browser. I spent about an hour looking through the code, but could not find any issue that would cause our problem, so we concluded it was the browser. That was when one of my coworkers suggested that the person for whom the site was displaying fine on, update to the latest version of Chrome - which caused the fonts to break.
That latest version is: 38.0.2125.104 .
The code that is embedding the fonts looks like the below (the JSF resource tag just renders an HREF from the library):
#font-face {
font-family: 'aleoregular';
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.eot']});
src: url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.woff']}) format('woff'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.ttf']}) format('truetype'),
url(#{resource['lib:library/ui/fonts/aleo/aleo_regular_macroman/Aleo-Regular-webfont.svg']}) format('svg');
font-weight: normal;
font-style: normal;
}
Or, it would look like this in CSS without the JSF:
#font-face {
font-family: 'sinkin_sans600_semibold';
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot');
src: url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.woff') format('woff'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.ttf') format('truetype'),
url('../fonts/sinkin-sans/sinkinsans_600semibold_macroman/SinkinSans-600SemiBold-webfont.svg#sinkin_sans600_semibold') format('svg');
font-weight: normal;
font-style: normal;
}
On Firefox's console, I am getting this error:
"downloadable font: FTTM: misaligned table (font-family:....)"
Any advice would be much appreciated.
No definitive answer, but some things to try/check...
There is no problem that I have found with the new Chrome version and fonts.
You will be getting times fonts (actually 'serif') because that is the browser default if no font is set.
I take it your web fonts are being loaded from a local server and not the internet, and that therefore you can check that those font files exist and haven't become corrupted. Even if they are coming from the web somewhere, the next step is the same...
In Chrome, open the dev tools, and you should be able to see in the Network panel if the font file(s) are being requested and served up.
For a good call, Chrome will show the served font in the Preview tab when you click on the network call. If you see nothing there, check the response headers. You will need a Content-Type of something like font/woff2 or application/x-font-woff or similar.
You can also see from the network panel whether the files are being served from cache or not. It could be that the problem is not a Chrome version change as such, but that upgrading cleared the cache or the assets just naturally became cache expired and now are trying to fetch the problematic versions.
Could you be gzipping the font files, for example now, where you were not before (or vice versa)?
One of our guys figured it out! There was a server configuration filter that was corrupting the font files, they were able to modify the pom.xml file to get it all working again.
Everything is fine but when I use ../ it doesn't work. To call the CSS I use: <link rel="stylesheet" href="../../IcoMoon-App/style.css" /> and it do appears but as . I get the error at MainFolder/Albumes/Clarity_Deluxe_Edition/index.html, but when use the icons at MainFolder/index.html they're displayed well (note that the css location to this one is <link rel="stylesheet" href="IcoMoon-App/style.css" />). This is how my directory is structured:
MainFolder
├index.html
├css
│└index_style.css
├IcoMoon-App
│├IcoMoon-App.eot
│├IcoMoon-App.svg
│├IcoMoon-App.ttf
│├IcoMoon-App.woff
│└style.css
└Albumes
└Clarity_Deluxe_Edition
├index.html
└css
└index_style.css
Yes, because of I changed the location, I also changed the #font-face:
#font-face {
font-family: 'IcoMoon-App';
src:url('IcoMoon-App.eot?xzz47n');
src:url('IcoMoon-App.eot?#iefixxzz47n') format('embedded-opentype'),
url('IcoMoon-App.woff?xzz47n') format('woff'),
url('IcoMoon-App.ttf?xzz47n') format('truetype'),
url('IcoMoon-App.svg?xzz47n#IcoMoon-App') format('svg');
font-weight: normal;
font-style: normal;
}
Am I using wrong the "back folder" (../, don't know the exact name)? Or I did a mistake when changing the location?
One solution to this is using a different way of defining your paths.
In your CSS file, change the path to your IcoMoon font files to:
src:url('/IcoMoon-App/IcoMoon-App.eot?xzz47n');
The / at the very start of the URL makes the browser start from the domain-level of your website and then add the URL exactly as it appears in the example I gave. This will build an "absolute" URL to your IcoMoon font files, regardless of how deep in your folder structure you are.
A drawback to this approach is that the fonts may not appear when you're browsing your site locally (e.g. at http://localhost/~alej27/yoursite) because that would make the browser search for the font files at http://localhost/IcoMoon-App/IcoMoon-App.eot?xzz47n. There are ways around that (hosts file modifying and setting up a virtual domain) but that's outside the scope of this question :)
I hope I'm asking this question in the right place,
I'm working on a website for a friend, here's the site hosted on my goDaddy acc:
http://www.andkensol.com/rowanWeb/
And here it is on my friends:
http://www.rowanmoore.org/
You can see the clear difference in the title font. If you inspect them you'll see they are both using CODE. I personally uploaded all the files myself and the file structure, layout, file paths are all identical yet the font won't render on my friends site.
I downloaded the font from font squirrel and I'm using #font face to implement it in both sites.
CSS
#font-face {
font-family: CODE;
src: url('font/CODE Light.otf');
}
#nameTitle{
font-size:60px;
font-family:CODE;
color:white;
font-weight:400;
margin-bottom:-3%;
}
The 'font folder' is in the same folder as the stylesheet and CODE Light.otf is in the font folder.
Ive deleted the site from my friends server, downloaded it from mine and then uploaded it to my friends and still no luck.
Could this be a problem on goDaddy's end perhaps?
I recommend you to use some webgenerator to generate css file with different formats of font.
I think your problem is wrong #font-face.
#font-face {
font-family: 'nfs';
src: url('yourFont.eot');
src: url('yourFont.eot?#iefix') format('embedded-opentype'),
url('yourFont.woff') format('woff'),
url('yourFont.ttf') format('truetype'),
url('yourFont.svg#yourFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Diffrenet browser need other format to render and open font.
I'm using mostly those three webfont generators
http://onlinefontconverter.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://convertfonts.com/
But there is more, type to uncle google "font generator"
EDIT: i think blank space in your font/CODE Light.otf is the problem try to use for example something like this font/CODE_Light.otf
I guess it's a matter of access rights of your folders/files.
Something like 644 would be necessary for a file to be able to access the font from the outside web (the last 4 => read access for public). You can either use chmod on the console or change the rights in your ftp-client.
Also, you should support more than otf, or you will most likely lock out a significant amount of Internet Explorer Users.
I downloaded a custom font (Gotham-Light.eot), but it doesn't work on Internet Explorer 9.
#font-face {
font-family: Gotham-Light;
src: url('Gotham-Light.eot');
}
This doesn't work. I'm using ASP MVC3 rebuilt, used custom tool, still nothing.
First, the goods:
#font-face {
font-family: 'ludger_duvernayregular';
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot?#iefix') format('embedded-opentype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.woff') format('woff'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.ttf') format('truetype'),
url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.svg#ludger_duvernayregular') format('svg');
font-weight: normal;
font-style: normal;
}
p.test {
font-family: 'ludger_duvernayregular', Arial, serif;
font-weight: 400;
color: blue;
}
Note, I used a font face that was purposefully easy to see as working. (And I don't have access to Gotham in a web font, so... I'm not even sure Gotham is licensed to use in web font form. If you do not have a license or the license does not allow for it, please respect that.) So you will have to do a little thinking about the paths to your font files.
What I've done is consult the blog post AlienWebGuy linked to, which is good. It's not long, so I'd read it. It boils down to:
Possibly a misconfigured MIME type for the font file. See below for more info. There's also a note that Apache may have this problem, it seems to be more of an IIS issue (according to the article).
You can trick (?) IE9 to use the EOT file instead of the WOFF, which apparently fixes the issue (according to the article).
Additionally, and as an aside, IE9 had a problem displaying the font with a jsFiddle demo using the same exact CSS. Very weird. IE7 and 8 worked fine, so I know it was working in some ways. I did not figure out what that was about, but I saved the same markup and CSS to a file on my site and it works fine.
Breakdown...
Let me explain what's going on in the above CSS. I'll go through each line. However, keep in mind I have the web font in the following file formats:
eot
woff
ttf
svg
You really probably only need eot, ttf and woff if you don't care to support legacy iOS. SVG translations are hard to obtain, though.
Now, first name your font so you can reference it:
font-family: 'ludger_duvernayregular';
IE9 Compat Modes:
src: url('http://jfcoder.com/css/fonts/ludgerduvernay-fontsquirrel/ludgerduvernay.eot');
Remember to verify the URLs you're using here actually lead to a real file. Put it in the address bar and see what happens (does it download? 404?).
On the following, though, I'm going to remove the full URL so you can see the entire statement, including the end.
IE6, 7 and 8:
src: url('http://../ludgerduvernay.eot?#iefix') format('embedded-opentype'),
Note this part:
.eot?#iefix <<< See below for an explanation.
Further IE CSS Fix
In some rare cases, IE will fail because the #font-face declaration
has too many characters. This can be solved in most instances by
adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a
bit of extra room.
- From the Font Spring article
I have no idea why this works, so I'm taking their word for it.
Modern Browsers:
url('http://../ludgerduvernay.woff') format('woff'),
Safari, Android, iOS:
url('http://../ludgerduvernay.ttf') format('truetype'),
Legacy iOS:
url('http://../ludgerduvernay.svg#ludger_duvernayregular') format('svg');
Then use it:
p {
font-family: 'ludger_duvernayregular', Arial, serif;
}
I was actually surprised this works back to IE6. Anyways, notice that I use a full path to the file, not a relative one. That's usually a good place to start; check to make sure the link downloads. I'm making a big deal of this because it's basic and easy to screw up.
So if the file is downloading with the url and you've got it working in other browsers, and in IE6, 7 and/or 8, you can look at another possibility:
Fix IE9 on the Server Side (IIS)
Microsoft’s IIS server will refuse to send resources that it does not
have a MIME type for. The syntax we developed forces IE9 to take the
WOFF over the EOT, but if it is served on IIS, it will fail. This is
because IE9 requests the WOFF file, but since WOFF is not a defined
MIME type in IIS, a 404 Not Found error is returned. To solve this,
you must add ‘.woff’ with MIME type ‘application/x-font-woff’ to your
IIS installation.
- From the Font Spring article
So you may have to check your server isn't borking it. You can also use Chrome Console or Firebug NET tab to view the headers sent with the file.
Now I had a little help here, and I think you should think about the following options:
Google Web Fonts. Don't be a hero. They host the font, give you the include stylesheet markup, and presto whammo, you're in business. They also have some pretty cool fonts. There are other web font services, such as Typekit, Webtype, Fontdeck, and Fonts Live.
Font Squirrel has a #Font-Face Generator, which can give you all of the files you need (Warning: Only submit fonts you know to be licensed for web use.). Use the Expert mode, and it will give you a ZIP file with lots of great stuff, including a demo. The one I received you can download here. The interesting thing is, the generated CSS is identical to the Font Spring one, minus the comments. That's probably not a coincidence.
I found that awesome tool on this Opera Dev page. That is also worth reading.
And of course, that blog post AlienWebGuy linked to at Font Spring.
This stuff isn't hard, but you need to know how to troubleshoot. Always check that the file is downloading; you can use Chrome Console Resources tab or Firefox's Firebug add-on and watch the NET tab to see if it downloads. It if just literally won't work, post the page or code somewhere where we can get to it and we can review it.
Happy coding. :)
The super awesomely cool font used in the demo is Ludger Duvernay Regular. For more information, see Steve Cloutier/Cloutierfontes site. Thank you for making it free for personal use. :)
If you're following the instructions layed out here -- http://www.fontspring.com/blog/fixing-ie9-font-face-problems -- then it's most likely how your calling the fonts.
Make sure you are pointing to the right location from your stylesheet - the code you have above will only work if the font file is in the same directory as the stylesheet.
Hope this helps.
Gotham is a commercial product, and if you have just downloaded it from somewhere, it’s probably an illegal copy or a fake, and may well be technically broken too.
Consider using a free font of similar design, such as Cicle.
For googlers: I had a problem with either long font name or conflict with already installed font. Anyway IE were the only browser having problems.
I changed
font-family: 'HelveticaLTUltraCompressedRegular';
to
font-family: 'HelveticaLTUCR';
which solved my issue.
I would like to know if it's possible to host webfonts on another domain,
My CSS are hosted on Amazon CloudFront and my webfonts too but they don't show up, It was fine when my css were in local.
this is my style.css on CloudFront:
#font-face {
font-family: 'Aller';
src: url('/app/files/fonts/allerdisplay-webfont.eot');
src: local('☺'), url('/app/files/fonts/allerdisplay-webfont.woff') format('woff'), url('/app/files/fonts/allerdisplay-webfont.ttf') format('truetype'), url('/app/files/fonts/allerdisplay-webfont.svg#webfontLZ8nc4vC') format('svg');
font-weight: 900;
font-style: normal;
}
The stylesheet is hosted on CloudFront using a subdomain: static.mydomain.com/style.css
And the Webfont can be downloaded from : static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf
Unfortunately when the stylesheet is called from mydomain.com it doesn't load it. I was wondering if it's a limitation or something like that.
Thanks
Should be no problem with an absolute path for the URL in the style declaration.
In your code above, you have relative path URLs.
You need an absolute path URL, like:
"http://static.mydomain.com/app/files/fonts/allerdisplay-webfont.ttf" (absolute)
-- not --
"/app/files/fonts/allerdisplay-webfont.ttf" (relative)
Theoretically, depending on the architecture of your subdomain, you might be able to rig up a way to maintain a relative URL, but this would not be worth the trouble. Just use an absolute one and be done with it.
[previous suggestions below were posted before the relevant code was posted]
But Google Web Fonts achieves all this by moving the entire style sheet to the cloud. If you can't get it running inside the style sheet, you might try creating a separate style sheet like that instead.
Note, however, that to get true cross-browser compatibility, you need a bunch of different font file formats... this could be the problem. FontSquirrel has a font kit generator you may want to check out for that.