I'm trying to show some Chinese characteres in my PDF; but it is proving much more complicated than I had imagined.
I'm using the vendor laravel-dompdf and I tried with a lot of fonts like: Fyrefly Sung, SimHei, SimSun, Unifont as follow:
#font-face {
font-family: SimHei;
src: url('{{base_path()."/public/assets/fonts/fireflysung.ttf"}}') format('truetype');
}
.chinese{
font: Arial 14px;
line-height: 16px;
font-family: Firefly Sung;
}
As well with a CDN:
#font-face {
font-family: 'Firefly Sung';
font-style: normal;
font-weight: 400;
src: url(http://foo.bar/fireflysung.ttf) format('truetype');
}
.chinese{
font: Arial 14px;
line-height: 16px;
font-family: Firefly Sung;
}
Example:
<span class="chinese">不含弹性织物</span>
But I can't get it work, since my PDF shows other chinese characters:
ゴム部を除く
I have solved my problem:
I remove the call of the output() method before call stream():
// $pdf->output();
return $pdf->stream($myPDFName);
And now works as expected.
Related
I am trying to load the "Inspiration-Regular.tff" font from theme.js.
The url is correct.
I am then setting the "Inspiration-Regular.tff" as body's font-family in line 137 as shown in the below's code
Upon inspecting the element - it does state that the "font-family" has been updated (as shown below) but the same visual default font appears. Why isn't the font changing?
A snippet of how inspiration-regular should appear.
Your #font-face rule has an error specifying the format:
The correct format value for truetype fonts is format('truetype').
Most modern browsers can also load the font without any format specified.
However, I recommend to add this value for best compatibility.
/* works */
#font-face {
font-family: 'FiraCorrect';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('truetype');
}
/* won't work */
#font-face {
font-family: 'FiraIncorrect';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf) format('ttf');
}
/* won't work */
#font-face {
font-family: 'FiraInDifferent';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firasans/v16/va9E4kDNxMZdWfMOD5Vvl4jO.ttf);
}
.correct {
font-family: 'FiraCorrect';
font-weight: 400;
}
.inCorrect {
font-family: 'FiraIncorrect';
font-weight: 400;
}
.inDifferent {
font-family: 'FiraInDifferent';
font-weight: 400;
}
<p class="correct">Correct #font-face: format(truetype)</p>
<p class="inCorrect">Incorrect #font-face: format(ttf)</p>
<p class="inDifferent">Incorrect #font-face: no format specified</p>
So I downloaded a font (legally I bought it)
and the font looks really good. but it only displays in the brackets live preview.
when I open it in chrome, it just refuses to work. I followed all the instructions on the font when I bought it. Can anyone help me?
This is an image of the bracket font display which is what I want:
And this is the exact same code when I open the index.html file in Google Chrome.
This is the code I am using to get the font in CSS
#font-face{
font-family:"Ethnocentric W05 Italic";
src:url("/fonts/MTI-WebFonts-367222846/Fonts/5118942/e91f32ff-44ec-47c0-afd3-5cdeeb6c73c8.woff2")
format("woff2");
}
and this is what I used to put it in the header
font-family: "Ethnocentric W05 Italic";
If you declare a custom font using #font-face, the browser will try to fake the bold and italic styles if it can’t find them.
Instead of defining separate font-family values for each font, You can use same font-family name for each font, and define the matching styles, like so:
[css]#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-R-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-I-webfont.eot');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-B-webfont.eot');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'Ubuntu';
src: url('Ubuntu-BI-webfont.eot');
font-weight: bold;
font-style: italic;
}
.test {
font-family: Ubuntu, arial, sans-serif;
}[/css]
Then all you need to do is apply that single font-family to your target, and any nested bold or italic styles will automatically use the correct font, and still apply bold and italic styles if your custom font fails to load.
My custom font (Gilroy, purchased on myfonts) is having issues across browsers. The font is thicker and bigger in Chrome than on other browsers.
The font size is the same, but your letters in Chrome are bolder than in Firefox. That's because you are importing your fonts wrong.
Currently you are using:
#font-face {
font-family: "Cobury Regular";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: "Cobury Bold";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: 400;
font-style: normal;
}
... {
font-family: "Cobury Regular";
}
... {
font-family: "Cobury Bold";
}
But the correct way would be:
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "Cobury";
src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
font-weight: bold;
font-style: normal;
}
... {
font-family: "Cobury";
font-weight: normal;
}
... {
font-family: "Cobury";
font-weight: bold;
}
Always use font with their actual font-weight. Don't treat the same font with different weight and style like different fonts.
Your .woff font files have implemented meta tags inside, which telling the browser what thickness the letters have. If the provided font-weight in the import statement #font-face doesn't match with that, browsers will treat that differently, because there is no standard for that. (Chrome tries to handle the situation by adding a additional thickness to the already bold font, for whatever reason.)
Edit:
I'm seeing that you use h1, .text-logo #logo { font-weight: 900; ... in your CSS but you have never defined the font with the weight number 900. Please use only the weights you have provided via #font-face. (With my suggestion it would be normal and bold)
I am using Sass for my project and I am getting this error on my home page while importing fonts from my custom fonts folder of Merriweather.The problem is that when i check the network tab on chrome it shows that Agenda font file is included but not the merriweather font file.Both Agenda and Merriweather fonts are in separate folders.
Error :
**http://localhost/project-name/fonts/Merriweather/Merriweather-Italic.tff net::ERR_ABORTED 404 (Not Found)**
My Project folder structure in like this:
project-folder/fonts-folder/Merriweather-folder/All fonts of Merriweather here
project-folder/fonts-folder/Agenda-folder/All fonts of Agenda here
project-folder/scss-folder/partials-folder/global.scss
project-folder/scss-folder/variables.scss
QUESTIONS:
I want to know the is my syntax right for importing multiple fonts
from the same font family like Merriweather ?
what exactly i am doing wrong in variables.scss ??
Please help me to resolve this issue.
Code in Variables.scss
#font-face {
font-family: Agenda;
font-weight: 500;
font-style: normal;
src: url("../fonts/Agenda/Agenda-Medium.otf") format("opentype");
}
#font-face {
font-family: Merriweather-Italic;
font-weight: normal;
font-style: italic;
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
#font-face {
font-family: Merriweather-Regular;
font-weight: normal;
font-style: normal;
src: url("../fonts/Merriweather/Merriweather-Regular.tff") format("truetype");
}
This is how i am using fonts in globals.scss
#import "../variables";
body{
font-family: Merriweather-Regular;
font-size: 22px;
background-color: $white;
}
h1{
font-family: Merriweather-Italic;
font-style: italic;
font-size: 94px;
}
h2{
font-family: Merriweather-Regular,Merriweather-Italic;
font-size: 42px;
}
h3{
font-family: Agenda;
font-size: 30px;
}
h4{
font-family: Merriweather-Regular;
font-style: bold;
font-size: 27px;
}
h5{
font-family: Merriweather-Regular;
font-size: 26px;
}
To be sure I would have to see a screenshot of your fonts folder, but I think the font isn't found because of typo in the font-face declaration. True-type font files usually have a .ttf extension instead of .tff.
That means you would have to adjust your #font-face declaration from:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.tff") format("truetype");
}
to:
#font-face {
// omitted font-family, weight and style for clarity
src: url("../fonts/Merriweather/Merriweather-Italic.ttf") format("truetype");
}
At this point, so in variables.scss, I usually also declare a font variable for each font (type) for usage in the rest of my SASS files, e.g $merriweather--italic: "Merriweather-Italic", serif;
Therefore you can use these variables in your global.scss as such:
h1{
font-family: $merriweather--italic;
font-size: 94px;
}
I'm trying to use #font-face, but I'm not being very successfull.
Up till now, I've been using Google fonts:
// HTML header
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
//CSS
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
Then I downloaded the fonts and tried using font-face:
This is my CSS:
#font-face {
font-family: 'Cuprum';
font-weight: normal;
font-style: normal;
font-size: 0.5em;
src: url('cuprum.eot?') format('eot'),
url('cuprum.woff') format('woff'),
url('cuprum.ttf') format('truetype'),
url('cuprum.svg#Cuprum') format('svg');
}
#leftSection nav {
font-family: "Cuprum", Verdana, Arial, sans-serif;
}
The fonts are located in the same folder as the CSS.
I've looked at, and tested oteher solutions, but I'm still not able to get it wokring.
I'm testing with the following browsers: FF7, IE8
Update
I've added font-size: 0.5em; This should at least change the font size. But that's not happening either. So I'm guessing the entire #font-face is ignored.
Did you try using the Font Squirrel generator? Just upload the font and it will do everything for you, it's real simple.
Here is the link:
http://www.fontsquirrel.com/fontface/generator
Hey Steven are you done with this?
Why dont you try this out.
insert this inside your css:
#font-face {
font-family: 'Cuprum';
font-style: normal;
font-weight: normal;
src: local('Cuprum'), url('http://themes.googleusercontent.com/static/fonts/cuprum/v1/sp1_LTSOMWWV0K5VTuZzvQ.woff') format('woff');
}
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
i hope it will work. :)
I think you could try it without the quotes around "Cuprum".
#leftSection nav {
font-family: Cuprum, Verdana, Arial, sans-serif;
}
Also, there is sometime an issue if you/the user have that font installed locally.
To get around that, you can set a fake local reference.
See Paul Irish's Bulletproof #font-face syntax
EDIT
Two other things you might try:
change the font name to lowercase, cuprum.
Remove the following from the declaration:
font-weight: normal;
font-style: normal;
font-size: 0.5em;