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,350 points
31 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
• 56,520 points

Related Questions In AWS

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
• 56,520 points
60 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
• 56,520 points
147 views
+1 vote
2 answers

How to use jenkinsfile to get content from AWS SQS?

You can import standard AWS SDK to ...READ MORE

answered Jul 20, 2018 in AWS by Flying geek
• 3,150 points
185 views
0 votes
1 answer

AWS SNS - How to get SNS topic by name?

If you know the topic already exists ...READ MORE

answered Sep 4, 2018 in AWS by Archana
• 4,090 points
246 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
• 56,520 points
223 views
0 votes
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
• 56,520 points
430 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,560 points
294 views
0 votes
2 answers
+5 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
• 56,520 points
1,235 views