Issues with using a personalized font in a Stenciljs project

Looking for guidance on implementing a custom font in my Stenciljs app. I have the otf file, unsure if an npm package is necessary. Here's my code:

filestructure:

-src

--components

--assets

---Anurti-Regular.tiff

---Anurti-Regular.ttf

friends-listening.css

@font-face {
  font-family: 'Anurati-Regular';
  src: local('Anurati-Regular'),
   url('../assets/Anurati-Regular.tiff') format("tiff");
}

#home{
  background-color: #C8B7A6;
  height:1000px;
  text-align: center;
  font-family: Anurati-Regular;
}

friends-listening.tsx

<div id="home">
        <h2>Friends-FX app BETA</h2>
        <div id={this.login}>
          <my-component></my-component>
        </div>

        ...
</div>

Any assistance would be appreciated. Thank you, Drew

Hoping to see the custom font properly displayed on the front-end, but encountering issues.

Many questions exist about this topic, yet no definitive solutions.

javascriptcsstypescriptnpmstenciljs

Answer №1

I found the solution to my problem here: Why isn't Font Awesome working in my Shadow DOM?

  1. Include the following in a global.css file:

     @font-face {    
   font-family: 'Anurati-Regular';    
   src: local('Anurati-Regular'),    
   url('/assets/Anurati-Regular.ttf') format('truetype');    
 }

  2. Download and insert the .ttf (Font file) into your "assets" folder.

  3. Ensure your assets file is located in the "src" directory, not inside the "components" directory.

  1. In your component .tsx file (e.g., friends-listening.tsx), reference the "global.css" file in the 'styleUrls' like this:

     @Component({    
   tag: 'friends-listening',    
   styleUrls:[    
     'friends-listening.css',    
     '../../global.css'    
   ],    
   shadow: true,    
 })

  2. Add this to your component's css file (e.g., friends-listening.css):

     #home{    
   background-color: #C8B7A6;    
   height:1000px;    
   text-align: center;    
   /*the below is the font-family solution*/
   font-family: 'Anurati-Regular';    
 }

Answer №2

When it comes to deploying Anurati-Regular.tiff, the key is ensuring that the path you use in your CSS points to the location of the font file on your server. Your source code path is irrelevant once the application is running.

There are several methods for deploying font files or assets. One option is to include a copy task in your 'www' build - refer to for more information. Another approach is to utilize the assetsDir feature in the friends-listening component - check out . Additionally, you can deploy the font file separately and reference it in your CSS using an absolute URL like 

url('https://my-server.com/assets/fonts/Anurati-Regular.ttf')
.

Regardless of the method you choose, ensure that the url() value leads to the served location of the font file, not its source location.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Jquery and Ajax to add information to a database

One of the challenges I'm facing involves a page with three forms, each containing separate variables that need to be inserted into a MySQL database for viewing. My current script is working fine, even though I am aware that `mySql_` is deprecated but ...

javascriptphpjquerymysqlajax

What benefits does NewRelic offer?

We are looking for a way to monitor events within our application and send the data to a monitoring server such as NewRelic. Our goal is to set up alerts based on this custom data. For instance, we would like to receive an alert if an event does not occur ...

javascriptnode.jsnewrelic

How can I use regular expressions to validate one-letter domain names?

I am in the process of developing a validation rule for my C# MVC Model using Regex. [RegularExpression(@"(\w[-._+\w]*\w@\w{1,}.\w{2,3})", ErrorMessage = "* Email Address: Please enter a valid Email Address.")] public virtual stri ...

c#javascriptregexemail

I have an Observable but I need to convert it into a String

Seeking assistance with Angular translation service and Kendo.UI components. In the Kendo.UI documentation, it mentions the use of MessageService for component translation implementation. To achieve this, an abstract class must be extended containing a m ...

javascriptangularobservablekendo-ui-angular2

Managing file system operations in Node.js

What is the most effective way to manage file access in node.js? I am currently developing an http-based uploader for exceptionally large files (10sGB) that allows for seamless resumption of uploads. I am trying to determine the optimal strategy for handl ...

javascriptnode.js

Watch mp4 clips in various languages with ExpressJs

