This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 7 years ago.
I would like to use googles "source sans pro" font in the font-family attribute in CSS, in my HTML site. I use Bootstrap as a front end framework.
https://www.google.com/fonts/specimen/Source+Sans+Pro
How can I achieve that?
Do I have to include the file into my html site?
Thank you for any help!
Add this string in head section of your site:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
Then use this font:
h1 {
font-family: 'Source Sans Pro', sans-serif;
}
The instructions are given on the link at the top of the page you show. https://www.google.com/fonts#UsePlace:use/Collection:Source+Sans+Pro
You include this in the head of your page:
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
and specify the font family in your CSS.
element {
font-family: "Source Sans Pro"
]
The fonts
You can select the fonts you want and you get a link:
for HTML
https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,900italic,900,700italic,700,600italic,600,400italic,300italic,300,200italic' rel='stylesheet' type='text/css'>
paste this link in your
Then use this in your css
font-family: 'Source Sans Pro', sans-serif;
so something like this
.class{
font-family: 'Source Sans Pro', sans-serif;
}
Related
I need three types of Ubuntu font. I don't want to download them.
I put this link in the tag:
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">
In Google tutorial: "Use the following CSS rules to specify these families: font-family: 'Ubuntu', sans-serif;".
How can I use Ubuntu Light and Ubuntu bold fonts? As I see it is not the same as font-weight: bold; or font-weight: 300;.
This is the link to use in the <head> tag:
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet">
within your CSS file use:
font-family: 'Ubuntu', sans-serif;
and
font-weight: 300
font-weight 300 is equivalent of light,
400 is regular and 500 is medium.
you should add light and medium fonts to your link like as
link to google font:
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500" rel="stylesheet"/>
css:
body {
font-family: 'Ubuntu', sans-serif;
}
.light {
font-weight:300;
}
.regular{
font-weight:400;
}
.medium{
font-weight:500;
}
working code: https://codepen.io/peker-ercan/pen/bxyEdK
I've CSS and XHTML files. I've downloaded all the ROBOTO fonts and put it in my "webapps/fonts/" folder.
In my XHTML i mentioned the CSS Path,
'<link href="../css/tab_ux.css" rel="stylesheet" type="text/css" />'
AND my CSS file have styles like,
#font-face {
font-family:roboto-bold;
src: url('../fonts/Roboto-Bold.tff') #ttf;
}
.UX_FontClass {
font-family: roboto-bolditalic !important;
font-size : 25px !important;
}
also mentioned XHTML in OutputText as styleClass="UX_FontClass "
Even though font is not working in any browser. What i did wrong with my code? OR Anything i missed out?
You should use google fonts, its really easy to use.
https://www.google.com/fonts#UsePlace:use/Collection:Robot
example
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
<p style="font-family: 'Roboto', sans-serif;">Hello World</p>
</body>
You are using custom font so you need to add a few font type format as well; like ttf, eot and svg for iphone, ipad devices.
Note: Some browsers supports different font type that's why you need
ttf,svg or eot.
#font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
Remember after that you need to add this code in class UX_FontClass
.UX_FontClass {font-family: 'Roboto', Arial, Helevtica, sans-serif; }
The error is in defining a font named roboto-bold in the #font-face clause, but trying to use a font named roboto-bolditalic later on. That is not the same family!
Solution: make sure the names match.
You probably meant
font-family:'roboto-bold'; font-style:italic;
or, since you're defining the size too, you could use the font shorthand
font:italic 25px 'roboto-bold';
And there's no need for the !important.
Why not use Google fonts?
Place in the header of your html:
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500italic,500,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
Use in your css:
font-family: 'Roboto', sans-serif;
its really easy to use in css.
#import url(http://fonts.googleapis.com/css?family=Roboto:700,400,500,300);
I'm trying to use and italic with google fonts and it's not working at all.
I included this line on my HTML.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400'
rel='stylesheet' type='text/css'>
For example, when I use the code below, all the texts look "normal" without bold and italic as expected. Any suggestions?
Thanks.
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the font according to its instructions (unless you understand well how the font works and can knowingly deviate from the instructions). In the interface, select Normal (selected by default), Normal Italic, and Bold, if you want just normal, italic, and bold (but not italic bold). Google then tells you what link element to use. And it works:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700'
rel='stylesheet' type='text/css'>
<style>
p { font-family: Open Sans }
</style>
<p>this is a <b>bold</b> text and this is <i>italic</i> text</p>
Use the 700 font declaration:
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
}
or, as in your example:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
and then:
.yourClass {font-family: 'Open Sans'; font-weight: 700;}
The same way for the italic, as it is claims when you define your CSS font-type, and in the guide.
I am using Google's Open Sans Font in my application.
I have defined the stylesheet as instructed:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
rel='stylesheet' type='text/css'>
I then used it on the body selector as:
body {
font-family: 'Open Sans', sans-serif;
}
I have not defined font family anywhere else. I assume that since I have defined it at the parent, the child elements will automatically inherit it.
However, if I open up the inspector for say an anchor tag in my application and see the computed styles for that tag, I find that (Chrome Latest) the "Rendered Font" says "Times New Roman 18 glyphs" - Is this correct? I was expecting it to say "Open Sans" - Is the Open Sans font not being applied?
Check out the codepen link. Its working fine for me !
.open-sans-font{
font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<div class="open-sans-font">
Stackoverflow rocks !!!
</div>
I never see Computer Modern font, the one shipped as default for LaTeX type setting system, on any webpage.
How to change the CSS so that font will actually work?
Using the Computer Modern font in webpages has become very easy! Just paste the following lines of CSS code in the head section of your html code in order to activate the sans-serif version of that font.
<style type="text/css">
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunss.otf');
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsx.otf');
font-weight: bold;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunsi.otf');
font-style: italic, oblique;
}
#font-face {
font-family: "Computer Modern";
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmunbxo.otf');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", sans-serif;
}
</style>
Note that the solution here makes the browser load the current version of the fonts from a CTAN mirror, which can be very slow. This is okay for testing purposes, but in the long run I'd recommend you download these .otf files to your own webserver.
You can just insert the https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css css-stylesheet into your html header. Like this:
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/dreampulse/computer-modern-web-font/master/fonts.css">
<style>
body {
font-family: "Computer Modern Sans", sans-serif;
}
</style>
</head>
You can use the font for production websites with any amount of traffic. Files are served via MaxCDN's super fast global CDN. There is no traffic limits or throttling.
The README.md on Github
Just for anyone in 2020 and onwards still looking for the optimised web fonts rather than the larger .otf fonts which are used in the answers above, I've hosted the Computer Modern font family via the jsDelivr CDN.
To use it, you can add a <link> to your html <head> which requests the optimised fonts through the following address:
https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css
Example Code:
<head>
<!-- Other imports... -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts#latest/fonts.css">
<style>
body {
font-family: "Computer Modern Serif", serif;
}
</style>
</head>
Check out the documentation here
Nowadays you can download everything you need (font files and css) from this webpage:
http://checkmyworking.com/cm-web-fonts/
Then the only thing you need to do is to add the corresponding css files to the header section of your html file like:
<head>
<meta charset="UTF-8" />
<title>Test</title>
<!-- Computer Modern Serif-->
<link rel="stylesheet" href="fonts/Serif/cmun-serif.css"></link>
...
</head>
you cannot, up until CSS 2.1 you can only use the fonts that are ACTUALLY installed on the client's computer. In CSS 3 there are some ways to embed fonts in your webpage but those ways are not greatly supported by browsers yet.
Have a look here: http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm
#font-face {
font-family: "Computer Modern ";
src: url(ace.ttf);
}
.cm {
font-family: "Computer Modern";
}
You do need to have a ttf file for that font.