Can I use web fonts and Google Fonts API both (if user has the google fonts CDN blocked)? Namely,
#font-face {
font-family: "SourceCodePro-Bold";
src: url(../fonts/SourceCodePro-Bold.ttf);
}
h1{ font-family: "SourceCodePro-Bold";}
and
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,400italic' rel='stylesheet' type='text/css'>
Same as any font-family fallback. Use a comma separated list of the fonts for font-family.
Make sure your local fonts don't have the same name as the Google fonts.
<link rel='stylesheet' href='http://fonts.googleapis.com/...' />
<style type='text/css'>
* {
font-family: 'Google Font', 'back up local', sans-serif;
}
</style>
Related
I'm currently loading my font-family from google's CDN like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#500;600&display=swap" rel="stylesheet">
But I'm at the point where I need to load them locally in order to optimize my web speed. Here's what I've tried:
#font-face {
font-family: Inter;
src:url("../fonts/Inter-Medium.ttf");
}
#font-face {
font-family: Inter;
src:url("../fonts/Inter-Semibold.ttf");
}
body {
font-family: 'Inter', sans-serif !important;
}
But that isn't working as when loaded from google's cdn. I can see it works only for weight 500 but not when the weight is 600. Some help will be greatly appreciated!
I describe all the actions I have taken to successfully connect to the google font.
I downloaded fonts.google.com (Download button is at the top right) inside text Download family.
I added all the files to my project.
I connected the file direction, HTML/CSS.
#font-face{
font-family: Name;
src: url('Inter-VariableFont_slnt,wght.ttf');
}
p{
font-family: Name;
}
<p>TEST</p>
You can put any name instead of name.
And after that, everything worked.
Screen code:
that's how it was in the beginning:
so after:
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
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;
}
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 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.