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.
Related
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.
It's possible to use downloaded fonts on a local web page (XAMPP) without internet connection ? I need this to see the fonts because some people maybe can't afford internet connections and they use theirs computers only to work.
This is the web font: http://openfontlibrary.org/en/font/didact-gothic
I tried this with no luck: http://css-tricks.com/snippets/css/using-font-face/
Thanks in advance!!!!
EDIT
I think the place where the files are stored is the problem because I have this .css and no work. The place of all my files is /opt/lammp/htdocs
#font-face {
font-family: 'DidactGothicMedium';
src: url('didactgothic.eot');
src: url('didactgothic.eot') format('embedded-opentype'),
url('didactgothic.woff') format('woff'),
url('didactgothic.ttf') format('truetype'),
url('didactgothic.svg#DidactGothicMedium') format('svg');
}
p {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
padding-left: 25px;
padding-right: 25px;
}
input {
font-family: 'Didact Gothic';
font-weight: normal;
font-style: normal;
}
Yes it's possible, if you just go to your localhost in the browser it should work just like when you would port forward it and go there with your own IP/Domain.
If that #font isn't working for you, make sure 1) You use Chrome/Firefox (Internet explorer only supports certain file exentions (.otf I think).
and 2) You have the right path setup!
Also maybe some of your html/css code could help us awnser your question :)
You have to use a web font kit, which you can download from sites like http://convertfonts.com, include the style and font files and the font will work on local development, but for that you first need a otf or ttf file for the font to download the webkit.
just make a fonts folder, like you have css, js folder and in your css file just include /fonts/, like
#font-face { font-family: 'MuseoSans-100';
src: url('fonts/museosans-100.eot');
src: url('fonts/museosans-100.eot') format('embedded-opentype'),
url('fonts/museosans-100.woff') format('woff'),
url('fonts/museosans-100.ttf') format('truetype'),
url('fonts/museosans-100.otf') format('opentype'),
url('fonts/museosans-100.svg#MuseoSans-100') format('svg');
} just an example
if your css file is in another folder make the changes to url, correspondingly
I am working on a webfonts server and I got the api to spit out the css with the correct mime types.They are also getting linked to the page.
#font-face {
font-family: 'Pagul';
src: url('http://localhost:5000/api/webfonts/static/Pagul.eot');
src: local('☺'), url('http://localhost:5000/api/webfonts/static/Pagul.woff') format('woff'),
url('http://localhost:5000/api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
The ttf,eot files can be downloaded manualy using the links, for some reason these fonts are
not loaded by the browser what am I doing wrong here ? The font files dont have proper mimetypes is that the issue ?
I tried font-squirells syntax also,it's not working.
PS: The Css is dynamically generated and added to the head ?
Use relative paths instead of absolutes. For example, if your CSS is in site/css/style.css and your fonts are in the site/api/webfonts/static/ directory:
#font-face {
font-family: Pagul;
src: url('../api/webfonts/static/Pagul.eot');
src: url('../api/webfonts/static/Pagul.woff') format('woff'),
url('../api/webfonts/static/Pagul.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}
Alternatively, use a service like Google Fonts and either link their CSS on your HTML or import it directly into your CSS
In one of my website I have used Ænigma Scrawl 4 BRK font(as it is showing in my photoshop font family box). Now I want the same font in my page. So for that I just went to FontSquiirel site for generate css style. There I got my css file with the font with different extensions like .svg, .ttf, .woff. I just paste all the fonts in my folder then I used the same converted css in my style.css file. The generated css was like this
font-family: 'nigma_scrawl_4_brkregular';
src: url('aescrawl-webfont.eot');
src: url('aescrawl-webfont.eot?#iefix') format('embedded-opentype'),
url('aescrawl-webfont.woff') format('woff'),
url('aescrawl-webfont.ttf') format('truetype'),
url('aescrawl-webfont.svg#nigma_scrawl_4_brkregular') format('svg');
font-weight: normal;
font-style: normal;
But after all that my font style has not been changed. I am checking in both firefox and chrome. I have cleared all the cache and cookies from my browser. Can someone kindly tell me what is the wrong here? Any help and suggestions will be appreciable. Thanks
#font-face {
font-family: 'nigma_scrawl_4_brkregular';
.
.
.
.
font-style: normal;
}
Try this
#font-face{
font-family : "myCustomFont";
src:url(aescrawl-webfont.ttf);
}
body{
font-family:"myCustomFont", Arial;
}
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .