I'm using the default Sass/Bourbon mixin font-face.scss but the generated css is wrong, for some reason nesting the body tag under #font-face. I have no errors when it generates the CSS but the fonts aren't showing of course.
Any ideas?
CSS output:
#font-face {
body {
font-family: AgencyFB Regular;
font-weight: normal;
font-style: normal;
src: url("../../fonts/agency/agencyfb_regular.eot");
src: url("../../fonts/agency/agencyfb_regular.eot?#iefix") format("embedded-opentype"),
url("../../fonts/agency/agencyfb_regular.woff") format("woff"),
url("../../fonts/agency/agencyfb_regular.ttf") format("truetype"),
url("../../fonts/agency/agencyfb_regular.svg#AgencyFB Regular") format("svg");
}
}
SCSS:
body {
#include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");
font: $body-font-size;
line-height: $body-line-height;
}
Cimmanon's link pointed me in the right direction for a fix. Thanks!
Basically I moved the #include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular"); outside of any css tag (ie: body).
Then included a font-family: AgencyFB Regular in the body tag.
Like this:
#include font-face(AgencyFB Regular, "fonts/agency/agencyfb_regular");
body {
font-family: AgencyFB Regular;
font: $body-font-size;
line-height: $body-line-height;
}
Related
I am trying to generate a PDF that will contain Chinese characters using dompdf and hence I downloaded the font package and added the following code in my blade.php.
#font-face {
font-family: 'simhei';
font-style: normal;
font-weight: normal;
src: url('{{base_path().'/public/fonts/'}}'simhei.ttf) format('truetype');
}
body {
font-family: 'simhei', 'DejaVu Sans', sans-serif;
}
Next, I tried the API again with Postman. The response body shows square boxes as shown below.
But if I highlighted the text, it shows the Chinese characters.
If I save the response as a file in Postman, it also shows square boxes instead of Chinese characters when I opened it in WPS Office.
I have also tried with other font packages including Firefly Sung and msyh. All give the same result.
Try this:
#font-face {
font-family: 'Firefly Sung';
font-style: normal;
font-weight: 400;
src: url(http://eclecticgeek.com/dompdf/fonts/cjk/fireflysung.ttf) format('truetype');
}
* {
font-family: Firefly Sung, DejaVu Sans, sans-serif;
}
So i have just recently upgraded to the latest bourbon (4.0.2 and sass (3.4.8). Since doing this, the font-face mixin outputs the src surrounded by double quotes, which is invalid and is breaking by fonts.
#include font-face('Avenir', '../fonts/avenir/avenir-regular');
Expected result (no double quotes around src):
#font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype');
src: url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/avenir/avenir-regular.woff') format('woff'), url('../fonts/avenir/avenir-regular.ttf') format('ttf'), url('../fonts/avenir/avenir-regular.svg#avenir') format('svg');
}
Output (double quotes around src):
#font-face {
font-family: "Avenir";
font-weight: normal;
font-style: none;
src: "url('../fonts/avenir/avenir-regular.eot') format('embedded-opentype')";
src: "url('../fonts/avenir/avenir-regular.eot?#iefix') format('embedded-opentype')", "url('../fonts/avenir/avenir-regular.woff') format('woff')", "url('../fonts/avenir/avenir-regular.ttf') format('ttf')", "url('../fonts/avenir/avenir-regular.svg#avenir') format('svg')";
}
The font-face mixin is as follows (see annotated line):
#mixin font-face(
$font-family,
$file-path,
$weight: normal,
$style: normal,
$asset-pipeline: $asset-pipeline,
$file-formats: eot woff ttf svg) {
$font-url-prefix: font-url-prefixer($asset-pipeline);
#font-face {
font-family: $font-family;
font-weight: $weight;
font-style: $style;
#if contains($file-formats, eot) {
// THIS IS THE TROUBLE LINE
src: "#{$font-url-prefix}('#{$file-path}.eot') format('embedded-opentype')";
}
src: font-source-declaration(
$font-family,
$file-path,
$asset-pipeline,
$file-formats,
$font-url-prefix
);
}
}
Is anyone else able to replicate this?
Any ideas are really appreciated.
For some reason my #font-face isn't working.
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf');}
I'm trying to use it for my navigation links
#nav a {
font-family: "Manteka", Verdana, Tahoma;}
Quick folder layout
My CSS file is in a 'css' folder inside 'www'
index file is located in 'www'
font file is inside 'fonts' folder inside 'www'
Downloaded the files from another source and used this
#font-face { /* The manteka Font, use it by call font-family directly */
font-family: 'manteka';
src: url('../fonts/manteka.eot'); /* For IE */
src: url('../fonts/manteka.ttf') format('truetype'), /* For Chrome and Safari */
url('../fonts/manteka.woff') format('woff'); /* For FireFox */}
Works fine now, thanks for the help
Did you try adding format('truetype')
#font-face{
font-family: "Manteka";
src: url('../fonts/manteka.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Also, try dropping the quotes on the usage:
#nav a {
font-family: Manteka, Verdana, Tahoma;}
I have an issue with #Fontface via MyFonts for ProximaNova... Only in firefox and for some weights.
As you can see by the screenshot my fonts are not loading in firefox but have no problem in Safari and in Chrome. I've also noticed, on another page where I have multiple weights, some work, others do not. I have no altered the font face css file that was generated for me, other then adding font-weight/style to normal.
#font-face {font-family: 'ProximaNovaS-Extrabld';src: url('../webfonts/278301_2_0.eot');src: url('../webfonts/278301_2_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_2_0.woff') format('woff'),url('../webfonts/278301_2_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Semibold';src: url('../webfonts/278301_6_0.eot');src: url('../webfonts/278301_6_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_6_0.woff') format('woff'),url('../webfonts/278301_6_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Extrabld';src: url('../webfonts/278301_F_0.eot');src: url('../webfonts/278301_F_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_F_0.woff') format('woff'),url('../webfonts/278301_F_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Regular';src: url('../webfonts/278301_13_0.eot');src: url('../webfonts/278301_13_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_13_0.woff') format('woff'),url('../webfonts/278301_13_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Bold';src: url('../webfonts/278301_14_0.eot');src: url('../webfonts/278301_14_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_14_0.woff') format('woff'),url('../webfonts/278301_14_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNovaS-Bold';src: url('../webfonts/278301_7_0.eot');src: url('../webfonts/278301_7_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_7_0.woff') format('woff'),url('../webfonts/278301_7_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
#font-face {font-family: 'ProximaNova-Semibold';src: url('../webfonts/278301_12_0.eot');src: url('../webfonts/278301_12_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/278301_12_0.woff') format('woff'),url('../webfonts/278301_12_0.ttf') format('truetype'); font-weight: normal; font-style: normal; }
Here is a sample of the bigger text style
h1 { color: #ff6500; display: inline; font-family: 'ProximaNova-Semibold'; font-size: 34pt; letter-spacing: 1px; line-height: 42pt; text-align: left; text-transform: uppercase; }
I've tried to do some tests... as far as putting the same markup and style of working weights (in firefox) in the the same page as shown in the screen shot, which then doesn't work. So I'm stumped.
Thank you for your help.
---------- Update -----------
It seems for the most part Firefox is displaying the fonts correctly. However as you can see in the top window (firefox) the text different from the the bottom (Safari) This is really stumping me... http://postimg.org/image/vftkepyw1/
Font files do not exist at the specified path.
I believe you where just not linking to the specified font.
The above link http://www.chezvalois.com/test/index.html is now showing all proxima nova fonts in my Firefox.
I believe this is now fixed.
I am using three different fonts. Here is my #fontface
#font-face {
font-family: 'Mikadan-Regular';
src: url('../fonts/mikadan/eot/style_134713.eot');
src: url('../fonts/mikadan/eot/style_134713.eot?#iefix') format('embedded-opentype'),
url('../fonts/mikadan/woff/style_134713.woff') format('woff'),
url('../fonts/mikadan/ttf/style_134713.ttf') format('truetype'),
url('../fonts/mikadan/svg/style_134713.svg#Mikadan-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSans500';
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot');
src: url('../fonts/museosans_500/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.woff') format('woff'),
url('../fonts/museosans_500/MuseoSans_500-webfont.ttf') format('truetype'),
url('../fonts/museosans_500/MuseoSans_500-webfont.svg#MuseoSans500') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'MuseoSlab500';
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot');
src: url('../fonts/museoslab_500/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.woff') format('woff'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.ttf') format('truetype'),
url('../fonts/museoslab_500/Museo_Slab_500-webfont.svg#MuseoSlab500') format('svg');
font-weight: normal;
font-style: normal;
}
The first and the third work fine.
The second one is specified for the body tag as:
body, button, input, select, textarea {
font: 16px/1.625 MuseoSans500 "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
_font-size: 1em;
color: #333;
}
This works perfectly fine in Chrome and Safari
However, in Opera 11.50 and Firefox 4.0.1, bad news; the entire font stack does not work, and the font is rendered as plain old serif (yuck!)
I think the problem is with Museo,as when I take Museo out of the font stack it renders correctly.
I'm using these browsers on Windows 7.
You're missing a comma.
font: 16px/1.625 MuseoSans500 "Lucida Grande"
font: 16px/1.625 MuseoSans500, "Lucida Grande"
^^^ add this comma
Although you are missing that comma now, based on what you said, you were having problems with the MuseoSans500 font for body text. When you removed it you were fine. I think the comma is missing now that you are showing us your code.
I would try setting font-family to one choice at a time and see what happens. I would also separate the font-size and line-height just in case thereby isolating the problem, like so:
body, button, input, select, textarea {
font-family: MuseoSans500; /* start with this one by itself */
font-size: 16px;
line-height: 1.625;
color: #333;
}