Is there some restriction to what fonts @font-face, will accept?

Question

I have been experimenting with css and custom fonts but have run into a problem where under the exact same circumstances; I can get other fonts to work properly but not the one that I want to use. Do i need to include some exception handling that I dont know about?

This will work

@font-face{
    src: url("VeganStylePersonalUse-5Y58.ttf");
    font-family: "custom";
}
.h1{  
    font-family: "custom"  
}

However this wont

@font-face{  
    src: url("runescape_uf.ttf");  
    font-family: "custom";  
}  
.h1{  
    font-family: "custom"  
}

They are both within the same folder as the html and css and can be found at
https://www.fontspace.com/billy-argel/vegan-style-personal-use
&
https://fontmeme.com/fonts/runescape-uf-font/

Yeah I triple checked it and even tried the windows/fonts path but that doesn't seem to work at all — S.Banfield, Mar 04 '20 at 07:10
@S Benfield Add `format("ttf")` at the end ex: `src: url("runescape_uf.ttf") format("ttf"); ` — Mehraj Khan, Mar 04 '20 at 07:12
That didn't work and it makes the other fonts that do work, not work. — S.Banfield, Mar 04 '20 at 07:15
@S Banfield `@font-face { font-family: 'Vegan Style Personal Use Regular'; font-style: normal; font-weight: normal; src: local('Vegan Style Personal Use Regular'), url('Vegan Style Personal Use.woff') format('woff'); }` — Mehraj Khan, Mar 04 '20 at 07:17
look at this answer: https://stackoverflow.com/a/24990647/2720657, if you set a "format" it must be `format('truetype')` and not `format('ttf')`, maybe this helps you out — J4R, Mar 04 '20 at 07:33
Yeah I think this is what stopped the fonts that I had working from working. However I still can only use certain fonts — S.Banfield, Mar 04 '20 at 07:35

Mehraj Khan · Answer 1 · 2020-03-04T07:49:39.990

0

You can give any string in the Font-family but don't use spaces. Font-family is targetted by using src URL only.

@font-face {
font-family: 'vegan-style-personal-use-regular';
font-style: normal;
font-weight: normal;
src: url('VeganStylePersonalUse-5Y58.ttf') format('ttf');
}

<h3 style="font-family: 'vegan-style-personal-use-regular'">Eos qui sapiente doloribus dolorem rerum.</h3>

Change src url as per your directory path.

edited Mar 04 '20 at 07:49

answered Mar 04 '20 at 07:21

Mehraj Khan

927
6
17

Nevermind, I got what you said to work but im back at square one. That is, when i swap out this font for the other custom font it doesnt work. – S.Banfield Mar 04 '20 at 07:26
@S.Banfield Read this article https://www.cufonfonts.com/font/vegan-style-personal-use above my code is working fine I had tested and I edit my answer check now. – Mehraj Khan Mar 04 '20 at 07:31
I dont think u get what Im saying. I can get the Vegan Style Personal Use font to work just fine even with the small bit of code I used originally. But I cant use the runescape_uf font even though its the same format in the same directory and im just switching out the names in the src edit: even when Im using your code I can still only get the Vegan style font to work – S.Banfield Mar 04 '20 at 07:38
@S.Banfield I edited my answer have you check it? this code is working fine instead of space use `-` – Mehraj Khan Mar 04 '20 at 07:42
That wouldnt be a problem as your just setting the name that the file is referring to that font. Like a variable u could set it to any string and then when telling the h3 what font family it is just use that same variable. – S.Banfield Mar 04 '20 at 07:49

score 0 · Answer 2 · answered Mar 04 '20 at 07:46

0

For whatever reason this particular font would only work in browsers by converting the truetype file to a woff file and then altering the code to suit this. ie.

@font-face {
    font-family: 'rs';
    src:url('Runescape.woff') format('woff');
}

I'm still uncertain as to why one font was supported as a ttf font but the other font needed to be a woff file.

answered Mar 04 '20 at 07:46

S.Banfield

1
1

Might be licensing. Some fonts are blocked from web use I think. The conversion to woff might remove the block, but you should still check that the licence allows you to use it on the web. Otherwise, truetype is a complicated format, and some fonts aren't fully compliant with the standards. It might be that the browser just can't interpret the font file correctly. – Alohci Mar 04 '20 at 10:34

Is there some restriction to what fonts @font-face, will accept?

This will work

However this wont

2 Answers2