I have done this before, but still have not dealt with it. I downloaded a font set from fontsquirrel.com and tried to get my custom font to work on my site. I tried so many variations, including the "bulletproof" methods found on the Internet that I just confused. Can someone look at the code below and show me how to get a custom font to work on a website using @ font-face?
I have a stylesheet named fonts.css located in a folder named css . This is used to invoke a custom font. Font files are located in a folder from the root named fonts .
CSS for the font style sheet :
@font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
Other style sheets for layout, etc. call the font as follows:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have a font installed.
source
share