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
Related
I just upgraded to laravel 8 and needed to build a website using fonts. I've downloaded the fonts and put them in the resources folder in a fonts folder. After that i added them to my css, but it doesn't seem to work. Am i missing a step, does it need to be compiled bij webpack first? What am i doing wrong?
Fonts:
https://fontsgeek.com/fonts/Jot-Regular
https://fonts.google.com/specimen/Roboto
style.scss:
#font-face {
font-family: JotRegular;
src: local('/fonts/JotRegular.ttf');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: Roboto;
src: local('/fonts/Roboto-Regular.ttf');
font-weight: normal;
font-style: normal;
}
h2{
font-size: 2.2rem;
font-family: JotRegular;
}
Using local for loading fonts bypasses font compilation in webpack. So the fonts will not be automatically copied in to public folder and fonts must be copied manually in the proper path, Which is not recommended. To enable auto font manipulation you can use this:
#font-face {
font-family: JotRegular;
src: url('../fonts/JotRegular.ttf'); // remember that font file path must be relative to the current css file. not the final compiled folder
font-weight: normal;
font-style: normal;
}
This way webpack automatically copy font file to the final compiled directory in public. In addition automatic file version control will be take place this way.
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'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.
sorry could be a silly one, but I can't use #font-face with multiples, I have 3 .ttf files saved in the folder 'fonts'
#font-face
{
font-family:'sansation';
src: url('fonts/Sansation_light.ttf') format('truetype');
}
p
{
text-align:left;
font-family:'sansation';
font-size:16px;
}
The above works fine, but when I do the same thing with the others:
#font-face
{
font-family:'ttf_outwrite';
src: url('fonts/outwrite.ttf') format('truetype');
}
a
{
font-size:20px;
font-family:'ttf_outwrite';
}
...it doesn't seem to link at all. Is this possible with multiples .ttf files?
If you want to try to replicate the issue, the fonts can be downloaded in a few seconds from http://www.fontspace.com/ttf.
Any help appreciated.
Thanks,
I've been having the same problem with .ttf files working for some fonts but not others. My solution is a work around in that I converted the font to the woff file type:
#font-face {
font-family: "trade";
src: url(/static/common/fonts/trade-gothic-bold.ttf) format("truetype"), url(/static/common/fonts/trade-gothic-bold.eot) format("embedded-opentype"), url(/static/common/fonts/trade-gothic-bold.woff) format("woff");
}
I know this doesn't solve the root problem and was hoping someone had a better answer. My .ttf file is not corrupt because I converted my .woff from it. My thinking is that there has to be something in these non-working .ttf files that make them uninterpretable to the browsers, but not corrupt.
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