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.
Related
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/
I'm using for a website the font Oxygen via GoogleFont. However, for webdesign purpose, I downloaded in my computer the Oxygen font via FontSquirrel.
Apparently it's the same, but it looks different and I have size issues. So I was thinking:
Is there a way to declare "I want to use the GoogleFont font and not the font stored in the computer even if it has the same name"?
Because if someone has a totally different font with the same name, there could be a lot of display problems.
EDIT: What about downloading the font on Google's server and hosting it on my website? (The font is 100% free for commercial use.) But why do a lot of websites use Google Fonts if it could be that simple?
If you have the web fonts you could host yourself and give them any name you want in the css and avoid the potential of the local font loading.
For example:
#font-face {
font-family: 'myspecialfont';
src: url('oxygen-webfont.eot');
src: url('oxygen-webfont.eot?#iefix') format('embedded-opentype'),
url('oxygen-webfont.woff2') format('woff2'),
url('oxygen-webfont.woff') format('woff'),
url('oxygen-webfont.ttf') format('truetype'),
url('oxygen-webfont.svg#oxygenregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {font-family: "myspecialfont", sans-serif;}
Just make sure you're pointing the CSS to the correct path for those files (e.g. if you put them in a fonts folder it'd could be "../fonts/oxygen-webfont")
The main reason people use google is they've optimized it for serving fonts, it takes load off your server, and potentially people have the font cached from google making it load faster. If it's an uncommon font and your server is decent these may negligible.
I am attempting to use the map-icons package which uses the following css to fetch and load a few font files. As far as I can tell, the path (including the ..) is fine.
#font-face {
font-family: 'map-icons';
src:url('../fonts/map-icons.eot');
src:url('../fonts/map-icons.eot#iefix') format('embedded-opentype'),
url('../fonts/map-icons.ttf') format('truetype'),
url('../fonts/map-icons.woff') format('woff'),
url('../fonts/map-icons.svg#map-icons') format('svg');
font-weight: normal;
font-style: normal;
}
https://github.com/scottdejonge/map-icons/blob/master/dist/css/map-icons.css
I'm testing this locally with Django's dev server. I include the css in my html with a standard <link>. Based on the Network tab in the Chrome inspector, the css file is being fetched successfully. However, I do not observe any network requests for any of the fonts (successful or unsuccessful). Likewise, the fonts don't work.
The fact I'm not seeing any attempt to request the fonts makes me think there is something wrong with the css? Also to clarify, the fonts are in the corresponding directory relative to the location of the css file. Though regardless, I would expect requests to be made for the fonts even if it were to incorrect URLs.
EDIT: I'm noticing that if I use the font in some css block i.e. by adding font-family: map-icons; to some css block, both Chrome and Firefox will successfully request map-icons.ttf. Unfortunately, the font still does not work in the context of what the map-icons package is meant to do. But that could be for entirely different reasons. Does this observation make sense and, if so, can someone explain why these two browsers choose to work that way?
I believe the fonts were not being fetched because the font was not being used in any way that would cause the font to be rendered. Thus, my assumption that not seeing any of the fonts fetched in the Chrome network inspector implied that the code responsible for fetching those fonts was buggy, was incorrect. Chrome merely decides not to fetch the font(s) when they are not to be rendered.
One thing to note is that, based on this experience, Chrome will load only one of the fonts specified in the #font-face block. In this particular case, Chrome chose to load the .ttf font.
For more information on how I fixed the actual problem I encountered with this package, see the following GitHub issue:
https://github.com/scottdejonge/map-icons/issues/33
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.