Merge pull request #107 from HideyoshiSolutions/main

Main - Merges Hotfixes

.dockerignore

@@ -1,5 +1,11 @@
+node_modules
+dist
+
 .github
 .gitignore
 Dockerfile
 README.md
 .k8s
+
+.env
+.secret

.github/workflows/deploy.yml

@@ -41,7 +41,10 @@ jobs:
             - uses: actions/checkout@v3
 
             - name: Set up QEMU
-              uses: docker/setup-qemu-action@v1
+              uses: docker/setup-qemu-action@v3
+
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3
 
             - name: Log in to GHCR
               uses: docker/login-action@v3
@@ -68,41 +71,62 @@ jobs:
                 echo "IMAGE_LATEST=${IMAGE_BASE}:${TAG}" >> $GITHUB_ENV
                 echo "IMAGE_SHA=${IMAGE_BASE}:sha-${SHORT_SHA}" >> $GITHUB_ENV
 
-            - name: Build Docker image
+            - name: Build and push Docker image (with registry cache)
-              run: |
+              uses: docker/build-push-action@v5
-                docker build -t $IMAGE_LATEST -t $IMAGE_SHA .
+              with:
-
+                context: .
-            - name: Push Docker images
+                push: true
-              run: |
+                platforms: linux/amd64,linux/arm64
-                docker push $IMAGE_LATEST
+                tags: |
-                docker push $IMAGE_SHA
+                  ${{ env.IMAGE_LATEST }}
+                  ${{ env.IMAGE_SHA }}
+                cache-from: type=registry,ref=${{ env.IMAGE_LATEST }}
+                cache-to: type=inline
 
     deploy:
         needs: [docker]
         runs-on: ubuntu-latest
-        if: github.event_name == 'push' && (github.ref == 'refs/heads/main')
+        if: github.event_name == 'workflow_dispatch' || (github.event_name == 'push' && github.ref == 'refs/heads/main')
+        environment:
+          name: ${{ github.ref_name == 'main' && 'production' || 'dev' }}
+          url: https://${{ vars.KUBE_DOMAIN }}
+        env:
+          # Kubernetes Specific
+          KUBE_NAMESPACE: ${{ vars.KUBE_NAMESPACE }}
+          KUBE_DOMAIN: ${{ vars.KUBE_DOMAIN }}
+          WORKER_NODE_LABEL: ${{ vars.WORKER_NODE_LABEL }}
+          # Application Specific
+          BACKEND_URL: ${{ vars.BACKEND_URL }}
+          GH_USER: ${{ vars.GH_USER }}
 
         steps:
           - uses: actions/checkout@v4
+          - uses: azure/setup-kubectl@v4
 
-          - name: Set up Kubeconfig
+          - name: Set Up Kubeconfig
-            uses: azure/setup-kubectl@v3
+            uses: azure/k8s-set-context@v4
             with:
-              method: kubeconfig
               kubeconfig: ${{ secrets.PORTFOLIO_KUBECONFIG }}
 
-          - name: Deploy to Kubernetes
+          - name: Prepare Image Tag
             run: |
               OWNER=$(echo "${GITHUB_REPOSITORY_OWNER}" | tr '[:upper:]' '[:lower:]')
               REPO=$(echo "${GITHUB_REPOSITORY#*/}" | tr '[:upper:]' '[:lower:]')
               
               IMAGE_BASE="ghcr.io/${OWNER}/${REPO}"
-              TAG="${{ github.event.inputs.tag || 'latest' }}"
+              IMAGE_TAG="${{ github.event.inputs.tag || 'latest' }}"
               
-              kubectl config set-context --current --namespace=$KUBE_NAMESPACE
+              echo "IMAGE_BASE=${IMAGE_BASE}" >> $GITHUB_ENV
+              echo "IMAGE_TAG=${IMAGE_TAG}" >> $GITHUB_ENV
 
