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
• 14,970 points
19 views

1 answer to this question.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
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,120 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,120 points
32 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,120 points
131 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,130 points
97 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
• 3,770 points
66 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,120 points
84 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,120 points
181 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,520 points
98 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,120 points
681 views

© 2018 Brain4ce Education Solutions Pvt. Ltd. All rights Reserved.
"PMP®","PMI®", "PMI-ACP®" and "PMBOK®" are registered marks of the Project Management Institute, Inc. MongoDB®, Mongo and the leaf logo are the registered trademarks of MongoDB, Inc.