Clash Royale CLAN TAG

font face not working anywhere

Can someone tell me what I'm doing wrong here ?

@font-face {
font-family: 'Knockout';
src: url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF70-FullWelterwt.woff2") format('woff2'), url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF70-FullWelterwt.woff") format('woff'), font-weight normal;
font-style: normal;
}
@font-face {
font-family: 'Knockout';
src: url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF28-JuniorFeatherwt.woff2") format('woff2'), url("https://s3.eu-west-3.amazonaws.com/wespeakhiphop-assets/Knockout-HTF28-JuniorFeatherwt.woff") format('woff'), font-weight 100;
font-style: normal;
}
.name {
text-transform: uppercase;
font-family: 'Knockout', Helvetica, Arial, sans-serif;
font-size: 3em;
line-height: 0.8em;
}


https://codepen.io/romainmalauzat/pen/vadmzb

I tried also with local font on my computer on localhost, but the font wasn't loading either.

2 Answers
2

Download the webfonts and use them as such:

@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}


You can put the whole path in the URL because sometimes on localhost they only work like that.

First Download the font into your local pc

and use like this

Note: Please check your font file is in fonts folder, and your css file is out of the fonts folder?

Let me know further clarification

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


If this trick is can't work then use below trick, B'coz It's all depends your folder structure.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
url('fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.