custom fonts on static aws site

Question

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?

Step 1: Go into your browser's developer console and view the Net tab or maybe the Console tab and find the error message stating why the browser isn't loading the font files. Step 2: Come back here and edit your question to add the error message. — Mark B
There is no error in console. In network, The file is not listed. I'm assuming it should be listed as it's called (such as the image files)? I'm pretty baffled. — Don P
Sounds like you've got a problem with your css. Does it work locally? — Mark B

Bob Brownhill Bob Brownhill · Accepted Answer · 2018-06-06T09:21:31

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:

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.
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

custom fonts on static aws site

1 Answers