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:
Related
Whatever I did, I couldn't solve this issue. Google Pagespeed is still displaying the same message.
I've tried with many different code and I think this is the right one.
Appreciate if someone can tell me what I'm missing.
<link rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2" as="font" type="font/woff2" crossorigin>
<style>
#font-face {
font-display: swap;
font-family: 'Glyphicons Halflings';
src: url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2');
}
</style>
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>
I have a website for internal use that uses the Roboto google font. Here is the code that includes it.
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.
&
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.
This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.
What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?
If you use Google Fonts
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">
without a fallback font like;
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
You should provide that font-weight in your Google Fonts link like;
<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">
Or, you should provide a fallback font;
body {
font-family: "Roboto", sans-serif;
}
By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.
In ideal situations, using a font-family to support all possible computer systems like;
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
will solve all of these problems.
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.