I have downloaded 'Bank Gothic Light BT' and wanted to implement it on a WordPress website.

My file is located at wp-content/themes/alexia/fonts with the name of TT0589M_.woff

This is my code in my CSS file

@font-face { font-family: 'Bank Gothic Light BT'; font-style: normal; font-weight: normal; src: local('Bank Gothic Light BT'), url('fonts/TT0589M_.woff') format('woff'); } #Subheader .container h1{font-family:'Bank Gothic Light BT';}

During inspection of Google Chrome, the h1 do have the property of font-family:'Bank Gothic Light Bt', but the subheader is not rendering the font style, what is the problem?

3

1 Answer

Most likely your theme's stylesheet contains a CSS rule for that element which has a higher specifity than your rule. Use the browser tools to see which rule applies to the element in question, then add a rule to your custom styles whose selector consists of at least as many (and as "heavy") elements than that rule in order to overrule it, for example .container_all .header #Subheader .wrapper .container h1 { ... } (That's just made up to demonstrate what I mean, I don't know the structure of your page's HTML)

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.