How to get custom fonts on static aws site

0 votes

I am trying to use a custom font in my css class using font-face. I have tried two different types of files (.otf and .ttf). I have the custom font files uploaded to an S3 bucket. I have also given public permissions to the font files and attempted using both relative and full url paths.

Is this not supported on aws? I've read some other answers on here that implemented font-face in the same way but had issues with specific browsers.

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 clearly recognized but the font is not implemented. Is this an aws issue or am I missing something obvious? Is there another way to use custom fonts on an aws static site?

Sep 25, 2018 in AWS by bug_seeker
• 15,520 points
2,445 views

1 answer to this question.

0 votes

I see this is an old post so posting this more for other people encountering the same issue.

I struggled with this problem for a while, before I got it working recently. Theres a a couple of things to check:

  1. Browser cache: It's a good idea to use incognito or clear the cache regularly when developing, the number of times I've made big changes and wondered why I can't seem them is a little embarrassing.

  2. Make sure the path is exactly correct, i.e. no preceding / and capitalisation matches. For example if your file, Custom_font.ttf is in say a content folder the path would be content/Custom_font.ttf then full line in your css would be:

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

The path is always relative from the file/page you have open or the specified base point if you use <base href="relative/path"> in your html.

Hope this helps

answered Sep 25, 2018 by Priyaj
• 58,100 points

Related Questions In AWS

0 votes
1 answer

how to get aws account number /id based on EC2 instance which is hosted in amazon

You can obtain account number from an ...READ MORE

answered Feb 21, 2022 in AWS by Korak
• 5,820 points
2,130 views
+3 votes
4 answers

How to host a website on AWS?

Certainly, it can be used to do ...READ MORE

answered Mar 30, 2018 in AWS by brat_1
• 7,200 points
2,872 views
0 votes
1 answer

How can i copy tables from one database to other on AWS?

You can use AWS Data pipeline to ...READ MORE

answered Jul 5, 2018 in AWS by Priyaj
• 58,100 points
4,709 views
0 votes
1 answer

How to get AWS account/service cost using CloudWatch API?

You can check this link for a ...READ MORE

answered Jul 13, 2018 in AWS by Priyaj
• 58,100 points
882 views
0 votes
1 answer

AWS S3 uploading hidden files by default

versioning is enabled in your bucket. docs.aws.amazon.com/AmazonS3/latest/user-guide/….... the ...READ MORE

answered Oct 4, 2018 in AWS by Priyaj
• 58,100 points
5,838 views
–1 vote
1 answer

How to decrypt the encrypted S3 file using aws-encryption-cli --decrypt

Use command : aws s3 presign s3://mybucket/abc_count.png you get ...READ MORE

answered Oct 22, 2018 in AWS by Priyaj
• 58,100 points
5,150 views
0 votes
1 answer

Import my AWS credentials using python script

Using AWS Cli  Configure your IAM user then ...READ MORE

answered Nov 16, 2018 in AWS by Jino
• 5,820 points
2,820 views
0 votes
2 answers
+6 votes
3 answers
+1 vote
3 answers

How to get ARN for s3 Bucket using aws cli .

An ARN is a non-opaque, constructible identifier, ...READ MORE

answered Aug 16, 2018 in AWS by Priyaj
• 58,100 points
5,557 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP