I want to use the font Open Sans on my Grails project, so I placed the fonts in the web-app directory under the 'fonts' folder. Afterwards, I added this to my CSS:
body{
background-color: #FFFFFF;
font-family: 'OpenSans', arial, sans-serif;
font-size: 14px;
}
but it still won't work. Initially, I used the link href from Google fonts and placed it in the of my main.gsp... didn't work.
Add following to your view or layout
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
Ref:- Font not applied in my web application
If your .css file is in a folder then write the following code at the beginning of your .css file
#font-face {
font-family: 'Open Sans', sans-serif;
src: url('../font/yourfontname.eot');
src: url('../font/yourfontname.eot') format('embedded-opentype'),
url('../font/yourfontname.woff') format('woff'),
url('../font/yourfontname.ttf') format('truetype'),
url('../font/yourfontname.svg#MuseoSans100') format('svg');
}
so use ../font/yourfontname.eot
Related
What will browser(Chromium) load and use if we have the following case:
Inside css file we load local font like
<style>
#font-face {
font-family: 'Gotham';
font-style: normal;
font-weight: 400;
src: url('fonts/Gotham-400-Book.woff2') format('woff2'),
url('fonts/Gotham-400-Book.woff') format('woff');
}
</style>
and inside html we have same font loaded through some CDN like:
<link href="http://fonts.cdnfonts.com/css/gotham" rel="stylesheet">
then in our css styles we use it like
font-family: 'Gotham', sans-serif;
note Gotham is used here only for example purpose.
I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}
I would like to know If we can upload any font on our website ??
Where can I download a font or google font and upload it on my css file directly like that :
#font-face { font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: 300;
src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); }
instead of use this sort of code :
#import url(http://fonts.googleapis.com/css?family=Source+Sans Pro:200italic,200,300italic,300,400italic,400,600italic,600,700italic,700,900italic,900);
thank you
See don’t use #import.
Prefere LINK tag :
<link rel='stylesheet' href='a.css'>
Download Source Sans Pro webfont and make CSS file with these rules :
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Regular.otf');
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Bold.otf');
font-weight: bold;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Italic.otf');
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-BoldItalic.otf');
font-weight: bold;
font-style: italic;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-Light.otf');
font-weight: 300;
}
#font-face {
font-family: SourceSansPro;
src: url('source-sans-pro/SourceSansPro-LightItalic.otf');
font-style: italic;
font-weight: 300;
}
Using a Custom Web Font
I found this youtube video online. It gives the instructions step by step.
https://www.youtube.com/watch?v=KPwG67lEFdc
I listed the steps here go to http://www.google.com/fonts/
find a font that you like, click the quick use link. Scroll down again and copy the link that looks like the following.
http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Next integrate the fonts into your CSS. The Google Fonts API will generate the necessary browser-specific CSS to use the fonts. All you need to do is add the font name to your CSS styles. For example:
font-family: 'Open Sans', sans-serif;
True, like #Jukka said, some fonts aren't free, so you'll have to search. Luck is that:
Raleway - http://www.fontsquirrel.com/fonts/raleway
and Open Sans - http://www.fontsquirrel.com/fonts/open-sans
are free, so you just have to download the TTF (big blue button), inside the zip there's the whole set of weights and styles of the font.
Then you have two options:
Upload the .ttf directly to your ftp and call it into your css, as you stated; or
Use the Webfont Generator (http://www.fontsquirrel.com/tools/webfont-generator) to create another types (.woof, .eot, .svg), because of browsers.
FYI, Chrome in the last few versions (< 39) had a problem with some fonts, and just the .svg extension corrected the bug.
I'm trying to use a font I installed called "Bebas Neue" from dafont.com on my web page. I am running Ubuntu and I opened the font in font viewer and it successfully installed. Now I have tried referencing the font like so in my CSS:
font-family: 'Bebas Neue', sans-serif;
However this is displaying the default font still. Am I referencing it correctly or do I need to do more to use this font?
Use the #font-face method. http://fontsquirrel.com has a lot of free and free-for-commercial use resources on this. You can upload a font into their generator and it will give you a neat kit with cross-browser font files and instructions.
Here's an example:
#font-face {
font-family: 'OpenSansLight';
src: url('fonts/fonts/OpenSans-Light-webfont.eot');
src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Light-webfont.woff') format('woff'),
url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
font-weight: normal;
font-style: normal;
}
And then reference this on whatever element you want to apply this to
<style type="text/css">
div {
font-family: OpenSansLight;
}
</style>
<div>
This is OpenSansLight!
</div>
try
#font-face
{
font-family: myFirstFont;
src: url('Bebas Neue.ttf'),
url('Bebas Neue.eot'); /* IE9 */
}
where src is path to the font.
put font into your project folder.
and use that as below,
div
{
font-family: myFirstFont;
}
I have done this before, but still haven't mastered it. I downloaded a font kit from fontsquirrel.com and tried to get my custom font to work on my site. I have tried so many variations including the "bullet proof" methods found online that I have now confused myself. Could someone look at the code below and show me how to correctly get a custom font to work on a website using #font-face?
I have a style sheet named fonts.css located in a folder named css. This is being used to call the custom font. The font files are located in a folder from the root named fonts.
The css for the style sheet fonts is:
#font-face {
font-family: 'BebasNeueRegular';
src: url('../fonts/bebasneue-webfont.woff') format('woff'),
url('../fonts/bebasneue-webfont.ttf') format('truetype'),
url('../fonts/bebasneue-webfont.webfontABYyK1dn') format('svg');
font-weight: normal;
font-style: normal;
The other styles sheets for layout, etc call the font like this:
}
#merchandise h1 {
font-family: "Bebas Neue", Arial, Helvetica, sans-serif;
font-size: 33px;
font-weight: normal;
line-height: normal;
text-transform: uppercase;
letter-spacing: 1px;
}
Anything obvious? Of course, it works locally on my machine because I have the font installed.
In #merchandise h1, font-family: "Bebas Neue" needs to be font-family: "BebasNeueRegular"
or
In #font-face, font-family: 'BebasNeueRegular' needs to be font-family: 'Bebas Neue'