CODEWITHSUNDEEP
csstwitter-bootstrapamazon-web-servicesamazon-s3font-face
Don
Don

Reputation: 4202

custom fonts on static aws site

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?

Upvotes: 3

Views: 3666

Answers (2)

vinzcelavi
vinzcelavi

Reputation: 838

You have to setup a redirection pour your SPA: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

You have to specify the format:

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

And it is recommended to use woff2 for web fonts.

Upvotes: 0

Bob Brownhill
Bob Brownhill

Reputation: 11

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

Upvotes: 1

Related Questions