https://github.com/dacili/importing-custom-fonts
How to import custom font in your app?
https://github.com/dacili/importing-custom-fonts
angular css custom-font custom-fonts font font-face open-type opentype otf scss
Last synced: 26 days ago
JSON representation
How to import custom font in your app?
- Host: GitHub
- URL: https://github.com/dacili/importing-custom-fonts
- Owner: Dacili
- Created: 2024-06-06T14:34:25.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-27T09:00:25.000Z (over 1 year ago)
- Last Synced: 2025-09-14T03:37:05.346Z (9 months ago)
- Topics: angular, css, custom-font, custom-fonts, font, font-face, open-type, opentype, otf, scss
- Homepage:
- Size: 472 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Importing custom fonts in app
How to import custom font in your app?
What if I have **same font-family name with different styles and weights** associated with different font files?
### 1. Get font files
Firstly, you need to download the font files from somewhere (for example: https://fontsgeek.com/fonts/Basic-Sans-SF-Regular).
Font **formats/extensions** are usually some of these: ```OTF, TTF, WOFF, SVG, and EOF.```
I will use **Basic Sans** font with **otf** extension. You can find them in files.
### 2. Import them in app
Usually, you should put them in the ```assets -> fonts``` folder.
### 3. Create typography file
There is a common way of font-weight name mappings (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight):
We need to **map font files names, with font-weight values** when setting up CSS.
On the image we have shown some of matches. If we're missing file for some weight, just ignore that one, and proceed with other font files.
Example for **Basic-Sans-Bold.otf file** :
```
@font-face {
font-family: 'Basic Sans';
src: url('/assets/fonts/Basic-Sans-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
```
For italic, make sure that ``` font-style: italic;```
```
@font-face {
font-family: 'Basic Sans';
src: url('/assets/fonts/Basic-Sans-Bold-Italic.otf') format('opentype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
```
Repeat this for every font file that you have. If you have only one font file, then awesome, less work!
And based on which format/extension do you have of the font file, you will use a different value in src, format part (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face):
### 4. Import in the main styles.scss
```@import 'styles/typography.scss';```
And that's it! You should be able now to add CSS in your app such as:
```
.dacili-class {
font-family: 'Basic-Sans';
}
```