Custom font not displaying with @font-face?
I think the way you write it (i.e. separate src
definitions for all the available formats) makes the woff2
format overwrite all the others, so if a browser can't handle woff2, it won't work.
So instead of all those semicolons and repeated src
, try it this way:
@font-face {
font-family: 'Robotica';
src: url('robotica.eot') format('embedded-opentype'),
url('robotica.woff') format ('woff'),
url('robotica.ttf') format ('truetype'),
url('robotica.otf') format ('opentype'),
url('robotica.woff2') format ('woff2');
font-weight: normal;
font-style: normal;
}
(same/similar for the other font)
EDIT (moved from comment to answer): In addition, you should remove the spaces between format
and the subsequent opening parenthesis of the format description (like format('woff') instead of format ('woff').
@font-face not working
Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:
If your index.html is in the folder html/files
and the fonts are in html/fonts
, the .. is fine (because you have to go back one folder to go to /fonts
). Is your index.html in html
and your fonts in html/fonts
, then you should use only one period.
Another problem could be that your browser might not support .eot font-files.
Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.
Edit: Forget the .eot part, I missed the .ttf file in your css.
Try the following:
@font-face {
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf);
}
Using a font-face embedded font as hyperlink does not work
Have a look at this answer -- most browsers appear to limit what styles you can apply to some pseudo classes. The answer I linked to applies to :visited
, but I wouldn't be surprised if similar limitations applied to :link
. Try just styling a
, not a:link
-- I'm guessing you probably want your font to be used for all types of links anyway.
@font-face not working at all
We couldn't figure out another way around, as it appeared all of our settings on Amazon were fine. Instead, we just embedded the font definition itself into a data-uri call, as seen below. Much of the font definition has been omitted to size constraints of answers in StackOverflow, but this should give you a good idea of our approach.
@font-face {
font-family: "PFDinTextPro-Light";
src: url("233cd7_2_0-webfont.eot");
}
@font-face {
font-family: "PFDinTextPro-Light";
font-style: normal;
font-weight: normal;
src: url("233cd7_2_0-webfont.eot?#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAFq4ABEAAAAAmrQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcYqvy...dRcDMyMXA5M2mM+m4LqJvRPKYQVy2CKhHBYgh9USyuGAaJOCaeMESnLMgHAYN3BBDecFinIdZ9LeyOxWBuTyALm8+XAuN5DLEwjn8oGM5Kr/zwAX4Qcq4HsC5woAufy1MG7kBhFtANGLRQMAAVB7j+oAAA==") format("woff"), url("233cd7_2_0-webfont.ttf") format("truetype");
}
Related Topics
CSS Floating Inline Elements (960 Gs)
Merge Ttf Font Files (For Using in CSS)
How to Override Bootstrap Style
Bad Cursor in Select/Option, Ie
Embedded Background Svg Doesn't Display on Firefox If It Has a "Fill" Attribute
Whats Wrong with The Media Query
How to Create a Child Theme in Wordpress
Elements with Animation Delay Briefly Appear Before Fading in Using Purely CSS3 Keyframes (No Js)
Chrome Will Increase The Font Size When Zooming Out
Image Downscaling with CSS … Images Are Blurry in Several Browsers
How to Select My CSS Module Class Using Document.Queryselector
Ie9-11 Detecting Transform-Style: Preserve-3D
How to Do Less @Import Without @Import Literally
How to Work Around Ie Not Supporting: After