I downloaded a free font and have the .ttf file in a folder on my local server. However, I can't seem to be able to get the font to actually work. This is the code that I found online for applying an external font:
#font-face {
font-family: simplifica;
src: url(fonts/simplifica.ttf) format('truetype');
}
.header {
font-family: simplifica;
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
To clarify, I did change the file name because I read somewhere that capital letters can cause unexpected problems for browsers like IE. The original file name was "SIMPLIFICA Typeface.tff".
Also, I am using Brackets text editor and it's "live preview" function.
If you haven't other formats, try convert this font with https://www.fontsquirrel.com/tools/webfont-generator
Try to Import other font formats like woff and eot and try this code
#font-face {
font-family: simplifica;
src: url(fonts/simplifica.eot?#iefix) format('embedded-opentype'),
url(fonts/simplifica.woff) format('woff'),
url(fonts/simplifica.ttf) format('truetype');
}
if the font folder is the same place as the css folder who contain the css file replace "fonts/" with "../fonts/"
Related
i have a font-awesome CSS-Fille which i load in the footer of my website. In the CSS File the fonts are loaded kike this:
font-display:swap;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix)
format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-
brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf)......
not i look for an solution to preload these fonts. Is there an easy way to do that?
Not sure if thats what you mean, but you can define a font-face in a seperate css file, e.g.:
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-400.eot');
}
#font-face {
font-family: faBrands;
font-weight: 400;
src: url('/webfonts/fa-brands-500.eot');
}
Assuming the folder webfonts is under public, you can then write in a css file:
font-family: faBrands;
Just make sure to import the font face css file first.
I'm trying to make the below code work to upload the font TrashHand to my website in Wordpress. I have edited out the website name but otherwise the code remains the same.
The code is contained in my style.css file and I know that Wordpress is reading the file because when I change the color line below, it changes the color of the text.
I also know that my url is correct because if I paste the url into my browser, the font downloads automatically.
I may be making a dumb mistake as I am a novice at css, but any help would be much appreciated.
#font-face {
font-family: TrashHand;
src: url(##websitename##.com/wp-content/themes/twentyseventeen-
child/fonts/TrashHand.ttf);
}
p {
font-family: TrashHand;
color: green;
}
h1 {
font-family: TrashHand;
}
change these lines
src: url(##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
to
src: url(/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf);
}
No websitename is needed as the src is looking for an absolute URL
you should use .woff and .woff2 font format with .ttf
#font-face {
font-family: 'TrashHand';
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff2') format('woff2'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.woff') format('woff'),
url('##websitename##.com/wp-content/themes/twentyseventeen-child/fonts/TrashHand.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
you can generate woff and woff2 online using your .ttf file.
I am trying to use a custom font called BebasNeue Regular, I am planning to put my website online so it shouldn't only be visible on my local pc. I used the following CSS to import the font:
#font-face {
font-family:BebasNeue Regular;
src:url("BebasNeue Regular.ttf");
}
.text h1 {
margin:auto;
text-align:center;
font-size:15vw;
text-transform:uppercase;
font-family:BebasNeue Regular;
}
Will this font be visible to other people?
#Tommy O is correct about the "fallback" system. If you you only have the ttf version, you should use Online Font Converter to create the font-files with the desired formats. The final product will also give you a sample css file that shows you how to apply them properly. In your case, it would look like this:
#font-face {
font-family:'BebasNeue Regular';
src: url('BebasNeue Regular.eot');
src: url('BebasNeue Regular.woff') format('woff'),
url('BebasNeue Regular.ttf') format('truetype'),
url('BebasNeue Regular.eot?#iefix') format('embedded-opentype');
}
1.) For font names that have a space in them, use quotes:
#font-face {
font-family:"BebasNeue Regular";
src:url("BebasNeue Regular.ttf");
}
.text h1 {
margin:auto;
text-align:center;
font-size:15vw;
text-transform:uppercase;
font-family:"BebasNeue Regular";
}
But I actually doubt that the ttf file of the font has a space in its name (as you wrote it above), so you better check that, and if it does, replace the space (in the filename) with an underscroe, like BebasNeue_Regular.ttf.
2.) This code will only work if the font file is in the same directory (on the server) as your html or php file (i.e. the webpage itself).
I need to be able to use specific Telugu fonts on my website. I have the ttf file and I generated the .eot, .woff, .woff2 and .svg files required. I followed the instructions on the site below and created my stylesheet as shown below
#font-face {
font-family: 'sree_krushnadevarayaregular';
src: url('Sree Krushnadevaraya-webfont.eot');
src: url('Sree Krushnadevaraya-webfont.eot?#iefix') format('embedded-opentype'),
url('Sree Krushnadevaraya-webfont.woff2') format('woff2'),
url('Sree Krushnadevaraya-webfont.woff') format('woff'),
url('Sree Krushnadevaraya-webfont.ttf') format('truetype'),
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
font-weight: normal;
font-style: normal;
}
.badifont {
position: relative;
top: 1px;
display: inline-block;
font-family: 'sree_krushnadevarayaregular';
font-style: normal;
font-weight: normal;
line-height: 1;
}
https://css-tricks.com/snippets/css/using-font-face/
However, when I use the new class that I created, the text does not show up in the font that I am expecting. It is using the default Telugu Font that is available on my machine.
What am I missing?
I looked it up a little more and found this solution.
Go to Google Fonts and type in the name of your font. Most fonts I needed were already taken care of by Google. You can then copy the markup google provides and put it in your code.
So I had to do this
<link href='http://fonts.googleapis.com/css?family=Tenali+Ramakrishna|Sree+Krushnadevaraya&subset=telugu&effect=outline|3d-float' rel='stylesheet' type='text/css'>
Then I setup my stylesheet with the name of the font in the font-family as 'Sree Krushnadevaraya' and it worked.
3 things to check: in all your font files, remove the space, or put an underscore instead of space for instance:
Sree_Krushnadevaraya-webfont.eot
Then adjust those file names in your code for #fontface.
Then open your svg file in a text editor. check what is on the id of your font--it is usually around line 6, <font id=...>
Make sure you are using that exact font id name here AFTER the hashtag (#):
url('Sree Krushnadevaraya-webfont.svg#sree_krushnadevarayaregular') format('svg');
Then make sure all your fonts and css is uploaded again.
#font-face {
font-family: iconFont;
src: local(iconFont), url('fonts/iconFont.ttf') format('opentype');
}
The font file is not corrupt and installs fine in OSX etc. letting me preview it. But it won't render anything when I try to use it on a web page or even if I select it in illustrator it just switches to another font if I touch any key.
The font is for 'regular' and I have tried other options, but it won't work. Have tried typing with caps on/off etc. Using numpad, nothing. Have re-installed it and made sure there are no duplicates. It also won't work in Windows. Not sure if I need to change my css somehow or the fault lays with the font.
Here's a link to the font for anyone wanting to try. It's a bunch of metro icons. http://www2.zippyshare.com/v/23494573/file.html
Not sure if this will help, but this is the CSS I use, and it works fine. The webfonts directory is in the same directory as the css file, and includes three file types: .eot .ttf .woff
#font-face {
font-family: 'AvenirLT-Book';
src: url('webfonts/25EE2B_0_0.eot');
src: url('webfonts/25EE2B_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/25EE2B_0_0.woff') format('woff'), url('webfonts/25EE2B_0_0.ttf') format('truetype');
}
a typical class decleration:
.AvenirLT-Book {
font-family: AvenirLT-Book;
font-weight: normal;
font-style: normal;
}
perhaps you need to change the format to ('truetype') instead of ('opentype') ?