Adding Custom Font in CSS/HTML? - html

Question

trying to add a custom font into my wordpress website but it's just not working. I tried using one of the plugins but I only see the change in font in 'edit mode' but when i actually go on the public webaddress the font does not load.
I've converted futura condensed light into the various types and added this in my style.css on the theme I'm using
#font-face {
font-family: 'Conv_futura-condensedlight-normal';
src: url('fonts/futura-condensedlight-normal.eot');
src: url('fonts/futura-condensedlight-normal.eot?#iefix') format('embedded-opentype'),
url('fonts/futura-condensedlight-normal.woff') format('woff'),
url('fonts/futura-condensedlight-normal.ttf') format('truetype'),
url('fonts/futura-condensedlight.svg#Conv_futura-condensedlight-normal') format('svg');
font-weight: normal;
font-style: normal;
}
and also added this
h7{font-family: 'Conv_futura-condensedlight-normal';}
On the page where I want the text to change I have:
<h7>LOGIN</h7>
but the text does not change..
I've also uploaded the files into the fonts folder in the theme directory (where other fonts are)
Can't seem to find the bug. Help would be appreciated!

Answer 1

Try #font-face for custom fonts. Use below code.
#font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
and specify it as below :
font-family: 'MyWebFont', Fallback, sans-serif;
Refer : https://css-tricks.com/snippets/css/using-font-face/

Answer 2

They may be several reasons but the first thing I'm seeing wrong is the <h7> tag because it doesn't exist. You should use from h1 to h6.
If that doesn't solve the issue please try with browser's console as #War10ck said, missing files is a signal of path issues.

Answer 3

When I created a custom font and used it on my website, this was the CSS I used:
#font-face {font-family:'CUSTOM_FONT_NAME';src:local('CUSTOM_FONT_NAME'), url(http://MY_URL/MY_FONT_PATH/MY_FONT.ttf) format('truetype');}
.my_custom_font_class {font-family:'CUSTOM_FONT_NAME',serif;}
I believe I had to use a global path to get my font to load, so you might try that.
The src:local('CUSTOM_FONT_NAME') part is just to verify that it's working at all from your machine with the font installed. (You'll need the font name to match the name it's registered under in your machine, in this case).