Ecommerce Shopify WordPress Discussion

Font not showing on wordpress theme

I duplicated/cloned my wordpress template theme so I can test out a new font on it. My new font is not showing up though. On the new test theme I removed all the current .woff font files and uploaded my new font .woff files. So I don't believe this is a file type issue? From there, I updated the font-family on the html & body. I did not create any new folders within the 'fonts' folder so the url should not be wrong either. Also there was nothing in the includes.php file for me to change font-wise either. I will supply you my current working wordpress @font-face file where the fonts are correctly displaying below and underneath that I will show you my new test @font-face file. LAST NOTE: When I go to the direct link for the font file, it works and downloads it: https://site/wp-content/themes/(new theme)/fonts/Metropolis-Regular.woff Fonts that are displaying correctly on current theme: @font-face { font-family: 'Gotham Book'; font-style: normal; font-weight: normal; src: local('Gotham Book'), url('../fonts/GothamBook.woff') format('woff'); } @font-face { font-family: 'Gotham Book Italic'; font-style: normal; font-weight: normal; src: local('Gotham Book Italic'), url('../fonts/GothamBookItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Light'; font-style: normal; font-weight: normal; src: local('Gotham Light'), url('../fonts/GothamLight.woff') format('woff'); } @font-face { font-family: 'Gotham Light Italic'; font-style: normal; font-weight: normal; src: local('Gotham Light Italic'), url('../fonts/GothamLightItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Medium'; font-style: normal; font-weight: normal; src: local('Gotham Medium'), url('../fonts/GothamMedium.woff') format('woff'); } @font-face { font-family: 'Gotham Medium'; font-style: normal; font-weight: normal; src: local('Gotham Medium'), url('../fonts/GothamMedium_1.woff') format('woff'); } @font-face { font-family: 'Gotham Medium Italic'; font-style: normal; font-weight: normal; src: local('Gotham Medium Italic'), url('../fonts/GothamMediumItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Bold'; font-style: normal; font-weight: normal; src: local('Gotham Bold'), url('../fonts/GothamBold.woff') format('woff'); } @font-face { font-family: 'Gotham Bold'; font-style: normal; font-weight: normal; src: local('Gotham Bold'), url('../fonts/Gotham-Bold.woff') format('woff'); } @font-face { font-family: 'Gotham Bold Italic'; font-style: normal; font-weight: normal; src: local('Gotham Bold Italic'), url('../fonts/GothamBoldItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Black Regular'; font-style: normal; font-weight: normal; src: local('Gotham Black Regular'), url('../fonts/Gotham-Black.woff') format('woff'); } @font-face { font-family: 'Gotham Light Regular'; font-style: normal; font-weight: normal; src: local('Gotham Light Regular'), url('../fonts/Gotham-Light.woff') format('woff'); } @font-face { font-family: 'Gotham Thin Regular'; font-style: normal; font-weight: normal; src: local('Gotham Thin Regular'), url('../fonts/Gotham-Thin.woff') format('woff'); } @font-face { font-family: 'Gotham XLight Regular'; font-style: normal; font-weight: normal; src: local('Gotham XLight Regular'), url('../fonts/Gotham-XLight.woff') format('woff'); } @font-face { font-family: 'Gotham Book Italic'; font-style: normal; font-weight: normal; src: local('Gotham Book Italic'), url('../fonts/Gotham-BookItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Thin Italic'; font-style: normal; font-weight: normal; src: local('Gotham Thin Italic'), url('../fonts/Gotham-ThinItalic.woff') format('woff'); } @font-face { font-family: 'Gotham Ultra Italic'; font-style: normal; font-weight: normal; src: local('Gotham Ultra Italic'), url('../fonts/Gotham-UltraItalic.woff') format('woff'); } @font-face { font-family: 'Gotham XLight Italic'; font-style: normal; font-weight: normal; src: local('Gotham XLight Italic'), url('../fonts/Gotham-XLightItalic.woff') format('woff'); } New Test fonts that are not displaying. @font-face { font-family: 'Metropolis Black'; font-style: normal; font-weight: normal; src: local('Metropolis Black'), url('../fonts/Metropolis-Black.woff') format('woff'); } @font-face { font-family: 'Metropolis Black Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Black Italic'), url('../fonts/Metropolis-BlackItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Bold'; font-style: normal; font-weight: normal; src: local('Metropolis Bold'), url('../fonts/Metropolis-Bold.woff') format('woff'); } @font-face { font-family: 'Metropolis Bold Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Bold Italic'), url('../fonts/Metropolis-BoldItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Extra Bold'; font-style: normal; font-weight: normal; src: local('Metropolis Extra Bold'), url('../fonts/Metropolis-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Metropolis Extra Bold Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Extra Bold Italic'), url('../fonts/Metropolis-ExtraBoldItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Extra Light'; font-style: normal; font-weight: normal; src: local('Metropolis Extra Light'), url('../fonts/Metropolis-ExtraLight.woff') format('woff'); } @font-face { font-family: 'Metropolis Extra Light Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Extra Light Italic'), url('../fonts/Metropolis-ExtraLightItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Light'; font-style: normal; font-weight: normal; src: local('Metropolis Light'), url('../fonts/Metropolis-Light.woff') format('woff'); } @font-face { font-family: 'Metropolis Light Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Light Italic'), url('../fonts/Metropolis-LightItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Medium'; font-style: normal; font-weight: normal; src: local('Metropolis Medium'), url('../fonts/Metropolis-Medium.woff') format('woff'); } @font-face { font-family: 'Metropolis Medium Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Medium Italic'), url('../fonts/Metropolis-MediumItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Regular'; font-style: normal; font-weight: normal; src: local('Metropolis Regular'), url('../fonts/Metropolis-Regular.woff') format('woff'); } @font-face { font-family: 'Metropolis Regular Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Regular Italic'), url('../fonts/Metropolis-RegularItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Semi Bold'; font-style: normal; font-weight: normal; src: local('Metropolis Semi Bold'), url('../fonts/Metropolis-SemiBold.woff') format('woff'); } @font-face { font-family: 'Metropolis Semi Bold Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Semi Bold Italic'), url('../fonts/Metropolis-SemiBoldItalic.woff') format('woff'); } @font-face { font-family: 'Metropolis Thin'; font-style: normal; font-weight: normal; src: local('Metropolis Thin'), url('../fonts/Metropolis-Thin.woff') format('woff'); } @font-face { font-family: 'Metropolis Thin Italic'; font-style: normal; font-weight: normal; src: local('Metropolis Thin Italic'), url('../fonts/Metropolis-ThinItalic.woff') format('woff'); } Current working theme html, body font-family: html, body { font-family:"Gotham A", "Gotham B", Helvetica, Arial; -webkit-font-smoothing: antialiased; font-weight:$medium; color:$color-text; overflow-x: hidden; } New test theme html, body font-family not working: html, body { font-family: 'Metropolis Regular', Helvetica, Arial; -webkit-font-smoothing: antialiased; font-weight:$medium; color:$color-text; overflow-x: hidden; }
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.