I am usign dompdf with a custom font family - open sans from google fonts
I hae the font locally and set a CSS font face rule.
On my local env (windows) the font on the PDF is working as expected but on the testing enviroment (Linux) it is not loading the custom font and seems to use default font.
Tried setting it manually, tried installing it by load_font.php script, verifies that the folders are writable.
I am out of ideas and any help would be appreciated.
This is my CSS part:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('/fonts/Open_Sans/OpenSans-Regular.eot');
src: url('/fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/Open_Sans/OpenSans-Regular.svg#OpenSans-Regular') format('svg'),
url('/fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'),
url('http://app.dev.predictix.net/fonts/Open_Sans/OpenSans-Regular.woff') format('woff'),
url('/fonts/Open_Sans/OpenSans-Regular.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
The problem was actually on the CSS Reset code i have on the page.
On the reset code i had:
font:inherit
DomPdf took that as the font family and was searching for a font family of inherit and this is why it was not loading my font. Once i disabled that css reset rule my font was disblayed as needed.
Thanks also to #Ewout that give me some direction here:
https://stackoverflow.com/a/20044474/2022193
Related
I tried to embed fonts in my blogger website, but it didn't work when I tested it on another PC without the font installed on that PC.
This is my blog Address: ann24h.com
My font is locate in another hosting: http://kesor168.com/sub/font/
<style>
#font-face {
font-family: Khmer OS Dangrek;
src: url(http://kesor168.com/sub/font/Khmer_OS_Dangrek.eot);
src: url(http://kesor168.com/sub/font/Khmer_OS_Dangrek.ttf);
}
#font-face {
font-family: Khmer OS Battambang;
src: url(http://kesor168.com/sub/font/Khmer_OS_Battambang.eot);
src: url(http://kesor168.com/sub/font/Khmer_OS_Battambang.ttf);
}
</style>
Any idea how to fix my CSS?
You need your name value pairs to have proper syntax. The font-family property needs "Example Font Name" (single or double quotes are fine) not Example Font Name
You currently only have an .eot and .ttf font files. Which only support IE9 and Safari on Android or iOS. If you have an IE fix for your .eot file then perhaps you'll gain support for IE6 - IE8.
#font-face {
font-family: 'Khmer OS Battambang';
src: url('http://kesor168.com/sub/font/Khmer_OS_Battambang.eot');
src: url('http://kesor168.com/sub/font/Khmer_OS_Battambang.eot?#iefix') format('embedded-opentype'),
url('http://kesor168.com/sub/font/Khmer_OS_Battambang.ttf') format('truetype')
}
To apply it to your entire page:
html, body {
font-family: 'Khmer OS Battambang', sans-serif;
}
I have one example above, you can easily make your other font-face by using the example.
Edit: You asked what line would you add so it would work on Google Chrome
Answer: Add the two lines below
url('Khmer_OS_Battambang.woff2') format('woff2'),
url('Khmer_OS_Battambang.woff') format('woff'),
The 'woff2' applies to really new modern browsers.
The 'woff' applies generally to modern browsers.
Of course you'll need the .woff and .woff2 files in the same directory as your other fonts. Also in the example I provided I only specified the file, you'll need to specify the directory.
I come across this problem all the time where my fonts work in every browser except Firefox. I have multiple sites that use multiple fonts all hosted on the same Cloudfront instance. Searching is pointless because every result is about setting up my CORS settings which work perfectly fine for every other browser and font file.
Currently I have a font file that shows up in the network tab as a 200 request and going directly to the file downloads it for me but I still get
downloadable font: download failed (font-family: "veneerregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://example.com/fonts/CZ/veneer.ttf
in the console.
Here is my #font-face declaration
#font-face {
font-family: 'veneerregular';
src: url('/fonts/CZ/veneer.eot');
src: url('/fonts/CZ/veneer.eot?#iefix') format('embedded-opentype'),
url('/fonts/CZ/veneer.ttf') format('truetype'),
url('/fonts/CZ/veneer.svg#veneerregular') format('svg');
font-weight: normal;
font-style: normal;
}
I have also run this program against the ttf fonts to flip an embeddable flag so they will work in IE http://carnage-melon.tom7.org/embed/
The only solution that seems to work is to provide data-uris for the fonts but that creates HUGE css files which I don't want. Is there something I am missing? where else should I be looking? Seems like every 2 weeks some font stops working on firefox.
So I have an #font-face setup that works in everything but firefox - a common occurance according to google.
Here's the quircky bit. If I set the font-weight to bold (in firebug) it will work, if I set it back to normal it will return.
If I edit the font-face in firebug it will work instantly - even if I put it back to what it was in the first place.
eg:
#font-face {
font-family: PlayBold;
src: url(Play-Bold-webfont.eot);
src: url(Play-Bold-webfont.eot?#iefix) format('embedded-opentype'),
url(Play-Bold-webfont.woff) format('woff'),
url(Play-Bold-webfont.ttf) format('truetype'),
url(Play-Bold-webfont.svg#PlayBold) format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
#testtext {
font-family: PlayBold;
}
Result: Not using the font.
Go into firebug and change anything in the font-face (even just replacing a character with the same character it used to have) and it starts working again.
Why doesn't firefox load the font-face properly in the first place?
Chromium 28, firefox 22.
When Gecko displays a page that uses web fonts, it initially displays
text using the best CSS fallback font available on the user's computer
while it waits for the web font to finish downloading. As each web
font finishes downloading, Gecko updates the text that uses that font.
This allows the user to read the text on the page more quickly.
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face
THINGS TO TRY:
shuffling the font formats around, possibly putting the TTF or WOFF first
removing "font-variant: normal;" from the "#font-face" declaration because it doesn't belong there
properly quote the uri's in your css url(file.ttf) -> url('file.ttf')
~last resort~ use a data uri generator and embed the fonts into the CSS
src: url('data:application/octet-stream;base64,BLAHBLAHBLAH==') format('embedded-opentype'),
I'm facing a weird issue with chrome.
I'm loading a custom font with #font-face:
#font-face {
font-family: 'AlexBrushRegular';
src: url('AlexBrush-Regular-OTF-webfont.eot');
src: url('AlexBrush-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
url('AlexBrush-Regular-OTF-webfont.woff') format('woff'),
url('AlexBrush-Regular-OTF-webfont.ttf') format('truetype'),
url('AlexBrush-Regular-OTF-webfont.svg#AlexBrushRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I've used the Font Squirrel Font Face generator, with the demo page it works well.
But when i put this css and the font in my app (one-page app with require.js) , the page doesn't render. The font is correctly loaded (200 OK on the request) :
I think it's a chrome related issue because it works well with Safari.
I've tried loading my page without local server: file:///www/index.html, and it works in Chrome.
Any inputs appreciated.
Thanks.
Thibault
Seems it's fixed in the current version of Chrome
I'm using a font called Gotham on my new website. It was not font-face ready, so I did that myself. It works fine on my Mac, and works fine too in my Windows machine in Chrome and Safari. But the font is not rendered smooth in IE and FireFox
See the images attached for the difference. (I can't post images yet because I'm a new registered user, so see this link for the screenshot: http://i45.tinypic.com/f35hqq.png
This is how it is set up. I think I did okay, because the fonts are shown in all browsers, just the rendering is not optimal in all of the Windows browsers.
#font-face {
font-family: 'gotham-light';
src: url('../fonts/gotham-light/gotham-light.eot');
src: url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.woff') format('woff'),
url('../fonts/gotham-light/gotham-light.ttf') format('truetype'),
url('../fonts/gotham-light/gotham-light.svg#gotham-light') format('svg'),
url('../fonts/gotham-light/gotham-light.eot?#iefix') format('embedded-opentype');
}
Is there any way to fix this? Maybe a jQuery solution or something?
Have you included all necessary font types? Each browser recognizes different font formats. If you converted the font for use on the web using a service such as Font Squirrel: http://www.fontsquirrel.com/ then you should have been provided with each font type as well as some example CSS (below) to plug in. Make sure to include each format in your #font-face selector to optimize the font across all browsers:
#font-face {
font-family: 'gotham';
src: url('../font/gothamfont.eot');
src: url('../font/gothamfont.eot?#iefix') format('embedded-opentype'),
url('../font/gothamfont.svg') format('svg'),
url('../font/gothamfont.svg#gotham') format('svg'),
url('../font/gothamfont.woff') format('woff'),
url('../font/gothamfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope this helps! Gotham is a great font :)
EDIT: Windows has some issues with displaying fonts properly. I use Mac OS and Windows on a regular basis and notice many inconsistencies. I think you've done all you can do without intervention from the major browsers. Good luck!