I've check many blogs, but couldn't find the answer to my question, currently I'm using the google web font loader To asynchronously load fonts from the google CDN, however, I am also making use of a font stored locally on the server by using the #font face declaration in my CSS.
Is it possible to combine the two, i.e. make the async script load google fonts from the CDN and the local font (including FALLback)
// Here's the script in my HTML file
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Merriweather:400,900italic,700italic,900,700:all' ] },
custom: {
families: ['Fira Sans'],
urls: ['../assets/css/type.css']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<noscript>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,900italic,700italic,900,700&subset=all' rel='stylesheet' type='text/css'>
</noscript>
//Here is the local font declaration found in my CSS file
#font-face {
font-family:'museo_sans300';
src: url('museo/MuseoSans_300-webfont.eot?') format('eot'), url('museo/MuseoSans_300-webfont.woff') format('woff'), url('museo/MuseoSans_300-webfont.ttf') format('truetype');}
I would like to make both of these load async and maybe even include typekit in the future!
Is this possible?
Many thanks for your help
Related
latex is not working in total project and in this pages also and i included all the required script about latex
<script>
window.MathJax = {
jax: ["input/MathML/TeX","output/HTML-CSS","output/NativeMML"],
extensions: ["mml2jax.js","MathMenu.js","MathZoom.js","tex2math.js"],
MathML: { extensions: ["mml3.js"]}
};
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function(){
// remote script has loaded
};
script.src = 'https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
if (window.MathJax === undefined || window.MathJax == null){
window.MathJax =
{
jax: ["input/MathML","output/HTML-CSS","output/NativeMML"],
extensions: ["mml2jax.js","MathMenu.js","MathZoom.js"],
MathML: { extensions: ["mml3.js"]}
};
}
</script>
<script type="text/x-mathjax-config" rel="prefetch" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js ">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured">
</script>
all the things are done at backend(using python) only.
Below is the Web font loader code trying to add it to Magento 2?
WebFontConfig = {
google: {
families: ['Montserrat:light,medium,regular,semi-bold,bold,italic,regular', 'IBM Plex Serif:light,extra-light,regular,semi-bold,bold,italic,medium-italic,regular', 'Muli:light,extra-light,regular,semi-bold,bold,italic,regular']
},
timeout: 2000 // Set the timeout to two seconds
};
(function(d) {
var wf = d.createElement('script');
s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true; s.parentNode.insertBefore(wf, s);
})(document);
What would be the best approach to do this? Tried adding it in "default_head_blocks.xml" doesnt work?
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="js/googleFonts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
</head>
</page>
Try to add this code just before closing body tag
<script>
WebFontConfig = {
google: { families: ['Montserrat:light,medium,regular,semi-bold,bold,italic', 'IBM Plex Serif:light,extra-light,regular,semi-bold,bold,italic,medium-italic', 'Muli:light,extra-light,regular,semi-bold,bold,italic'] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = true;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
Moreover, make sure if you need all those fonts with all variants (like light,extra-light, bold, semi-bold) in your project.
If you really want to improve loading time for your website, please consider limiting fonts and its variants to a minimum.
I am using Web Font Loader to load a font from Google webfonts but it seems to only load the 400 weight. I wish to included 300, 400, 700 but cannot find a way to do it.
WebFontConfig = {
google: {
families: ['Open Sans']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
I found this solution which worked.
WebFontConfig = {
google: {
families: ['Open Sans:300,400,700']
},
As mentionned by Keith Power, you have to add types. But to get it work with all providers (and most important with your custom font), you have to use the Font Variation Description :
WebFontConfig = {
custom: {
families: ['My Font', 'My Other Font:n4,i4,n7'],
}
};
n4 : regular
n7 : bold
i4 : italic
i7 : bold-italic
...
I want dropped text files to be shown by their contents or their complete location so that I can load contents of that location into the "drop_zone".
This is what I have till now. I was just able to access the file name:
<html>
<head>
<title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<output id="list"></output>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
document.getElementById('drop_zone').innerHTML = files[0].name;
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
here is the final code :
<html>
<head>
<title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<script>
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var reader = new FileReader();
reader.onload = function(event) {
document.getElementById('drop_zone').value = event.target.result;
}
reader.readAsText(files[0],"UTF-8");
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>
http://www.html5rocks.com/en/tutorials/file/dndfiles/ should be a good resource. You need to use a FileReader to read the contents of the file as a String.
Due to security limits, a page isn't able to load contents of files without something like a Java applet set up with appropriate permissions; and, even then, it's not too possible.
However, that isn't to say it's impossible; simply upload the file to a server and echo the contents back out to the browser. That is how many text-editing-type web applications function.
How you implement this is up to you.
Further, as Maz has pointed out, you can also use built-in APIs to aid you in doing what you're trying to do. Do note, however, this solution is not necessarily cross-browser compatible.
I'm probably doing several things wrong as i am new to web programming but here is an attempt at some questions I have and then code below.
Fyi I'm working completely local in dreamweaver and just hitting f11 or whatever to test in a browser. I don't have anything uploaded to a sever except the channel file so if this is the main issue let me know.
For the channel file all I have is a completely empty file (not including html, body, etc.) just the below line.
<script src="//connect.facebook.net/en_US/all.js"></script>
Is that all I need? In order for this button to show up do I have to have all the index.html and .css etc. in the same location as the channel file?
Below is the code I'm using and below that the css for placement. No blue FB button shows up when I run test it in my browser.
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '[hidden]', // App ID
channelUrl : 'http://mysite/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>
Here is the CSS that literally does nothing to move the above "login with facebook" text around the screen. All I'm seeing is regular text that says the above in the top left corner. No blue fb button
#charset "utf-8";
/* CSS Document */
*
{
margin: 0;
}
body
{
background-color: #FFF
}
#fb-login-button
{
position: relative;
float: right;
}
New code edit below from Purusottam's comments
again please forgive me for mistakes as I am a very new programmer.
the blue facebook login button is still not showing up only the "login with facebook" text in the upper left corner: see the image attached.
again I'm working completely local here..do I need to have all the files on a server for this button to show up?
<html>
<head>
<title>My Facebook Login Page</title>
<link href="fbstyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'hidden', // App ID
channelUrl : 'http://mysite.net/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true});
};
// Load the SDK Asynchronously
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<div class="fb-login-button" show-faces="true" width="200" max-rows="5">Login with Facebook</div>
<script>
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
</script>
</body>
this is the current result:
http://s17.postimage.org/y8oz0htq7/help.jpg
As it turns out the reason this button wasn't showing up was because you need to have everything on a server. You can't test the facebook code local.
As I see your code there are couple of things that are missing. First you need to initialize oauth with FB. Below is the reference to the code.
window.fbAsyncInit = function() {
FB.init({appId: "hidden",
channelUrl : "Channel File",
status: true,
cookie: true,
xfbml: true,
oauth:true});
Loading of SDK will be simple as below.
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
Once this is done then onclick of your login DIV button call a javascript function with following code.
FB.login(function(response)
{
if (response.authResponse)
{
//login success
}
else
{
alert('User cancelled login or did not fully authorize.');
}
}, {scope: 'permissions that app needs'})
Hope this helps you.