I want to host Material Icons offline for my offline web development project (I will not have internet on the computer where is deployed). From my Google search, I found this SO answer. BUT it is Not working for me. My question is how to make it work. How to host material design icons offline for my offline project?
I have attached a .zip file of my SSCCE project, which reproduces the problem, here.
Basically I downloaded the MaterialIcons-Regular.eot, MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff and MaterialIcons-Regular.woff2 from here and put them in my project's directory.
Here is my index file:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-fonts.css" />
<link type="text/css" rel="stylesheet" href="materialize.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>
And here is the CSS file.
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
First way to add icons will be following:
Copy content of this file to you custom css file (for instance, material-fonts.css) https://fonts.googleapis.com/icon?family=Material+Icons
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
Copy the link from src url and put it in browser. It will download file. You need to put it file in the same directory where you save first file(material-fonts.css).
Update in material-fonts.css file src: url() as src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
Second example:
Looks like you download wrong files.
You need to download this directory and put it into your folder, previous files have to removed.
Your materialFontTest.php should look like:
<!DOCTYPE html>
<html>
<head>
<title>MaterializeTest</title>
<link rel="stylesheet" href="material-icons.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>
<body>
<i class="material-icons">chevron_left</i>
</body>
</html>
Original but light weight Material Icons
This light-weight repository (https://www.npmjs.com/package/material-design-icons-iconfont) is a fork of the original repository of ~60MB but this is very much light weight because unnecessary files were removed from that original repository.
How to install?
step 1:
// install via bower/npm
bower install material-design-icons-iconfont
npm install material-design-icons-iconfont
step 2:
// import or link
#import "~material-design-icons-iconfont/dist/material-design-icons.css";
<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
How to use?
<i class='material-icons'>done</i> // remember to add class `material-icons`
more on https://material.io/tools/icons/?style=baseline
I think you downloaded wrong files from somewhere. This is the path that you have to download correct fonts from: https://github.com/google/material-design-icons/tree/master/iconfont or use the one in my GH repo that worked for you already.
Also you need to call only one css in your html (php) file, like this:
<link rel="stylesheet" href="material-fonts.css" />
hth, k
Related
EDIT: It turns out it was only an issue on my computer, but an explanation would still be helpful if you have one. Thanks again!
I am attempting to create a development page for a website I am working on, and have a blank index.html page that redirects you to the development page. This all works as intended. I am using svelte to make things easier in future, however, when I deploy it, the svelte "Hello World" that shows up upon creating a new svelte project keeps appearing on top of the development page HTML. The odd thing about this is that it only happens when I deploy it, not when I load up the static HTML, not when I load up a local server. It doesn't even show up if I don't use a custom domain name. I am using cloudflare pages and cloudflare to redirect the domain name to the cloudflare page. My domain is registered with GoDaddy, if that at all matters.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/public/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
app.js
window.onload = function() {
window.location.replace("under-construction/under-construction.html");
}
under-construction/under-construction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Book Planet UK</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='under-construction.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
<script src="under-construction.js"></script>
<div class="overlay">
<h1 class="title">Book Planet UK is currently undergoing development.</h1>
<span class="title">We are hoping to be back by 2023, so hold tight until then! 🚀️</span>
<br>
<button onclick="location.href = '/public/staff/index.html';">Staff Login</button>
</div>
</body>
</html>
under-construction/under-construction.css
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
* {
background-image: url("https://webgradients.com/public/webgradients_png/008%20Rainy%20Ashville.png");
}
.title {
background: transparent;
font-family: 'Roboto', sans-serif;
padding-top: 20px;
padding-left: 5%;
padding-right: 5%;
}
.overlay {
background: rgba(240, 248, 255, 0.375);
border-radius: 10px;
padding-left: 5%;
padding-right: 5%;
width: auto;
max-width: max-content;
height: auto;
}
button {
background: transparent;
font-family: 'Roboto', sans-serif;
width: 20%;
height: 35px;
color: #242024;
border: 2px solid #242024;
border-width: 2px;
margin-left: 5%;
align-items: center;
border-radius: 3px;
margin-top: 25px;
margin-bottom: 25px;
transition: 0.25s ease;
}
button:hover {
transform: scale(1.05);
cursor: pointer;
}
src/app.svelte
<script lang="ts">
</script>
<main>
</main>
<style>
</style>
The non-custom-domain website is deployed at https://book-planet-uk.pages.dev/.
The domain is https://bookplanetuk.co.uk/. I get the feeling that this may be a "its on my machine" kinda thing, so let me know if it doesn't appear for you on the domain. I have restarted my computer just to check.
Thank you in advance for any and all help!
Your code is linked via the path /build/bundle.js, this looks like the path will remain the same, even if the code changes. That can easily lead to caching issues, where browsers will not get a newer version of the code.
To prevent this, build systems often add a hash to the file name or to a query string, so the URL will be different and the browser will get the new file. Would recommend doing something along those lines.
(This also applies to other resources like CSS.)
Remove the reference to bundle.js.
I cannot import my font files, dont know why is not working.
Here what I did:
Create font folder and added font-files inside
fonts/avenir.woff
fonts/avenir.woff2
in body setup font-faimily
body {
font-family: Avenir;
// Open-Sans, Helvetica, Sans-Serif;
font-style: normal;
font-size: 14px;
background: ${colors.offWhite};
}
Call the font-face:
#import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7ba9e0a7-abe8-437c-a682-27fa19a01908");
#font-face{
font-family:"Avenir LT W01_35 Light1475496";
src:url("./fonts/avenir.woff2") format("woff2"),url("./fonts/avenir.woff") format("woff");
}
And still does not work
Where I am making a mistake?
I want to use the custom font in all of the pages of the website and right now I use this:
#font-face {
font-family: IRANSans;
font-style: normal;
src: url('./assets/fonts/iran-sans/eot/IRANSansWeb.eot');
src: url('./assets/fonts/iran-sans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
url('./assets/fonts/iran-sans/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
url('./assets/fonts/iran-sans/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
url('./assets/fonts/iran-sans/ttf/IRANSansWeb.ttf') format('truetype');
}
* {
font-family: IRANSans !important;
}
I also use the Angular Material fonts like this :
<head>
<meta charset="utf-8">
<title>Vex - Angular 9+ Material Design Admin Template</title>
<base href="/">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
</head>
When I need to show the icons I get this message:
But when I remove this line it displays the icons properly:
* {
font-family: IRANSans !important;
}
What's the problem and how can I solve it?
The above answer is correct: * means all.
What you can do: You can try to set the iran font for all but not the icons.
please try this selector
*:not(.material-icons) { font-family: IRANSans !important; }
instead of *
Alright, common issue - just trying to include a custom font. Ive tried multiple methods, including:
#font-face {
font-family: SequelSansBlackDisp;
src:"./src/resources/SequelSansBlackDisp.ttf";
}
#font-face {
font-family: SequelSansLightDisp;
src:"./src/resources/SequelSansLightDisp.ttf";
}
and
#font-face {
font-family: SequelSansBlackDisp;
src:url("./src/resources/SequelSansBlackDisp.ttf");
}
#font-face {
font-family: SequelSansLightDisp;
src:url("./src/resources/SequelSansLightDisp.ttf");
}
To no avail. The first doesnt do anything, while the 2nd draws "cannot resolve" errors. The font is right there in the resources folder - I did rename the ttf file to take out the spaces. Maybe this is the issue? How would I know how to correctly reference the ttf file?
try this solution:
#font-face {
font-family: fontName;
font-style: normal;
font-weight: normal;
url('/static/fonts/dir/font_name.ttf') format('truetype');
}
You can try this.
#font-face {
font-family: SequelSansBlackDisp;
src:url('./src/resources/SequelSansBlackDisp.ttf') format('truetype');
}
#font-face {
font-family: SequelSansLightDisp;
src: url('./src/resources/SequelSansLightDisp.ttf') format('truetype');
}
I am creating a website using the MEEN Stack (Mongo, Ember, Express, Node). And right now, I am trying to import the Lato font family into my project as that will be the font of everything on the website. I seem to be having trouble with this and can't find any resources online that cover this. Any ideas on how to do this? I've downloaded the Lato font and put the files in my public/assets/fonts folder and am still having problems. I am also using foundation if that helps.
I have this in my app.scss file:
/* Webfont: Lato-SemiboldItalic */#font-face {
font-family: 'LatoWebSemibold';
src: url('fonts/Lato-SemiboldItalic.eot'); /* IE9 Compat Modes */
src: url('fonts/Lato-SemiboldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/Lato-SemiboldItalic.woff2') format('woff2'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.woff') format('woff'), /* Modern Browsers */
url('fonts/Lato-SemiboldItalic.ttf') format('truetype');
font-style: italic;
font-weight: normal;
text-rendering: optimizeLegibility;
}
nav {
font-family: "LatoWebSemibold";
background-color: none;
width:150px;
text-align:left;
font-size:1em;
list-style: none;
margin: 0 0 0 0;
padding: 0 20 30 20;
float:left;
}
I think your missing '/assets/' in the url
below is my working example
#font-face {
font-family: 'Mytupi-Bold';
src: url(/assets/fonts/mytupibold.ttf) format('truetype');
}
I was trying to import a local font file into my ember addon.
Sheriffderek posted a nice mixin here but I kept seeing 404 errors.
I eventually got it working by putting the name of the app at the beginning of the font URL.
$font-url: '/<app/addon-name>/fonts';
#mixin font-face($name) {
#font-face {
font-family: $name;
src: url("#{$font-url}/#{$name}.woff2") format("woff2"),
url("#{$font-url}/#{$name}.woff") format("woff");
}
#include font-face('font-name-500');
body {
font-family: 'font-name-500';
}