I'm using a variable font, and it is working correctly on Chrome (Version 97.0.4692.71) and Firefox (96.0.2) but not on Safari (15.1).
On CSS, I'm importing the font like this:
#font-face {
font-family: 'Bild V3 Variable Web';
font-style: normal;
src: url('fonts/BildVariableV3-VF.woff2') format('woff2-variations'),
url('fonts/BildVariableV3-VF.woff2') format('woff2');
font-weight: 100 900;
}
And using it like this:
h2 {
font-family: Bild Variable V3;
font-variation-settings: "wght" 300;
font-size: 72px;
color: $white;
}
Does anyone have a clue on why this is happening?
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>
I have tried both ttf and woff formats with multiple different fonts across chrome, firefox, and edge but it doesn't seem to apply any font no matter what i do. Everything else in the style sheet is referenced perfectly fine besides #font-face. I've checked directory and syntax error but as far as i can see there are none.
.
.
body {
background-color: black;
color: #B0C1B4;
}
p {
font-family: font !important;
font-weight: 100;
}
#log {
width: 65%;
}
#font-face {
font-family: 'font';
src: url(data/fonts/font.ttf) format(ttf),
url(data/fonts/font.woff) format(woff);
font-style: normal;
font-weight: 100;
}
You're defining the wrong path here.
Path must be like this:
#font-face {
font-family: 'font';
src: url(data/fonts/font.ttf) format(ttf),
url(data/fonts/font.woff) format(woff);
font-style: normal;
font-weight: 100;
}
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 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.