Trouble Applying Custom Font Across Omeka Site

Omeka Classic
1

Hello Omeka Community,

I’ve been encountering issues with applying a custom font (‘AthenaRuby’) to my entire Omeka site. Despite setting up the @font-face correctly and defining it in my CSS, the font isn’t being applied consistently and seems to be overridden by other styles.

Here’s how I’ve set up the font in my CSS:

css

Copy code

@font-face {
    font-family: 'AthenaRuby';
    src: url('http://www.armnumres.org/themes/default/fonts/AthenaRuby.woff2') format('woff2'),
         url('http://www.armnumres.org/themes/default/fonts/AthenaRuby.woff') format('woff'),
         url('http://www.armnumres.org/themes/default/fonts/AthenaRuby.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'AthenaRuby', sans-serif;
}

body, body * {
    font-family: 'AthenaRuby', sans-serif !important;
}

Despite these declarations, some elements do not show the ‘AthenaRuby’ font and revert to the default or another font. I’ve tried using !important to enforce the style and ensured the font files are correctly uploaded and accessible. I’ve also checked for specificity and inheritance issues but to no avail.

Could there be something specific to Omeka’s CSS structure or another overriding factor I might have missed? Any insights or suggestions would be greatly appreciated!

Thank you!

2

The fonts aren’t actually there at the URLs you’re using, it looks like:

For example this

http://www.armnumres.org/themes/default/fonts/AthenaRuby.woff2

just goes to an Omeka login page… generally that means the file isn’t at that location or can’t be read or something along those lines.

(as a side note, you might want to make those https URLs to avoid possible mixed content issues, but that’s not your main problem)

3

Thanks for pointing that out. I’ve fixed the correct path and it worked

@font-face {
    font-family: 'AthenaRuby';
    src: url('https://www.armnumres.org/themes/default/fonts/Athena-Ruby-master/fonts/AthenaRuby_b020.woff2') format('woff2'),
         url('https://www.armnumres.org/themes/default/fonts/Athena-Ruby-master/fonts/AthenaRuby_b020.woff') format('woff'),
         url('https://www.armnumres.org/themes/default/fonts/Athena-Ruby-master/fonts/AthenaRuby_b020.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.athena-ruby-font,
.athena-ruby-font * {
    font-family: 'AthenaRuby', sans-serif;
}

<div class="athena-ruby-font" style="text-align: center;">
Text here!
</div>