I load two fonts from google fonts with <link> tag in document header.
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'>
The problem is website always load fonts from URL and don't cache them (I think).
How can I cache these fonts and force to load them from local if they are present?
Thank you :D
Related
I have been trying to add a favicon to my webpage for a 9th grade school project. I am using Coda 2. I haven't acquired a domain and the webpage isn't hosted online. I've read that one could upload the image URL to their root directory or something along those lines however I can't do so in my situation. Is it possible to add a favicon on my HTML document if I view it on Google Chrome? If yes, what's the code to do so?
I have used the code below however it doesn't seem to work. I have also converted it to png and changed the 'type' but that too doesn't work. I've already made sure that the HTML document and image file are in the same folder.
<link rel='shortcut icon' href="favicon.ico" type='image/x-icon'/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
You can add a favicon and shortcut icon like this.
<head>
<!-- head content -->
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png" sizes="32x32"/>
<!-- head content -->
</head>
That it =)
I am having issues when loading the css file from npm vs loading from a cdn.
Using the CDNs below, I'm able to render forms without any issues.
<link rel='stylesheet' href='https://unpkg.com/formiojs#latest/dist/formio.full.min.css' />
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/formiojs#3.9.3/dist/formio.full.min.css' />
But when I render the forms from a local CSS file, the form renders incorrectly
<link rel='stylesheet' src="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
You can see the difference here
Opening the 2 files in a browser and pasting into a diff tool, I noticed the difference seems to be around '×' which is located in 2 places.
When opening these 2 files in a text editor, they are identical.
In the browser, the CDN renders the string as '×' but the npm file renders as '×'.
How can I get the CSS file to load with '×'?
I've tried adding charset="UTF-8" to the link element but it still doesn't render correctly.
I assume this has something to do with encoding.
The file in question can be found here
https://github.com/formio/formio.js/blob/master/dist/formio.full.css
That might be a typo but can you try replacing
<link rel='stylesheet' src="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
with
<link rel='stylesheet' href="/lib/formiojs/dist/formio.full.min.css" asp-append-version="true"/>
The key difference being href is used instead of src.
Agency free theme in Bootstrap comes a long with GitHub favicon, I cannot track where the GitHub favicon comes from and that's why I can't change it. It didn't override the starting favicon when I added my custom favicon between <head></head> tags.
You can use this way. and go to W3School
<link rel='icon' href='favicon.ico' type='image/x-icon' sizes="16x16" />
Probably it is a cache problem... try to force the favicon refresh using the link tag and a querystring on your filename.
<link rel="icon" href="http://www.yoursite.com/favicon.ico" />
You can also try reloading with no cache (ctrl + f5) or restarting the browser
For example, remove parts of code for your project.
<link rel="icon" type="image/png" sizes="48x48" href="/img/image.png">
I just recently bought a porfolio template and try to install it onto github pages. It will only show the background but there will be no images or text.
Note that your Github Pages site is hosted over https and your template is including plain text http links to resources. You cannot safely load plain text http resources in a secure https connection. You need to fix the error messages such as:
Blocked loading mixed active content http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic”
Note the conversion from http to https in the following links:
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
And there's another with the jQuery link:
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
On a related note, your repository is missing the magnifique popup library. You can replace the URL with a link to a CDN. For example, change this line...
<script src="js/jquery.magnific-popup.min.js"></script>
to this line...
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
It's loading your index.html just fine, the problem is that your webpage is loading resources over insecure http when github defaults to using secure https, this results in mixed content errors so a bunch of other resources are failing to load.
I am trying to use Google fonts in this website. The link is in the head, if you click it the result is the correct. In the CSS, the font-family is the correct, but the font I am seen in my screen is not the correct.
This is the link:
<link rel="stylesheet" id="options-google-fonts" title="google-fonts" href="//fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353" type="text/css" media="all" />
And the CSS:
.caption-wrap .line-2, .caption-wrap .line-3, .caption-wrap .line-5 a, .navbar-nav>li>a, .service-wrap .service-btm a {
font-family: Montserrat;
}
Nobody can tell me if is there a problem with this?
Use this snippet to link the CSS, it's done the way Google recommends to link their fonts:
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
You put the stylesheet <link> element inside the <body>. It should be in the <head>.
As far as Chrome is concerned, a page served as HTTPS should not be calling a resource served as HTTP. Chrome isn't picky about when things are the other way around, so it will happily retrieve an HTTPS resource via a page served as HTTP.
Solutions
Match the protocols
Make sure you always call the https version of your Google Webfont URL. For example:
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300%7CMontserrat&subset=latin&v=1399056353'
rel='stylesheet' type='text/css' media="all">
This link was generated by Redux Options Framework. The problem seems to occurs only on Chrome in Windows 8.
The problem fixes deleting the title attribute.