When using any front-end project, you will need to style the front-end according to what you need. One of the trickier things to use is Fonts. After creating an angular project and created the base structure you can use angular font's
You can download font files from anywhere like google fonts, there should also be some place on the internet you can download files.
These files types are in type .ttf, .woff or .woff2.
A general project structure looks something like:
|--src
|
-- app
-- assets
|
fonts
|-- google-fonts.css
|-- font1.ttf
|-- font2.woff2
|-- font3.woff
You will need to create the fonts's and maybe the assets folder along with the google-fonts.css sitting int the file.
The font's you put in the same folder.
In google-fonts.css you will have to put something along the lines:
@font-face {
font-family: 'Varela Round';
src: url('font1.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
This will import the style.
The next step you have to do is import that file into the styles.css (The main style sheet that angular provides.)
@import 'assets/fonts/google-fonts.css';
html {
font-family: 'Varela Round';
}
An lastly make sure angular knows about the /assets/fonts folder. This can be done by going to angular.json
You will find an assets objects: ensure the src/assets is present there to give angular the idea where the fonts can be found.
"assets": [
"src/assets",
"src/favicon.ico",
{
"glob": "**/*",
"input": "public"
}
],