How do I embed a custom website font in ttf format for all browsers?
68,427
Solution 1
The following code should work:
@font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
Solution 2
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTF
to agencyr.ttf
and in your css file:
src: url('agencyr.ttf');
Comments
-
SDZ almost 4 years
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
This is my code:
<style type="text/css"> @font-face { font-family: 'AgencyFBRegular'; src: url('agencyr.eot'); src: url('agencyr.eot?#iefix') format('embedded-opentype'), url('agencyr.woff') format('woff'), url('AGENCYR.TTF') format('truetype'), url('agencyr.svg#AgencyFBRegular') format('svg'); } h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%; border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px; </style>
I thought it was working everywhere until I used a friend's laptop to view it.
Can you see where I'm going wrong?
UPDATE: I have updated font CSS. It seems to be working, but now not on iOS.