I have a question regarding streaming videos within my local network. My mp4 files contain multiple audio tracks in different languages. Is there a way to select a specific audio track to stream? For instance, could you specify a language as a query parame ...

javascriptnode.jsexpressvideoffmpeg

After running `npm uninstall -g angular-cli`, I thought I had successfully removed angular-cli from my system. To my surprise, when I checked `ng --

What's the deal here? I uninstalled angular-cli globally on my laptop by running npm uninstall -g angular-cli, and now it's gone. But on my desktop, I can still use ng --version even after removing angular-cli globally. Any idea what's ha ...

angularjsangularnpmangular-cli

Is there a way for app.use to identify and match requests that begin with the same path?

Given that app.use() responds to any path that starts with /, why does the request localhost:3000/foo match the second method instead of the first? app.use("/",express.static('public'), function(req,res,next) { console.log(& ...

javascriptnode.jsexpress

The error message "Uncaught ReferenceError: e is not defined" is popping up in my code when

As a beginner with React and Material-UI, I am encountering an error that I cannot seem to resolve. When I load a component using material-ui/data-grid, the data grid simply displays "An error occurred" in the app. However, when I load the component withou ...

javascriptreactjsmaterial-ui

Updating the image source through ajax by retrieving the location from the database

Is there a way to dynamically change the image source using AJAX? I have the location saved in my database and I want to set the img src from the value of something like data[0]['patient_photo']. Below is the HTML code for the image: <img id= ...

javascriptphpjqueryajaximage

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,

After providing the CDN link: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> The icons are displaying correctly and everything is working fine. You can view the code on ...

htmlcssfrontendfont-awesomeweb-frontend

AngularJS: How service query data is perceived as an object and therefore cannot be utilized by Angular

When retrieving data from my PHP server page in the factory service, I encountered two different scenarios: If I call a function that returns an array and then use json_encode($data); at the end, Angular throws a resource misconfiguration error due to ...

javascriptphparraysangularjsangularjs-directive

Ionic 2 faced an unresolved core-js dependency issue

Recently, I started working on a new Ionic 2 project and encountered an issue when trying to incorporate https://github.com/afrad/angular2-websocket. Upon installation, I received the warning message: UNMET PEER DEPENDENCY core-js@^2.4.1 The template pro ...

angulartypescriptnpmionic2

How can we enable a sitemap for web crawlers in a nodejs/express application?

Looking to enable sitemap for web crawlers in nodejs/express? I am trying to figure out where I should place my sitemap folder/files within the application flow and how to allow access for web crawlers. Currently, when visiting domain/sitemap/sitemap.xml, ...

javascriptnode.jsexpress

Webpack encounters difficulty resolving non-js `require`s located within node_modules

In my Next.js project, I have set up the configuration to handle imports ending in .web.js, which works fine except for files within the node_modules directory. For this setup, I adjusted the webpack config by setting resolve.extensions = ['.web.js&ap ...

javascriptnode.jswebpacknext.js

What distinguishes Angular directives as classes rather than functions?

When using Ng directives within HTML tags (view), they appear to resemble functions that are called upon rather than instances of a class. It almost feels like they could be static methods that can be invoked without an instance of a class. Comin ...

angulartypescript

Looking to implement a delay in the model popup using Pure JavaScript

Looking for a method to implement a delay in the popup... I've tried a few solutions without success. What's the secret to adding a delay to the modal below? Any help is greatly appreciated. var modal = document.querySelector(".modal"); var t ...

javascripthtml

Leveraging CSS or JavaScript for Displaying or Concealing Vacant Content Sections

I'm working on developing a page template that utilizes section headers and dynamically pulled content from a separate database. The current setup of the page resembles the following structure: <tr> <td> <h3> ...

javascriptjqueryhtmlcss

What is the best way to retrieve the input value from post.ejs?

app.js var express = require('express'); var bodyParser = require('body-parser'); var app = express(); var passport = require('passport'); var localStrategy = require('passport-local'); var axios = require("axi ...

javascripthtmlnode.js

Tips for resolving issues with storing data in a text box that is constantly being added to

Can someone please assist me with this issue I'm facing? I am using isset to check if the index is defined, but it stores 0 instead of saving the value of the textbox. How should I tackle this problem? If I don't check if the index is defined and ...

javascriptphphtml