Im using SourceSansPro-Bold. I have one file ttf downloaded, and I have other format declared as google links. But my question is if the these links are correct?
The problem is that Google links has word 'V4 declared, probably version 4, but I need fonts in version "bold".
How to check if there are the same fonts (both in bold version)?
Or how to modify google link to get bold font for sure?
Css Font definition:
#font-face {
font-family: 'source sans pro';
font-style: normal;
font-weight: bold;
src: font-url('SourceSansPro-Bold.ttf');
src: font-url('SourceSansPro-Bold.ttf') format('truetype'),
local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eot) format('embedded-opentype'),
url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
Google font declaration with V4 string inside:
http://themes.googleusercontent.com/static/fonts/sourcesanspro/v4/toadOcfmlt9b38dHJxOBGBlTL9oEQvYTI0YAW1-Ysv0.eo
You can select which weight of font you want here:
https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro.
If you want to download these files locally.
Visit the href from the <link>
Visit the url: from the #font-face of the font you need.
This will download the font.
Related
In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs:
the icons are of font awesome and class fa fa-ANYEXAMPLE exists
the fonts are in a folder (/css/fonts) as it should be
the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site
I consider that my links are correct, since the icons load correctly most of the time
What could the problem be?
Open your style.css and link to FontAwesome using font-face:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Just make sure to edit the paths if they are any different.
I have create custom font family for a font named "Edwardian-Script-ICT". I download the "ttf" formate and convert it by a online font converter Everything Fonts.
Here is my CSS code.
#font-face{
font-family: "Edwardian-Script";
src: url('font/Edwardian-Script-ITC.eot') format('embedded-opentype');
src: url('font/Edwardian-Script-ITC.woff') format('woff'),
url('font/Edwardian-Script-ITC.ttf') format('truetype'),
url('font/Edwardian-Script-ITC.svg') format('svg')
}
h1{
font-family:'Edwardian-Script',sans-serif;
font-size: 60px;
font-wight: normal;
}
And here is my css folder structure.
css
-font
-Edwardian-Script-ITC.eot
-Edwardian-Script-ITC.svg
-Edwardian-Script-ITC.ttf
-Edwardian-Script-ITC.woff
-style.css
The font works fine for some days. But after 10-15 days the font don't work and it fallback to normal font. But when I clear my recent browser history it appears again. I don't understand what is the problem. Can anybody help me ?
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.
I'm using a new CDN and recently I made a google font for my website menu. Now I activated the CDN, but the "custom font" shall I say is not appearing. All images, files and css are OK. Only this custom font.
I have this in the style.css (I have the fonts stored in my server).
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.eot');
src: url('DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
url('DroidKufi-Bold.woff') format('woff'),
url('DroidKufi-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;}
#font-face {
font-family: 'Droid Arabic Kufi Bold';
src: url('DroidKufi-Bold.ttf');
My website is http://www.formulawahad.com // Is there a fix for that?
Thanks a lot.
This issue is maybe related to CORS. Your CDN provider need to enable cross-origin resource sharing (CORS). This will set the header to: Access-Control-Allow-Origin “*”. Otherwise is the content rejected.
Does anyone know how to use the Font Squirrel #font-face kit generator, or something similar, to output a variant of a font, i.e. the bold variant?
I am using Gill Sans on my website and it is set to "font-weight: 900" or "font-weight: bold," which looks great on my machine because it has the font installed. But if I just embed the font generated by Font Squirrel, I only get the "regular" variant and "bold" doesn't display correctly.
Does anyone know of a way to embed the bold variant of a font?
There is only one file for Gill Sans, and when I upload it, here is what Font Squirrel gave me:
#font-face {
font-family: 'GillSansRegular';
src: url('../fonts/gillsans-webfont.eot');
src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
}
The original file no doubt contains the information for bold, italic, etc., but I'm wondering if Font Squirrel strips out the variants, leaving me with only the "regular" variant.
Even if I just add bold to everything it doesn't show up bold anywhere:
#font-face {
font-family: 'GillSansBold';
src: url('../fonts/gillsans-webfont.eot');
src: local('☺'), url('../fonts/gillsans-webfont.woff') format('woff'), url('../fonts/gillsans-webfont.ttf') format('truetype'), url('../fonts/gillsans-webfont.svg#webfontDATch26L') format('svg');
font-weight: bold;
}
Nothing is bold even when I strip all font-familys and font-weights from anywhere else in my stylesheets. Everything just shows up as Gill Sans Regular.
I just received an email from Font Squirrel: the generator doesn't split .dfont files in the current version, so that explains it.