I have an Angular 10 app that uses SCSS. I have declared some #font-face declarations in _typography.scss referring to the fonts in my assets/fonts directory. However, when running the application, the browser does not even initiate the request to download the font files.
Following is the style directory:
This is my _typography.scss:
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Medium.ttf' format('truetype');
font-style: normal;
font-weight: 500;
font-display: swap;
}
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-SemiBold.ttf' format('truetype');
font-style: normal;
font-weight: 600;
font-display: swap;
}
#font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Bold.ttf' format('truetype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
I am #import-ing this inside my main styles.scss file:
#import 'reset';
#import 'variables';
#import 'typography';
#import 'utilities';
body {
font-family: 'Spartan', 'Segoe UI';
font-weight: 500;
font-size: 0.75rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
Only Segoe UI system font is getting applied. The browser is not even initiating the requests for the font files:
I then tried preloading my fonts in my index.html, and the browser did make the requests, but the fonts were not applied.
Can someone point out why this is happening?
P.S.: Here is my assets folder structure:
In my case, I just moved across from less to sass and the fonts were not requested.
After a lot of messing about I figured out that it didn't work with sass when font-face was declared inside my html tag. It was working before this with less.
// not working
html {
font-face: ...
...
}
// working
font-face: ...
html {
...
}
I know its late, but in my case my fonts were overwritten by angular material theme.
U can check that by looking at computed styles in devtools. If that is the case then creating custom typography for angular material is recommended.
Related
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'm trying to do global font faces for my app and so in the index.jsx I import fonts.css which contains:
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ProximaNova';
src: url('/assets/fonts/ProximaNova-Extrabold.woff') format('woff');
font-weight: bolder;
font-style: normal;
}
body,
html {
font-family: 'ProximaNova';
}
In the chrome dev tools, I see that it's trying to get the font, but it returns html instead of the font it actually wants. This results in the font not being able to be decoded.
I'm pretty sure this is a result of my use of react-router-dom having a 404 route and webpack having some kind of issue.
This seems like such a trivial thing to do but it's been taking me the past hour and a half and I've gotten nowhere. Let me know if I need to be more clear. Thanks for your help
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 have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.