-              # Apply any other configuration changes if needed
+          - name: Apply Kubernetes Manifests - Configuration
-              envsubst < .k8s/config.yml | kubectl apply -f -
+            run: envsubst < .k8s/config.yml | kubectl apply -f -
-              envsubst < .k8s/deployment.yaml | kubectl apply -f -
+
-              envsubst < .k8s/service.yaml | kubectl apply -f -
+          - name: Apply Kubernetes Manifests - Deployment
-              envsubst < .k8s/ingress.yaml | kubectl apply -f -
+            run: envsubst < .k8s/deployment.yaml | kubectl apply -f -
+
+          - name: Apply Kubernetes Manifests - Service
+            run: envsubst < .k8s/service.yaml | kubectl apply -f -
+
+          - name: Apply Kubernetes Manifests - Ingress
+            run: envsubst < .k8s/ingress.yaml | kubectl apply -f -

.gitignore

@@ -46,5 +46,4 @@ Thumbs.db
 src/assets/env.js
 
 .env
-
 .secret

.k8s/deployment.yaml

@@ -16,21 +16,12 @@ spec:
         app: frontend
     spec:
       nodeSelector:
-        ${WORKER_NODE_LABEL}
+        $WORKER_NODE_LABEL
-      initContainers:
+      imagePullSecrets:
-        - name: wait-backend-init
+        - name: ghcr-login-secret
-          image: busybox:latest
-          args:
-            - /bin/sh
-            - -c
-            - >
-              set -x;
-              while [ $(curl -sw '%{http_code}' "backend-service:8000/health" -o /dev/null) -ne 200 ]; do
-              sleep 15;
-              done
       containers:
         - name: frontend
-          image: ${IMAGE_BASE}:${TAG}
+          image: ${IMAGE_BASE}:${IMAGE_TAG}
           imagePullPolicy: "Always"
           resources:
             requests:

Dockerfile

@@ -5,26 +5,23 @@ FROM base AS build
 WORKDIR /app
 
 COPY package*.json ./
-
 RUN npm install
 
+COPY . .
+RUN npm run build:prod
+
 
 FROM base AS prod
 
 WORKDIR /app
 
 COPY --from=build /app/node_modules ./node_modules
