Adding Custom Font in CSS/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!

Does the developer console <F12> show any 404's for missing files?... — War10ck
– War10ck, Commented Jul 15, 2015 at 17:17
Can you post your folder structure? If for example your css is in a stylesheets or css directory your path will need adjusting? — Guy
– Guy, Commented Jul 15, 2015 at 17:19
I thought I can just increment to make a custom header? assuming everything else stays the same.. and i use style fontfamily and i still see no changes — user5120455
– user5120455, Commented Jul 15, 2015 at 17:31
Although it's <h7> and it should be corrected, but your custom font issue isn't quite related to that IMO, reply other comments, they're all helpful. — Stickers
– Stickers, Commented Jul 15, 2015 at 17:34

Pratyush Pranjal · Accepted Answer · 2015-07-15 18:20:57Z

2

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/

answered Jul 15, 2015 at 18:20

Pratyush Pranjal

5547 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user5120455 Over a year ago

This is basically what I already have; the font loads properly now on IE but fails to do so on Chrome.

Matias Beckerle · Accepted Answer · 2015-07-15 17:25:39Z

1

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.

answered Jul 15, 2015 at 17:25

Matias Beckerle

3364 silver badges9 bronze badges

Comments

user4206282 · Accepted Answer · 2015-07-15 17:39:45Z

1

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

answered Jul 15, 2015 at 17:39

user4206282

Collectives™ on Stack Overflow

Adding Custom Font in CSS/HTML?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related