@font-face issues
In #merchandise h1
, font-family: "Bebas Neue"
needs to be font-family: "BebasNeueRegular"
or
In @font-face
, font-family: 'BebasNeueRegular'
needs to be font-family: 'Bebas Neue'
Diventare Creative
Diventare [di-ven-tà-re] To become, to grow (into), to turn into. Andrew DeSumma has been a print and web designer for over a decade. His new firm, Diventare Creative, is excited to help grow your business. Diventare Creative is a graphic design firm specializing in web design, corporate branding and printed collateral. Our mission is to collaborate with our clients, listen to their needs and provide a final product that results in a professionally designed solution that meets their goals.
Updated on July 09, 2022Comments
-
Diventare Creative almost 2 years
I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using @font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
@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;
The other styles sheets for layout, etc call the font like this:
} #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 the font installed.
-
Diventare Creative over 13 yearsThanks Josh. Stupid. The font is named BebasNeueRegular, so it must have been something else I was referencing as I wrongly used Bebas Neue when trying to call the font. Also, I was supposed to use a single quote as in 'BebasNeueRegular' instead of "BebasNeueRegular". Thanks for pointing it out to me :) Too many projects, not enough sleep!