"Implementing unique typefaces on a static website hosted on AWS

I've been attempting to incorporate a unique font into my CSS class using font-face. I have experimented with both .otf and .ttf file formats, uploading the custom font files to an S3 bucket. I made sure to grant public permissions to the font files and tried utilizing both relative and full URL paths.

Could it be that AWS does not support this operation? Some answers I found mentioned implementing font-face in a similar manner but encountered browser compatibility issues.

CSS:

@font-face {
    font-family: CustomFontName;
    src: url(/pathToCustomName/CustomFontName.ttf); 
}

div.testing{
    font-family: CustomFontName;
    font-size: 150px;
}

HTML:

<div class="testing"> TESTING CUSTOM FONT </div>

The class is being recognized correctly, but the font itself isn't being applied. Could this be an issue related to AWS or is there something obvious that I'm overlooking? Are there alternative methods for utilizing custom fonts on an AWS static site?

csstwitter-bootstrapamazon-web-servicesamazon-s3font-face

Answer №1

It appears that this post is quite old, but I am sharing my experience for anyone else facing the same issue.

I spent a significant amount of time struggling with this problem until I finally managed to resolve it recently. Here are a couple of things to keep in mind:

  1. Browser cache: It's advisable to use incognito mode or clear your cache regularly while developing. Many times, I've made significant changes only to wonder why they weren't reflecting, which can be quite frustrating.

  2. Ensure that the path is accurately specified, without any leading / and with correct capitalization. For instance, if your file, Custom_font.ttf, is located in a content folder, the path should be content/Custom_font.ttf. The corresponding line in your CSS would then be:

    src: url('content/Custom_font.ttf');

The path is always relative from the current file/page you have open, or from the base point specified using 

<base href="relative/path">
in your HTML.

I hope this insight proves to be useful for you.

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

move position when clicked-javascript animation

Is there a way to create a button that changes a div's position with a 2-second transition on the first click and then returns it back on the second click? I tried implementing this code, but unfortunately, it doesn't bring the div back. va ...

javascripthtmlcss

Display a block by using the focus() method

My objective is : To display a popin when the user clicks on a button To hide the popin when the user clicks elsewhere I previously implemented this solution successfully: Use jQuery to hide a DIV when the user clicks outside of it However, I wanted to ...

javascripthtmlcss

Reposition and resize an image. Creating a grid layout

I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section): The entire project is based on a grid layout. I need a circular image that is larger than the container, positioned to the ...

htmlcssimagegridcss-position

Database selection error

I am encountering an issue when trying to display mysql data in my table with pagination while using the bootstrap framework. I am hopeful that someone can provide assistance with this matter. Within MAMP, I have created two databases named: bootstrap d ...

phpmysqldatabasetwitter-bootstrap

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it. Desired outcome: The buttons should trigger the display of selected checkbox values in their respective ...

javascriptjqueryhtmlcssbootstrap-modal

Styling group headers within an unordered list using pure CSS - possible?

Hey there, I'm looking to spruce up my UL by adding group headers. Here's a sneak peek at the structure I have in mind (keep in mind this is generated dynamically from a database): <ul> <li class='group group-1'> < ...

htmlcsscss-selectors

Formatting that differs based on whether the content appears on the left

I'm in search of a solution to align specific items to the left on left-hand pages and to the right on right-hand pages. I have come across @page :left/:right, but it seems to only affect the page layout and margins, not the actual content on the page ...

css

perfecting the styling of a tab management system

For reference, please check out the following link: http://jsfiddle.net/XEbKy/3/ In my design, I have organized two layers of tabs. The top layer consists of two tabs while the bottom layer has three tabs. My goal is to have all these tabs neatly enclosed ...

css

Comparing Amplify's Serverless/GraphQL to Traditional Express Server-Side Backend

When considering the best approach for a mobile app backend, it's important to weigh the advantages and disadvantages of using Amplify Express serverless or Amplify GraphQL versus hosting an Express server-side (REST or GraphQL). For more information ...

node.jsamazon-web-servicesexpressgraphqlaws-amplify

I found myself in a frustrating situation where I couldn't use the screen once I had

I am implementing the bootstrap modal with the following code, $scope.modalInstance = $modal.open({ templateUrl: '/src/lvassets/owl/download/points.modal.php', size: 'm', controller: Down ...

jqueryangularjstwitter-bootstrap

Tips for creating a cohesive group of HTML elements within an editable area

Imagine having a contenteditable area with some existing content: <div contenteditable="true"> <p>first paragraph</p> <p> <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-s ...

javascripthtmlcss

Mobile media queries are ineffective despite implementing the viewport meta tag

I am facing an issue that even though I have tried various solutions, my media queries are not working on mobile devices after adding the viewport meta tag. Can anyone provide insight into why this might be happening? Update: Upon further investigation, I ...

htmlcssmedia-queries

Can all anchor tags properties on a website be simultaneously changed?

Recently, I discovered that using target="_blank" in anchor tags can leave a website vulnerable to security risks, and the recommended alternative is to use rel="noopener". In my current web project, all anchor tags are currently utilizing the target attri ...

javascripthtmlcssfrontend

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Premium</h1> <p>100 ...

htmlcsssass

insert a gap between two elements in the identical line

Is there a way to create spacing between two text fields in the same row? I have tried using margins, paddings, and display flex in the css file but haven't been successful. import "./styles.css"; import TextField from "@material-ui/cor ...

javascriptcssreactjstypescriptmaterial-ui

The text alignment function of justify is not functioning properly

Trying to find a way to validate the content of this article, but I'm hitting a roadblock... <p style="text-align:justify;" class="custom-article"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt velit vitae risus t ...

cssjustify

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Expanding functionality: Steps to integrating a new endpoint into your AWS Amplify Express Server

I have created a REST express server using Amplify. Attempted to include two additional endpoints: // incorporating serverless express app.post('/myendpoint', function(req, res) { console.log('body: ', req.body) res.json(req.body) ...

javascriptamazon-web-servicesrestexpressaws-amplify

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

cssgoogle-chromehtmlhyperlink

CSS animations for loading page content

Currently, I am incorporating animations into my project using HTML5 and CSS3, and the progress has been smooth. I have been able to achieve effects such as: #someDivId { position: absolute; background:rgba(255,0,0,0.75); transition: all 0.7s ...

javascriptcss