I have some #font-face webfonts on my site. The fonts and the CSS code is generated via the Font Squirrel #font-face generator. None of the fonts I embedded are showing in FF 3.5. FF 4 is working without a problem. The fonts are served from the same domain as the calling website. ATM I'm calling the website on a local network via local area IP.
#font-face {
font-family: 'ArvoBold';
src: url('font/arvo-bold-webfont.eot');
src: url('font/arvo-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/arvo-bold-webfont.woff') format('woff'),
url('font/arvo-bold-webfont.ttf') format('truetype'),
url('font/arvo-bold-webfont.svg#ArvoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
From: CSS #font-face not working with Firefox, but working with Chrome and IE
You could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>`
Also
https://developer.mozilla.org/En/HTTP_Access_Control
http://wordpress.org/support/topic/plugin-w3-total-cache-font-face-not-working-in-firefox
Related
My sass has has a font.scss file which has the following
#font-face {
font-weight: 400;
font-style: normal;
font-family: "TT Norms Pro Regular";
src: local("TT Norms Pro Regular"), url("TT Norms Pro Regular.woff") format("woff");
}
And the fonts live in the same directory as the sass file. Example being;
/05_fonts
- fonts.scss
- TT Norms Pro Regular.woff
My main scss imports the above fonts.scss.
My issue is that a fonts folder created at the root of the directory and not in dist/assets/fonts/ where I need it to be.
From researching the issue I found that I can add mix.config.fileLoaderDirs.fonts = 'dist/assets/fonts'; to my webpack.mix.js file. This does pull the fonts into dist/assets/fonts/. But the resulting css is then;
#font-face {
font-weight: 400;
font-style: normal;
font-family: "TT Norms Pro Regular";
src: local("TT Norms Pro Regular"), url("/dist/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf") format("woff");
}
Which isn't correct, it needs to be url("/assets/fonts/TT Norms Pro Regular.woff?2dbc9dffb1b3db6d23806b49fc286edf")
Upon adding mix.setResourceRoot('dist') and then making mix.config.fileLoaderDirs.fonts = '/assets/fonts';. Creates a assets/fonts folder in the root. Again not correct.
How can I get the fonts into dist/assets/fonts with the correct css url("/dist/assets/fonts/TT Norms Pro Regular.woff")?
Worked it out…
mix.setPublicPath('dist');
mix.setResourceRoot('/');
I have a laravel project where I am using single view components. I have a global.scss file where I have code below to include my fonts which are placed in public/fonts folder. In the style section of each vue component , I am using #import '../../css/global.scss'; to import the global.scss file but the fonts still dont seem to be usable. Am I doing anything wrong with this setup?
#font-face {
font-family: 'Testing-Font';
src: url('/public/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/public/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/public/fonts/Avenir-Book.tff');
}
assuming public is the director from which the web page is served, you should probably omit it from the font files paths:
#font-face {
font-family: 'Testing-Font';
src: url('/fonts/Avenir-Black.tff');
}
#font-face {
font-family: 'Avenir-Light';
src: url('/fonts/Avenir-Light.tff');
}
#font-face {
font-family: 'Test-Fontname';
src: url('/fonts/Avenir-Book.tff');
}
to see if something went wrong with the loading process, open the network tab of your favored browser's dev-tools, and look for 40x errors.
if the issue persist (and stems from 404 errors), try and use a relative path for the font files, to avoid any unknowns when your build system resolves the root path (/).
also, depending on the use case (library/application) i would include it in the entrypoint file, so any component could use it.
Either your font files have wrong extension or you just typed extension wrong in CSS. It should be ttf, not tff.
I'm using Rails 4 with Sass, and I'd like to use a custom font.
How do I use #font-face with Sass if the asset pipeline in Rails 4 is no longer utilized? I can't find anything online about how to do this.
Also, most of what I do find refers to "config.rb," but I only have "config.RU" Is there a difference?
(I'm newish to Rails so please try to be unambiguous/don't refer to things that have antecedents somebody newish to Rails wouldn't recognize)
Thanks everybody!
Do you mean you do not have assets pipeline? If so, you can serve your fonts via "public" folder.
Create a directory in public: "public\fonts"
Copy your fonts there
In your css, declare the font and its location:
#font-face {
font-family: 'robotolight';
src: url('/fonts/Roboto-Light-webfont.eot');
src: url('/fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/Roboto-Light-webfont.woff') format('woff'),
url('/fonts/Roboto-Light-webfont.ttf') format('truetype'),
url('/fonts/Roboto-Light-webfont.svg#robotolight') format('svg');
font-weight: normal;
font-style: normal;
}
Of course if you are organizing different fonts in different folders, you will need to indicate them as well, eg:
url('/fonts/roboto-light/Roboto-Light-webfont.eot');
Hope it helps.
Haven't some issues with the cross-browsers with the icon replacement fonts on Firefox, currently only show-up the content text but not the icomoon text replacement. Source code shown from code Sass + Magento + .htaccess, any idea or help would be much appreciated.
Website:
http://www.phoebessecret.co.nz
Had done .htaccess rewrite:
AddType image/svg+xml svg svgz
AddEncoding gzip svgz
AddType application/vnd.ms-fontobject eot
AddType font/truetype ttf
AddType font/opentype otf
AddType application/x-font-woff woff
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz"
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz"
</IfModule>
</FilesMatch>
CSS:
#font-face {
font-family: 'topshops';
src:url('../fonts/topshops.eot');
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'),
url('../fonts/topshops.svg#topshops') format('svg'),
url('../fonts/topshops.woff') format('woff'),
url('../fonts/topshops.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
.icon-fonts {
font-family: 'topshops';
font-style: normal;
speak: none;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-weight: 400;
}
.iconsearch {
content: "\61";
}
Try to add this to your .htaccess file.
It should fix your issue. It fixed mine.
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
I was having issues with icomoon and Firefox as well. Have you tried Paul Irish's 'bulletproof' #font-face syntax? It's a little different than what icomoon outputs and I've had better luck with it - no FF issues since.
#font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}
I had the same problem (with a Wordpress installation), icomoon icons were not showing in Firefox. Chrome, Safari, IE worked fine.
After the Site was up and running, the client asked me to include www to the url, instead of just http://. So I changed the blog Adress, but not the Wordpress Adress (in the Wordpress Dashboard). Suddenly all Icomoon Icons were gone. After adding www to the Wordpress address, the icons were back.
There are two things you may try. I used both and it worked for me.
Use full links in in your CSS file to reference icomoon. Your .htaccess may be rewriting the URL. Secondly add the following in .htaccess file just as webkub pointed out.
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you're running IIS, you'd want to modify your web.config and probably add the httpProtocol section as shown below:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
I'm having a problem with #font-face. It actually works flawlessly on Safari, internet explorer 7+ and Firefox for windows but not at all on firefox for mac.
I'm using code from the bulletproof #font-face article
Here's my Code:
#font-face {
font-family: "QlassikMediumRegular";
src: url("../fonts/Qlassik_TB.eot");
src: local("Qlassik Medium Regular"), local("QlassikMedium"), url("../fonts/Qlassik_TB.ttf") format("truetype")
}
#font-face {
font-family: "QlassikBoldRegular";
src: url("../fonts/QlassikBold_TB.eot");
src: local("Qlassik Bold Regular"), local("QlassikBold"), url("../fonts/QlassikBold_TB.ttf") format("truetype")
}
Here is the link to my site in question: link text
I typically use a more extended #font-face declaration:
#font-face {
font-family: 'TypewriterOldstyle';
src: url('../fonts/typeo-webfont.eot');
src: url('../fonts/typeo-webfont.eot?#iefix') format('eot'),
url('../fonts/typeo-webfont.woff') format('woff'),
url('../fonts/typeo-webfont.ttf') format('truetype'),
url('../fonts/typeo-webfont.svg#webfonty9r23iiq') format('svg');
font-weight: normal;
font-style: normal;
}
You could try generating at http://www.fontsquirrel.com/fontface/generator
Had the same problem, font's gave 301 error saying i did not have access to the font file.
What works best for me is placing the font file's in the same directory as the .css file, no hassle with anny .htaccess or other server config file's.
So i have one external fonts.css file containing all the css font line's within the font directory. Then i can include this .css file on the page i would like to use this font. Make sure you don't make additional directory's so you can call the font without anny directory.
more info: https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face