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.
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 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.
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.
I was really excited when I finally got my custom fonts working in a custom Mailchimp template.
I added the following to the head of the template:
<link rel="stylesheet" type="text/css" href="http://eberhardtsmith.com/d/wp-content/themes/blankslate/font-face/fonts.css">
That worked, until I use the template in a campaign, and everywhere shows the fallback font (Safari, Firefox, Mailbox for iPhone, Gmail tested).
Seems like the HTML isn't rendering the in the head of the template when it's in use. Anyone have any experience getting mailchimp to work?
You might need to choose a mail-safe font. Check out this blog post.
Emails are quite limited in what you can do in terms of styling.
Thanks to reccomendation from #j08691, I was able to get the fonts working using inline styles and not <link>.
However, the fonts only display on e-mail clients which support #font-face.
Otherwise, it uses fallback font.