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;
}
Related
I have a problem. I try to import and use a font(Rubik from google fonts) but i want it to be imported from folder, not google fonts.
Here is my code
CSS
#font-face {
font-family: "Rubik";
src: url("/Rubik-VariableFont_wght.ttf") format("truetype") tech("variations"),
url("/Rubik-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 300 800;
}
html {
font-size: 62.5%;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
color: var(--color-blue-dark);
}
And here is a screenshot of what is showing on browser
I tried to compress font to woff2 to match the google fonts instructions to make it work, but it didn`t
The solution i got was to add second url to a stand alone src like this
#font-face {
font-family: "Rubik";
src: url("/Rubik-VariableFont_wght.ttf") format("truetype") tech("variations"),
src: url("/Rubik-VariableFont_wght.ttf") format("truetype-variations");
font-weight: 300 800;
}
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'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?
I am trying to load a font from a folder using sass like so:
#font-face {
font-family: "myFont";
font-style: normal;
font-weight: 300;
src: url("/wwwroot/assets/fonts/sampleFont.otf") format("embedded-opentype")
}
h1 {
font-family: "myFont";
font-style: normal;
font-weight: 300;
color:#fff;
}
The problem is that I can't see the font been applied (i am currently using chrome and I have also tested it on Edge without success)
The path seems correct else webpack would have failed the build.
Is there anything I am missing or misunderstood?
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;
}