-COPY . .
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/server.js ./
+COPY --from=build /app/set_env.js ./
+COPY --from=build /app/package*.json ./
 
 
-RUN npm install -g @angular/cli@20.3.8
-
-
-RUN apk add --update gettext python3 py3-pip py3-setuptools make g++ && \
-    rm -rf /var/cache/apk/*
-
-RUN npm run build:prod
-
 EXPOSE 5000-7000
 
 CMD ["npm", "run", "start:prod"]

package.json

@@ -30,6 +30,7 @@
     "@sinclair/typebox": "^0.32.4",
     "apexcharts": "^3.45.1",
     "bootstrap": "^4.6.2",
+    "compression": "^1.8.1",
     "cookieconsent": "^3.1.1",
     "cors": "^2.8.5",
     "dotenv": "^17.2.3",
@@ -47,6 +48,7 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "^20.3.8",
     "@angular-eslint/builder": "^19.8.1",
     "@angular-eslint/eslint-plugin": "^20.5.0",
     "@angular-eslint/eslint-plugin-template": "^20.5.0",

server.js

@@ -7,22 +7,17 @@ const PKG_NAME = "frontend-hideyoshi.com";
 
 const app = express();
 app.use(cors());
+app.use(compression());
 
-function shouldCompress (req, res) {
+const distFolder = path.join(process.cwd(), `dist/${PKG_NAME}/browser`);
-  if (req.headers['x-no-compression']) {
+app.use(express.static(distFolder, {
-    // don't compress responses with this request header
+    maxAge: '1y'
-    return false
+}));
-  }
-
-  // fallback to standard filter function
-  return compression.filter(req, res)
-}
-
-app.use(compression({ filter: shouldCompress }))
-app.use(express.static(`${__dirname}/dist/${PKG_NAME}`));
 
 app.get("/*", (req, res) => {
-    res.sendFile(path.join(`${__dirname}/dist/${PKG_NAME}/index.html`));
+    res.sendFile(path.join(`${__dirname}/dist/${PKG_NAME}/browser/index.html`));
 });
 
-app.listen(process.env.PORT || 5000);
+app.listen(process.env.PORT || 5000, () => {
+    console.log(`Node Express server for ${PKG_NAME} listening on http://localhost:${process.env.PORT || 5000}`);
+});

set_env.js

@@ -1,6 +1,6 @@
 function getPrefix() {
     if (process.argv.includes('--prod') || process.argv.includes('-p')) {
-        return `${__dirname}/dist/frontend-hideyoshi.com`
+        return `${__dirname}/dist/frontend-hideyoshi.com/browser/`
     }
     return `${__dirname}/src`
 }

src/app/shared/components/popup/popup.component.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
-
 * {
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;

src/assets/fonts/Hind/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2014, Indian Type Foundry (info@indiantypefoundry.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/fonts/Hind/font-hind.css

@@ -0,0 +1,64 @@
+/*
+Hind-Bold.ttf
+Hind-Light.ttf
+Hind-Medium.ttf
+Hind-Regular.ttf
+Hind-SemiBold.ttf
+*/
+
+/*
+  Hind font-face declarations.
+  We map weights as follows:
+    Light     -> 300
+    Regular   -> 400
+    Medium    -> 500
+    SemiBold  -> 600
+    Bold      -> 700
+
+  No italic files are present in this folder — only normal style declarations are provided.
+  font-display: swap is used for better rendering behavior.
+*/
+
+@font-face {
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('Hind-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('Hind-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('Hind-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('Hind-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Hind';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('Hind-Bold.ttf') format('truetype');
+}
+
+/* Usage example:
+body { font-family: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
+*/

src/assets/fonts/Montserrat/font-montserrat.css

@@ -0,0 +1,115 @@
+@font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 100;
+    src:
+        url(Montserrat-italic-100.woff) format("woff"),
+        url(Montserrat-italic-100.woff2) format("woff2"),
+        url(Montserrat-italic-100.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 300;
+    src:
+        url(Montserrat-italic-300.woff) format("woff"),
+        url(Montserrat-italic-300.woff2) format("woff2"),
+        url(Montserrat-italic-300.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 400;
+    src:
+        url(Montserrat-italic-400.woff) format("woff"),
+        url(Montserrat-italic-400.woff2) format("woff2"),
+        url(Montserrat-italic-400.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 700;
+    src:
+        url(Montserrat-italic-700.woff) format("woff"),
+        url(Montserrat-italic-700.woff2) format("woff2"),
+        url(Montserrat-italic-700.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: italic;
+    font-weight: 900;
+    src:
+        url(Montserrat-italic-900.woff) format("woff"),
+        url(Montserrat-italic-900.woff2) format("woff2"),
+        url(Montserrat-italic-900.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 100;
+    src:
+        url(Montserrat-normal-100.woff) format("woff"),
+        url(Montserrat-normal-100.woff2) format("woff2"),
+        url(Montserrat-normal-100.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 300;
+    src:
+        url(Montserrat-normal-300.woff) format("woff"),
+        url(Montserrat-normal-300.woff2) format("woff2"),
+        url(Montserrat-normal-300.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 400;
+    src: url(Montserrat-normal-400.eot);
+    src:
+        local("Montserrat"),
+        url(Montserrat-normal-400.woff) format("woff"),
+        url(Montserrat-normal-400.woff2) format("woff2"),
+        url(Montserrat-normal-400.svg#Montserrat)
+            format("svg"),
+        url(Montserrat-normal-400.eot?#iefix)
+            format("embedded-opentype"),
+        url(Montserrat-normal-400.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 700;
+    src:
+        url(Montserrat-normal-700.woff) format("woff"),
+        url(Montserrat-normal-700.woff2) format("woff2"),
+        url(Montserrat-normal-700.ttf)
+            format("truetype");
+}
+
+@font-face {
+    font-family: "Montserrat";
+    font-style: normal;
+    font-weight: 900;
+    src:
+        url(Montserrat-normal-900.woff) format("woff"),
+        url(Montserrat-normal-900.woff2) format("woff2"),
+        url(Montserrat-normal-900.ttf)
+            format("truetype");
+}

src/assets/fonts/Poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/assets/fonts/Poppins/font-poppins.css

@@ -0,0 +1,185 @@
+/*
+Poppins-Black.ttf
+Poppins-BlackItalic.ttf
+Poppins-Bold.ttf
+Poppins-BoldItalic.ttf
+Poppins-ExtraBold.ttf
+Poppins-ExtraBoldItalic.ttf
+Poppins-ExtraLight.ttf
+Poppins-ExtraLightItalic.ttf
+Poppins-Italic.ttf
+Poppins-Light.ttf
+Poppins-LightItalic.ttf
+Poppins-Medium.ttf
+Poppins-MediumItalic.ttf
+Poppins-Regular.ttf
+Poppins-SemiBold.ttf
+Poppins-SemiBoldItalic.ttf
+Poppins-Thin.ttf
+Poppins-ThinItalic.ttf
+*/
+
+/*
+  Poppins font-face declarations.
+  We map weights as follows:
+    Thin         -> 100
+    ExtraLight   -> 200
+    Light        -> 300
+    Regular      -> 400
+    Medium       -> 500
+    SemiBold     -> 600
+    Bold         -> 700
+    ExtraBold    -> 800
+    Black        -> 900
+
+  Each weight has a normal and italic declaration where an italic file exists.
+  font-display: swap is used for better rendering behavior.
+*/
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('Poppins-Thin.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url('Poppins-ThinItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url('Poppins-ExtraLight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url('Poppins-ExtraLightItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('Poppins-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url('Poppins-LightItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('Poppins-Italic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('Poppins-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('Poppins-MediumItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('Poppins-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('Poppins-SemiBoldItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('Poppins-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('Poppins-BoldItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('Poppins-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('Poppins-ExtraBoldItalic.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('Poppins-Black.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Poppins';
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url('Poppins-BlackItalic.ttf') format('truetype');
+}
+
+/* Usage example:
+body { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
+*/

src/font-montserrat.css

@@ -1,115 +0,0 @@
-@font-face {
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 100;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-italic-100.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-italic-100.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-italic-100.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 300;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-italic-300.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-italic-300.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-italic-300.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 400;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-italic-400.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-italic-400.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-italic-400.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 700;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-italic-700.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-italic-700.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-italic-700.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: italic;
-    font-weight: 900;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-italic-900.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-italic-900.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-italic-900.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 100;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-normal-100.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-normal-100.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-normal-100.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 300;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-normal-300.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-normal-300.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-normal-300.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 400;
-    src: url(assets/fonts/Montserrat/Montserrat-normal-400.eot);
-    src:
-        local("Montserrat"),
-        url(assets/fonts/Montserrat/Montserrat-normal-400.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-normal-400.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-normal-400.svg#Montserrat)
-            format("svg"),
-        url(assets/fonts/Montserrat/Montserrat-normal-400.eot?#iefix)
-            format("embedded-opentype"),
-        url(assets/fonts/Montserrat/Montserrat-normal-400.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 700;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-normal-700.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-normal-700.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-normal-700.ttf)
-            format("truetype");
-}
-
-@font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: 900;
-    src:
-        url(assets/fonts/Montserrat/Montserrat-normal-900.woff) format("woff"),
-        url(assets/fonts/Montserrat/Montserrat-normal-900.woff2) format("woff2"),
-        url(assets/fonts/Montserrat/Montserrat-normal-900.ttf)
-            format("truetype");
-}

src/styles.css

@@ -1,6 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
-@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
+@import "assets/fonts/Hind/font-hind.css";
-@import "font-montserrat.css";
+@import "assets/fonts/Montserrat/font-montserrat.css";
+@import "assets/fonts/Poppins/font-poppins.css";
 
 * {
     padding: 0 auto;