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?
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)
