I'm trying to use Merriweather from Google Fonts.
I'm able to use the regular and bold weights, but I cannot get the light weight to work.
In my <head> you can see that I am linking to all three weights:
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700" rel="stylesheet">
However in my css the following does not seem to use a lighter font weight:
font-weight:300
Here is a CodePen with this problem:
http://codepen.io/vivmaha/pen/XNLEoE
Aside — I wanted to embed the snip directly into SO, but I needed codepen to link to the google font
Turns out that this was because I had the font installed on my local OS.
The browser used the font from the OS instead of google's servers.
However the OS font didn't have the light weight installed.
Related
In google docs, for Montserrat font they have the word January looking like this (which is the same as the design I want):
In my code, I use the same format but what I see is a totally different font in my browser. This is my code:
<div class="event-date">January</div>
.event-date {
font-size: 16px;
font-family: "Montserrat", sans-serif;
}
And this is what I see in the browser (totally different than google fonts):
Is there a way to fix it to look like google fonts?
You must first link the font (ideally in the head tag), because this font is not part of the operating system. When the web browser can't find the font, it uses default font for the operating system.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap" rel="stylesheet">
Or you can also import it in your CSS file.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
Check the Google Fonts CSS API documentation for more info: https://developers.google.com/fonts/docs/css2
I'm using the google font "spectral" on my website: magpieandcapricorn.com
I've just started learning about responsive design and got it somewhat working. However, I noticed the Spectral font shows up on my Iphone but not my husbands Android? What can I do to fix this? Is there a code to change the default text to a substitute font for devices that can't use Spectral?
Embed Font
To embed your selected fonts into a webpage, copy the following code into the <head> of your HTML document:
<link href="https://fonts.googleapis.com/css?family=Spectral&display=swap" rel="stylesheet">
Specify in CSS
Use the following CSS rules to specify these families:
font-family: 'Spectral', serif;
For examples of how fonts can be added to webpages, see the getting started guide.
I am trying to use Roboto for a text-based logo and have the necessary code to load the font in <head>. While the site is loading, you can briefly see the logo in an ugly default font before becoming properly formatted in the web font. The logo literally grows bigger and then smaller. Is this type of problem indicative of poor code implementation or is something else the problem?
I am happy to upload the relevant code portion if the question cannot be answered generally.
One option would be to tell the browser to preload your fonts.
Here is an example:
<link rel="preload" as="font" href="/fonts/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
If you’re using a CDN like Google Fonts (Roboto), be sure that the font files you’re preloading match the ones in the CSS, or you could end up downloading two versions of the same font.
Hope this helps!
I have a generic css file with all fonts the website is using (local).
Inside i have for example :
#font-face {
font-family: "LemonMilk";
src: url("../fonts/LemonMilk.otf");
}
.....
.LemonMilk{
font-family: "LemonMilk" ;
font-size: 4vh;
}
I have many many of them, but some pages need only few of them, but still i load the whole file for every page :
<head>
....
<link rel="stylesheet" href="../css/style.css"/>
Problem:
Most of my pages will delay loading them and show system fonts for a second or 2.
Tried:
<link rel="preload" as="font" href="/style/some.otf" type="font/otf" crossorigin="anonymous">
which provide a warning message that they where loaded but never used within a few seconds of page loading. But i do use them right away.
Questions:
How to reduce delay?
If i include a css with all fonts, will he load also the ones i dont use?
why preload didn't work ?
when using #font-face in CSS, it is down to browser, how it behaves.
It's good to use external CSS sheet for declaring fonts.
If this doesn't help, you could try making different CSS files with fonts for different subpages. As you mentioned, you don't use all fonts on all subpages, so it may reduce the filesize and consequently load faster.
Once I was working on a project with a lot of fonts and I had similar problem. The best solution then was to base64 encode all of the fonts I used. So by that approach, all of the fonts had to be loaded before HTML was parsed and displayed. Font squirrel's webfont generator found here: https://www.fontsquirrel.com/tools/webfont-generator can be really helpful tool. If you will use it you should click "Expert" and "base64 encode".
Also, for testing and seeing how your load times improve, you can check out Fontloader here: https://github.com/smnh/FontLoader . It detects when fonts of the specified font-families loaded and rendered by the browser so you can see which step is taking the most time.
<html>
<head>
<title> </title>
<body>
<font face="file:///E:/softwares/FONTS/alpha kufi regular.ttf" size="+2"> This is a tester for a font, that may not be installed on the machine </font>
</body>
</head>
</html>
This snippet doesn't show up the sentence in the intended font. What could be the reason for this ?
Note: I am aware that the font tag is not supported by HTML 5 and deprecated by HTML 4.
There are two basic problems here: the HTML face attribute (as well as its CSS counterpart, the font-family property) needs a font family name as value, not a URL of a font file, and a file: URL is inherently system-dependent and may fail to work in many circumstances.
The following works, provided that the font file alpha_kufi_regular.ttf (better avoid spaces in font names, as spaces as such are disallowed in URLs) is placed in the fonts subdirectory of the directoty where you have the CSS file and the browser supports TrueType fonts as “web fonts” (this need not be “web font” usage but could be local; the techniques are the same):
<style>
#font-face {
font-family: AlphaKufi;
src: url('fonts/alpha_kufi_regular.ttf');
}
</style>
<font face="AlphaKufi" size="+2"> This is a tester for a font,
that may not be installed on the machine </font>
Since not all browsers support TrueType fonts as “web fonts”, consider using FontSquirrel #font-face generator if you intend to use the font on a web page.
It is usually better to use CSS rather than HTML for font settings, but that’s a different issue. In theory, “web fonts” need not work with HTML <font face="..."> too (no specification requires that), but in practice they do.
I can't find a reference for it, but my best guess is that you can't access fonts using the file:// protocol (local filesystem). This is certainly true if the page is online or accessed through a local server (http://localhost or equivalent).
Also, there's no reason at all to ever use <font>. It might not work just because browsers don't support it fully anymore.
edit: in fact, I'm not sure <font> has ever supported using a font file instead of a font's name.
The solution for providing a font file is to use CSS's #font-face.
It's because font's face attribute does not take a path to a font file. It takes a comma separated list of font names. The browser searches the system for installed fonts and loads the relevant one from there (if it exists).
If you want to specify your own, you will probably need to use CSS #font-face.
Using Google Web Fonts API to add web fonts to your pages :
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=alpha kufi regular">
<style>
body {
font-family: 'alpha kufi regular';
font-size: 48px;
}
</style>
<title> </title>
<body>
<div>This is a tester for a font, that may not be installed on the machine</div>
</body>
</head>
</html>
~ Reference