I have a react.js app up and running. I wanted to change the font to Galano Grotesque Bold. I downloaded the files and followed the tutorial here:
https://esfonts.pro/articulo/como-instalar-una-fuente#web
I have this style.css file:
#font-face {
font-family: 'Galano Grotesque';
src: local('Galano Grotesque Bold'), local('Galano-Grotesque-Bold'),
url('GalanoGrotesque-Bold.woff2') format('woff2'),
url('GalanoGrotesque-Bold.woff') format('woff'),
url('GalanoGrotesque-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
I import it in App.css like this:
#import url("fonts/roboto/style.css");
.App {
text-align: center;
margin-top: 20px;
}
.zoom {
width: auto;
height: auto;
}
body {
font-family: 'Galano Grotesque', Bold;
}
It's working perfectly in localhost. The problem comes when I deploy this app (using netlify). I see the following error and the font is not correct:
I understand that these files are being blocked by cord policy. I've read that I should do the request using HTTPS but I don't know how to do it.
Anyone knows how to fix this?
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;
}
When I start my website on localhost everything works perfectly fine.
But when I start it on my plesk webserver the Icomoon icons don't show up.
The font is saved like this https://static.my-domain.example/fonts/icomoon.ttf.
The css is saved like this https://static.my-domain.example/css/main.css.
All other fonts load in so it looks like a problem of Icomoon.
This is some example css:
#font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?2ljhe1');
src: url('../fonts/icomoon.eot?2ljhe1#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?2ljhe1') format('truetype'),
url('../fonts/icomoon.woff?2ljhe1') format('woff'),
url('../fonts/icomoon.svg?2ljhe1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
#import url(../fonts/icomoon.ttf);
.setting-icon::before{
display: block;
content: '\e908';
font-family: 'icomoon' !important;
margin-top: 5px;
margin-left: 5px;
}
Try to delete the #import it expects a css resource but not a font file url.
#font-face {
font-family: "icomoon";
src: url("../fonts/icomoon.eot?2ljhe1");
src: url("../fonts/icomoon.eot?2ljhe1#iefix") format("embedded-opentype"),
url("../fonts/icomoon.woff?2ljhe1") format("woff"),
url("../fonts/icomoon.ttf?2ljhe1") format("truetype"),
url("../fonts/icomoon.svg?2ljhe1#icomoon") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
.setting-icon::before {
display: block;
content: "\e908";
font-family: "icomoon" !important;
margin-top: 5px;
margin-left: 5px;
}
Besides, I recommend preferring woff since it offers better compression.
You should also check debugging info via dev tools (Ctrl + Shift + I). If there is some 404 notice regarding for font files – you'll need to check if those files are stored in the right place or tweak your path/url parameters.
I am trying to get custom fonts working in Nativescript, and hve them in the src/fonts folder at root. I have looked at other questions on SO, but not solved it, the css is below, and it is a display font just for the action bar title, not used anywhere else.
#font-face {
font-family: 'Trade Winds';
font-style: normal;
font-weight: 400;
src: local('Trade Winds'), local('TradeWinds'),
url('src/fonts/trade-winds-v8-latin-regular.ttf') format('ttf'), /* Safari, Android, IOS*/
}
.action-label {
font-family: 'Trade Winds', 'trade-winds';
font-size: 28px;
font-weight: bold;
color:blue;
}
have also tried variations of the path but not working. Only testing in Android at the moment. Thanks
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 only want to add a local font to font face for use in a static HTML / CSS website. The font is located here: /Users/sdawes/Library/Fonts and my code is as follows, however it does not work. I am unsure whether my syntax is incorrect or am I missing something? Many thanks
#font-face {
font-family: CantoniPro;
src: local("/Users/sdawes/Library/Fonts/Brillant.ttf");
}
h2 {
font-family: "CantoniPro", "futura-pt", Serif;
font-weight: 500;
color: #2b292e;
font-size: 1.5em;
text-align: center;
margin-top: 5%;
}