{"id":18768554,"url":"https://github.com/dacili/importing-custom-fonts","last_synced_at":"2026-05-08T07:31:58.092Z","repository":{"id":243080053,"uuid":"811405866","full_name":"Dacili/Importing-custom-fonts","owner":"Dacili","description":"How to import custom font in your app?","archived":false,"fork":false,"pushed_at":"2024-09-27T09:00:25.000Z","size":483,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-14T03:37:05.346Z","etag":null,"topics":["angular","css","custom-font","custom-fonts","font","font-face","open-type","opentype","otf","scss"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dacili.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-06-06T14:34:25.000Z","updated_at":"2024-09-27T09:00:28.000Z","dependencies_parsed_at":"2025-09-14T03:32:55.707Z","dependency_job_id":"94a40554-48eb-4a7b-9c45-a1500900e3d2","html_url":"https://github.com/Dacili/Importing-custom-fonts","commit_stats":null,"previous_names":["dacili/importing-custom-fonts"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Dacili/Importing-custom-fonts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FImporting-custom-fonts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FImporting-custom-fonts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FImporting-custom-fonts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FImporting-custom-fonts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dacili","download_url":"https://codeload.github.com/Dacili/Importing-custom-fonts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dacili%2FImporting-custom-fonts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32770988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","css","custom-font","custom-fonts","font","font-face","open-type","opentype","otf","scss"],"created_at":"2024-11-07T19:13:08.103Z","updated_at":"2026-05-08T07:31:58.066Z","avatar_url":"https://github.com/Dacili.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Importing custom fonts in app\nHow to import custom font in your app?  \nWhat if I have **same font-family name with different styles and weights** associated with different font files?\n\n### 1. Get font files\nFirstly, you need to download the font files from somewhere (for example: https://fontsgeek.com/fonts/Basic-Sans-SF-Regular).  \nFont **formats/extensions** are usually some of these:  ```OTF, TTF, WOFF, SVG, and EOF.```  \nI will use **Basic Sans** font with **otf** extension. You can find them in files. \n\n### 2. Import them in app\nUsually, you should put them in the ```assets -\u003e fonts``` folder.  \n![image](https://github.com/Dacili/Importing-custom-fonts/assets/37112852/4fc600f6-fd31-4957-8ce9-c5c35c40052b)\n\n\n### 3. Create typography file\nThere is a common way of font-weight name mappings (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight):  \n![image](https://github.com/Dacili/Importing-custom-fonts/assets/37112852/c4df4270-5074-472b-a118-db6a7a268169)\nWe need to **map font files names, with font-weight values** when setting up CSS.   \nOn 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.  \n![image](https://github.com/user-attachments/assets/30fc3cd7-326d-49bc-b082-a46fcbada7fc)\n  \nExample for **Basic-Sans-Bold.otf file** :\n``` \n@font-face {\n  font-family: 'Basic Sans';\n  src: url('/assets/fonts/Basic-Sans-Bold.otf') format('opentype');\n  font-weight: 700;\n  font-style: normal;\n  font-display: swap;\n}\n```\nFor italic, make sure that ``` font-style: italic;``` \n``` \n@font-face {\n  font-family: 'Basic Sans';\n  src: url('/assets/fonts/Basic-Sans-Bold-Italic.otf') format('opentype');\n  font-weight: 700;\n  font-style: italic;\n  font-display: swap;\n}\n```\nRepeat this for every font file that you have. If you have only one font file, then awesome, less work!\n\nAnd 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):  \n![image](https://github.com/Dacili/Importing-custom-fonts/assets/37112852/a6242191-83fd-4d61-9098-51b7145167fb)\n\n\n![image](https://github.com/Dacili/Importing-custom-fonts/assets/37112852/78a58189-826e-4553-bcca-6c1960fd7c31)\n\n\n\n\n### 4. Import in the main styles.scss\n\n```@import 'styles/typography.scss';```  \n![image](https://github.com/Dacili/Importing-custom-fonts/assets/37112852/7e2507c6-073b-4bc9-8e87-690c1340cbd8)  \nAnd that's it! You should be able now to add CSS in your app such as:\n```\n.dacili-class {\nfont-family: 'Basic-Sans';\n}\n``` \n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Fimporting-custom-fonts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdacili%2Fimporting-custom-fonts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdacili%2Fimporting-custom-fonts/lists"}