I am trying to use a font from typefront.com. It works in every other browser but the security restrictions in Firefox don't allow using fonts from a different domain.
I've tried creating an .htaccess file and adding the following snippet of code but when I try to load the site I get an internal server error page!
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mydomain.com"
</IfModule>
</FilesMatch>
Here is my CSS code:
#font-face {
font-family: "Gravur-CondensedBold";
src: url("http://typefront.com/fonts/825589026.eot");
src: local("☺"),
url("http://typefront.com/fonts/825589026.woff") format("woff"),
url("http://typefront.com/fonts/825589026.ttf") format("truetype"),
url("http://typefront.com/fonts/825589026.svg") format("svg");
}
#font-face {
font-family: "Gravur-CondensedLight";
src: url("http://typefront.com/fonts/825589027.eot");
src: local("☺"),
url("http://typefront.com/fonts/825589027.woff") format("woff"),
url("http://typefront.com/fonts/825589027.ttf") format("truetype"),
url("http://typefront.com/fonts/825589027.svg") format("svg");
}
Can anybody help me with this?
here's the url: http://www.enjoythisyeah.com
Use a dataURI with a base64 encoded WOFF or SVG font to bypass the same-origin restriction for web fonts.
Related
I'm in a .NET shop; Octopus and TeamCity are used for deploying to our testing and production environments. I added some .WOFF2 fonts to the /_css/fonts folder, and I'm referencing them as follows:
#font-face {
font-family: Roboto;
src: url(/_css/fonts/Roboto-Bold-webfont.eot);
src: url(/_css/fonts/Roboto-Bold-webfont.woff2) format('woff2'), url(/_css/fonts/roboto-bold-webfont.woff), <!-- other fallback fonts -->
The .WOFF2 fonts appear on localhost, but somehow they are being omitted from the build output. What's weird is there is a reference to a .WOFF2 of FontAwesome that is successfully being output. I've checked the properties of the fonts in Visual Studio, and all the new (non-outputting) fonts are set to Copy Always to output directory. Despite all our efforts, we keep getting 404 errors for those fonts.
TIA for any help you can provide!
You can add a MIME type inside the IIS Manager.
Open the "MIME types" in your server Home page (or Home page of your specific
Add ".woff2" with MIME type "font/woff2".
In my case it works with IIS 7.5.
I am an error getting that looks like this in my Google chrome(56.0.2924.87) console while trying to use bootstrap glyphicons
Even though i have my .woff files and .ttf files located in my "public/css/fonts" folder.
Addtional Information
I am using Wampserver with apache(2.4.23)
I installed bootstrap.css with "npm install bootstrap"
This is what my font-face looks like
#font-face {
font-family: 'Glyphicons Halflings';
font-style: italic;
src: url('/public/css/fonts/glyphicons-halflings-regular.eot');
src: url('/public/css/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/public/css/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('/public/css/fonts/glyphicons-halflings-regular.woff') format('woff'), url('/public/css/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('/public/css/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I try to call the glyphicons like this:
<i class="glyphicon glyphicon-chevron-left"></i>
Does anyone have any idea where this problem might be located?
Double check #font-face location path and also the mime type.
I'm currently trying to a) add some non-standard fonts and b) the font-awsome icon library to my project. I've donwloaded the the newest version of FA 4.7.0 on their website.
My project structure is like this:
web
----resources
---- css
---- default.css
---- fonts
---- Raleway-Regular.ttf
---- Roboto-Regular.ttf
---- Questrial-Regular.ttf
---- Poppins-Regular.ttf
---- font-awesome-4.7.0
---- css
---- font-awesome.css
---- font-awesome.min.css
---- fonts
---- fontawesome-webfont.eot
---- fontawesome-webfont.woff
---- fontawesome-webfont.woff2
---- fontawesome-webfont.svg
---- fontawesome-webfont.ttf
---- js
---- default.js
Both fontawesome.css and my default.css file define fonts via #font-face.
Knowing that JSF cannot handle the fonts as a resource without the use of EL, I changed the code of the stylesheet:
font-awesome.css
#font-face {
font-family: 'FontAwesome';
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&v=4.7.0");
src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff2']}&v=4.7.0") format('woff2'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff']}&v=4.7.0") format('woff'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.ttf']}&v=4.7.0") format('truetype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.svg']}&v=4.7.0#fontawesomeregular") format('svg');
font-weight: normal;
font-style: normal;
}
My css file is referencing the fonts as below:
#font-face {
font-family: Railway;
src: url("#{resource['fonts:Raleway-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Questrial;
src: url("#{resource['fonts/Questrial-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: Poppins;
src: url("#{resource['fonts/Poppins-Regular.ttf']}") format("truetype");
}
#font-face {
font-family: "Roboto";
src: url("#{resource['fonts:Roboto-Regular.ttf']}") format("truetype");
}
The fact that I'm using both the ":" and "/" seperator is to test which one's working... apparently none :)
I also added all necessarry MIME type mappings in my web.xml.
In the home.xhtml file, I use these resources like that:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<h:outputStylesheet library="font-awesome-4.7.0" name="css/font-awesome.css" />
<h:outputStylesheet name="css/default.css" />
<h:outputScript name="js/default.js" />
</h:head>
Now after all these configurations, it seems as if the resource handler is not able to load the fonts (my costum and the FA ones) as well as the JavaScript file. The interesting part is that all other styles of the css file are imported correctly. Also it's strange that it worked the exact same way when I booted the server for the first time today - after adding a favicon to the page, it didn't work anymore.
I'm getting notified of the following errors in my browser:
Uncaught TypeError: Cannot read property 'children' of null(…)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0 Failed to load resource: the server responded with a status of 404 (Not Found)
I'd be grateful for any help
Server: Glassfish 4.1.1
Disappointing as this may sound, it was just my browser caching all resources.
After using Ctrl + F5, the browser reloaded the page and all according stylesheets
Generally it turned out to be beneficial to turn off the browser cache while doing web development :-).
Well, I'm using Brunch.io to replace the traditionnal Grunt.js. To perfom the build very fast, I've set on my brunch-config.coffee file, the "native" mode, and I've downloaded all the compass mixins
plugins:
sass:
mode: 'native'
I've not tryed all the compass-mixins, but everything seem's allright, except when I try to include web-font, so adding this on a _font.scss file for exemple :
#include font-face("oxy_reg",
font-files("oxygen-regular-webfont.eot",
"oxygen-regular-webfont.svg",
"oxygen-regular-webfont.ttf",
"oxygen-regular-webfont.woff"
));
result this on the generated css file :
#font-face {
font-family: "oxy_reg";
src: font-files("oxygen-regular-webfont.eot", "oxygen-regular-webfont.svg", "oxygen-regular-webfont.ttf", "oxygen-regular-webfont.woff"); }
but it's not a good css format, the right one (doing by ruby, when I set mode to "ruby" on the brunch-config.coffee) should be this :
#font-face {
font-family: "oxy_reg";
src: url('oxygen-regular-webfont.eot?1422206651') format('embedded-opentype'), url('oxygen-regular-webfont.svg?1422206651') format('svg'), url('oxygen-regular-webfont.ttf?1422206651') format('truetype'), url('oxygen-regular-webfont.woff?1422206651') format('woff'); }
well, I've got no error, but the generated script is not good !
Hope someone get a idea what I'm doing wrong !
see you
I am aware that this question is asked here but I have tried the solutions mentioned to no affect.
My CSS declration looks like:
#font-face {
font-family: gillsans;
src: url('gillsans.TTF');
}
This works in Chrome but not FireFox.
Weirdly enough, I have another site that uses the exact same declaration but with a different font and it works fine:
#font-face
{
font-family: bebas;
src: url('bebas.TTF');
}
Could this have something to do with the actual font file?
I have also tried modifying my .htaccess file as suggested:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Again no results in FireFox.
I have tried changing .TTF to .tff and providing absolute paths to the file, but still nothing.
Can anyone suggest something I can try?
The only possible thing could be is that this site is in development and is thus using a temporary URL, but I dont understand how that could effect it.
Try other font types like eot,woff & svg. To convert you can use http://www.onlinefontconverter.com/
and then try this code in your style or css file:
<style type="text/css">
#font-face {
font-family:'bebas';
src:url('bebas.eot');/*IE9 or later*/
src:local('bebas'),/*check for font installation*/
local('b ebas'),/*check for font installation in some browsers like Safari*/
url('bebas.eot?#iefix') format('embedded-opentype'),/*hack for IE8 or earlier*/
url('bebas.woff') format('woff'),/*new browsers*/
url('bebas.ttf') format('truetype'),/*all browsers excpet IE*/
url('bebas.svg#bebas') format('svg');/*old iOs*/
}
.bebas-ft{
font-family:bebas, Tahoma, Geneva, sans-serif;
}
</style>
And also do not modify your .htaccess file for such simple matter!
So I downloaded another version of Gill Sans (still ttf) and replaced the one I have it that fixed it. Weird.