enter code hereI am working on a Sitefinity 3.7 site and the template I'm building requires some custom fonts from the 'opensans' font family. I created a folder called "Fonts" inside the theme I made for this template and put the .svg, .eot, .tff, and .woff files in there. In the style sheet, I have tried setting up some of the opensans fonts I will be using but they don't appear to be working--I just see standard Arial/Verdana fonts in the browser.
#font-face {
font-family: 'open_sansregular';
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot');
src: url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.woff') format('woff'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.ttf') format('truetype'),
url('/App_Themes/ResCare/Fonts/opensans-regular-webfont.svg#opensansregular') format('svg');
font-weight: normal;
font-style: normal;
}
I figure I must be doing this wrong but I'm not sure what's wrong. I've never tried to add in custom fonts into a Sitefinity site before, and I know this is an old site, but I can't help the latter.
Is there a way to get these opensans fonts to work for my template?
Add this cdn from google fonts in your header and apply the css to any element you wish to have Open Sans as the font.
HTML
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
CSS
font-family: 'Open Sans', sans-serif;
Here is the original link so you can edit the information and view the documentation if you wish: http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
Related
I am not sure what is wrong, but my phone was unable to show my blog post using this font. It reverts back to the standard font used in blogspot again
#font-face{
font-family: 'citystencilregular';
src: url('https://www.dropbox.com/s/3p2opgb34hqtabs/citystencil-webfont.woff2?dl=0') format('woff2'),
url('https://www.dropbox.com/s/0vrf25i02ol7qpz/citystencil-webfont.woff?dl=0') format('woff');
font-weight: normal;
font-style: normal;
}
Of course you can not. If I use your link, I do not get the font file, but an HTML which offers me download the file to load page.
Get this to work needs the font file being send back, not a html page.
Like here: https://fonts.googleapis.com/css?family=Open+Sans
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.
The font was working across my site but then stopped working on all but the homepage (using Chrome). I checked it out in Firefox and the font isn't working at all. I uploaded the font to my root folder using the Font Squirrel web font generator.
Font Face
#font-face {
font-family: 'antonioregular';
src: url('antonio-regular-webfont.eot');
src: url('antonio-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('antonio-regular-webfont.woff') format('woff'),
url('antonio-regular-webfont.ttf') format('truetype'),
url('antonio-regular-webfont.svg#antonioregular') format('svg');
font-weight: normal;
font-style: normal;
}
HTML
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
Heading
h6 {
font-family: 'antonioregular', 'Spinnaker', sans-serif;
font-weight: 400;
line-height: 1.2;
margin: 0 0 16px;
}
The file you are loading your fonts on has to be in the same directory, because you do not have any path associated with the font, just the file. Since you say you uploaded it to root, this would explain why only the homepage is getting it.
Provide a relative or absolute path to the files and it should get picked up everywhere.
Do those URLs actually point to your font? If you are at http://example.com/foo/bar it will be looking for the font in your foo folder. If the font is in the root, this will fail. Perhaps you meant to include path information in the URL, in your case most likely src: url('/antonio-regular-webfont.eot');.
Note: You should be able to use a browser's developer tools to see the requests being made, and the likely 404 returned. This should evoke the "that's not the right location, what is going on?" response.
Please excuse my ignorance but my head is starting to spin trying to figure this out.
My wordress website was fine with the google webfont I was using. But then I noticed it looks terribly faded in Internet Explorer. After some googling I discovered one solution could be to use the "kit" instead eg from fontsquirrel (although I don't know if this is true or not). So I got the "webkit" for my font. I uploaded the .eot, .woff, .ttf, and .svg files to a folder titled "fonts" in my child theme folder. I then took the code from the webkit's stylesheet and added "/fonts" to each url line (see below code), and pasted the code into the custom CSS section (my child theme has a custom CSS box beside the universal font section). This does not show my Gruppo font in anywhere, let alone Internet Explorer. Am I following the right steps to make my font look unfaded in Internet Explorer? If so, what am I doing wrong?
#font-face {
font-family: 'grupporegular';
src: url('/fonts/gruppo-regular-webfont.eot');
src: url('/fonts/gruppo-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/gruppo-regular-webfont.woff') format('woff'),
url('/fonts/gruppo-regular-webfont.ttf') format('truetype'),
url('/fonts/gruppo-regular-webfont.svg#grupporegular') format('svg');
font-weight: normal;
font-style: normal;
}
I am using Google Web Fonts inside my CSS stylesheet like below
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');}
but when my website goes from secured page, I am getting "only secured content is being displayed". I used Google Chrome Resource Inspector and it pointed above was the issue
How can I add a secured link to the Google Web font in my CSS file
Thanks
You don't need #font-face to use a Google Font.
Just add this in your HTML code:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Then add the font name in your CSS. Example:
body{font-family: 'Open Sans', sans-serif;}
Bit old but it came up on a related search so it may be useful to someone.
I personally put the #font-face declaration in my stylesheets rather than requesting it in the head. Just remove the 'http:' like below, should solve the problem.
url(//themes.googleusercontent.com/static/fonts/opensans/...) format('woff');
Why not use #import statement?
At the top of your css file:
#import url(http://fonts.googleapis.com/css?family=Open+Sans);