I have setup a website with GitHub Pages using Jekyll and I host the stylesheet for the Roboto font (using Google would increase page load time). I then import it in my html as
<link rel='stylesheet' href='{{ site.baseurl }}/static/css/roboto.css'>
site.baseurl is an empty string, so no issues with it.
In my CSS file, I use
body {
font-family: 'Roboto', sans-serif;
}
but it doesn't work. The font is not being rendered on screen. What is happening and is there a way to fix it?
After some investigation, I realized the font files I was hosting didn't include the Roboto font. I downloaded the correct files and replaced them, and now it works like a charm.
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 trying to implement some animated social media icons on my site with pure CSS and no JS. The pen I found that am trying to adapt is called "Yet Another Set of Animated Social Icons".
The problem is, rectangle glyphs are showing instead of the correct social media icons in my web browser locally and remotely. The icons appear properly in the original codepen. But somewhere along the way in my implementation on my web server or in my web browser, I am importing the web fonts incorrectly.
Here is what it looks like locally in my web browser.
So you can see it yourselves, here it is on my web-server: https://angeles4four.info/
The author of the original codepen uses external style sheets and preprocessors. I’ve done my best to include these imported in my HTML and CSS. See below.
In my head tags in my index.html is this:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
In my css file is this:
#charset "UTF-8";
#font-face {
font-family: 'icomoon';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
font-weight: normal;
font-style: normal;
Is this set up correctly? What am I missing? I'm trying to get my social media icons to render properly (as they appear in the original pen) instead of empty rectangle glyphs.
you forgot add
https:
try this
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
To recap how I got this working, I made two changes:
Courtesy of Hossam Elmasrey, I added https: to one of the link elements in index.html.
Turns out I was missing local system fonts. So with Manjaro being my local O/S, I invoked: sudo pacman -Ss ttf-liberation. I’m not sure when, how, or why these fonts were missing, but Liberation fonts are installed now.
Then I restarted my browser. When accessing my remote website through Firefox and Chrome, all the icons load properly. Hooray! But loading index.html from Chrome and Firefox directly from my local file tree doesn’t work - - which Connum explained is because web browsers disable some content from loading externally for security reasons. Going forward I will use a local testing server.
Thank you both for your help.
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
i am using font-awesome icons for publishing my HTML,CSS templates. They are working fine when i have the live link but when i download the CSS file and include that in my pages icon disappears.
Live Path : <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
Local Path : <link href="css/font-awesome.css" rel="stylesheet">
How can i use the font awesome in offline mode?
Did you embed FontAwesome font into your project?
your structure must be like this:
[+]assets
[+]css
font-awesome.css
[+]js
demo-file.js
[+]fonts
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
index.html
sample.html
whatever.html
after that, you can use FontAwesome locally.
You also need to download the fonts themselves as well...It is a font, like any other...So, go to fontawesome website, follow the instructions and download css + fonts :)
Could be a pathname problem Try:
<link href="./css/font-awesome.css" rel="stylesheet">
I think you didn't download fonts or you used the wrong path.
You can download the latest version font awesome at https://fontawesome.com/download.
And don't forget check your path!
Hope this helps.
In my case: If you have added something like this in your html (or any other font family with important using * selector), then this might be the cause your icons are not showing..
*{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}