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
Related
I won't be able to access internet on our hosting servers so I'm wondering if there's a way to download directly the font file instead of linking to the style sheet.
<style>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap" rel="stylesheet">
</style>
Much appreciated.
Google Fonts has a "Download family" button atop each font page that provides a ZIP file with TTFs in each weight. Here's the page for Montserrat, the font used in your example: https://fonts.google.com/specimen/Montserrat
Using those files, you can set up your own local stylesheet that references the TTF files using #font-face rules, like the example below.
#font-face {
font-family: "Montserrat";
src: url("/fonts/Montserrat-Medium.ttf") format("ttf"),
}
Learn more, including how to assign different weights to variants like bold, at MDN and CSS-Tricks.
I'm creating personal blog with next.js.
Currently i use google fonts to provide fonts for my blog. Everything works fine except initial content shift on load.
When I load my web it will shift when new font loads (not all fonts have same spacing, sizes, etc...). So my question is how to prevent this content shift?
I have seen many suggestions to add loading screen until everything loads, but I think that the best solution would be just to bundle everything to the html itself. NextJs automatically inlines styles for me with <style/> tags and next-images will inline small images with base64. So how do I automatically inline my fonts (I dont want to always change tons of #font-face declaration when I decide to change font)?
Currently i use:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
I would like NextJS to automatically convert it to something like this:
#font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
You can use this amazing project to get any google font with base64 inlined src.
embedded-google-fonts
just put your google font link here: https://amio.github.io/embedded-google-fonts/
for example, for Barlow font: https://fonts.googleapis.com/css2?family=Barlow:wght#400;600;800&display=swap
then you can copy the result and create a <your-font>.css file in the project.
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'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.
Is there an easy way to display webpages in computer modern font?
The easiest and most stable way to do this I found was to base64 a font I found at http://mirrors.concertpass.com/tex-archive/fonts/cm-unicode/fonts/otf/. I used the cmunrm.otf from there, base64'ed it and put it as a font face in my css.
#font-face {
font-family: "my-font";
src: url(data:font/truetype;charset=utf-8;base64,T1R...gP5w/kP+RAA format("opentype");
}
body {
font-family: "my-font";
}
You can see an example at https://jsfiddle.net/jtvx9auo/
While you could also simply download the otf file and put it to your server, I found base64ing to be more reliable, e.g. when trying to convert to pdf using wkhtmltopdf.
In case anyone still stumbles upon this (2020+) looking for the optimised web fonts rather than the larger .otf fonts which are used in the answer 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
And then just add the Computer Modern Serif or sans-serif families directly in your css files.
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 full documentation here