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.
Related
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
I'm trying to print a specific zone on an Arcgis maps with the JS API (not the extend that is displayed).
I didn't find any method or option to do this so I tried to change the extend and then print the map :
var extent = new esri.geometry.Extent(
-620526.0922336339,
5993991.149960931,
108988.90572005256,
6293624.300838808,
myMap.spatialReference
);
myMap.setExtent(extent, true).then(function() {
console.log('setExtend is finished');
var template = new esri.tasks.PrintTemplate();
template.exportOptions = {
width : 500,
height : 500
};
template.format = 'jpg';
template.layout = 'MAP_ONLY';
var params = new esri.tasks.PrintParameters();
params.map = myMap;
params.template = template;
var printTask = new esri.tasks.PrintTask(urlToThePrintServer);
printTask.execute(params);
});
Since setExtent is asynchonous and return a defered I have to use the 'then' method.
I can see the map moving but the defered doesn't seem to works ... (I don't see the console.log()).
is there another way to print a specific extend of a map ?
if not why is the 'then' method never called ?
(I'm using the 3.12 JS API)
Your code looks good to me, though obviously you didn't post all your JavaScript or any of your HTML. Maybe you're not requiring the modules you need. Or maybe your code is trying to run before the map is loaded, though that's unlikely because as you say, the map does move. Or maybe something else is wrong.
I put a full working example at http://jsfiddle.net/06jtccx0/ . Hopefully you can compare that to what you're doing and figure out what is wrong with your code. Here's the same code for your convenience:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var myMap;
var urlToThePrintServer = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task";
require(["esri/map", "dojo/domReady!"], function(Map) {
myMap = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
myMap.on("load", function(map) {
var extent = new esri.geometry.Extent(
-620526.0922336339,
5993991.149960931,
108988.90572005256,
6293624.300838808,
myMap.spatialReference
);
myMap.setExtent(extent, true).then(function() {
console.log('setExtend is finished');
require([
"esri/tasks/PrintTemplate",
"esri/tasks/PrintParameters",
"esri/tasks/PrintTask"
], function(
PrintTemplate,
PrintParameters,
PrintTask
) {
var template = new PrintTemplate();
template.exportOptions = {
width : 500,
height : 500
};
template.format = 'jpg';
template.layout = 'MAP_ONLY';
var params = new PrintParameters();
params.map = myMap;
params.template = template;
var printTask = new PrintTask(urlToThePrintServer);
printTask.execute(params, function(response) {
console.log("The printed document is at " + response.url);
window.open(response.url);
});
});
});
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I am trying to embed my flash game inside my HTML Code.
I got the embedding right, but now I want to use GET to get the ID from the url
this is the url I use :
http://localhost/directory/html/indexpage.php?id=3
I want to get the ID of the url using the embed code :
<head>
<title> Widget </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="scripts/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.id = "3";
var params = {};
params.menu = "false";
params.scale = "noscale";
params.allowfullscreen = "false";
var attributes = {};
swfobject.embedSWF("flash/Flash.swf, "game", "398", "398", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<link href="./mobile/styles/game.css" rel="stylesheet" type="text/css" media="screen" title="stylesheet" />
</head>
I tried this :
swfobject.embedSWF("flash/Flash.swf?id=3", "game", "398", "398", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
what am I doing wrong here?
Flash doesn't parse the query string, probably for good reason. You need to pass in as flashvars. It's a common annoyance -- maybe SWFObject has improved since I last had to do this stuff (2012), but if not, I would tend to have code like this:
function parseQueryString() {
var query = window.location.search.substring(1);
var keyVals = query.split("&")
var dict = {}
for (var i=0; i<keyVals.length; i++)
{
var pair = keyVals[i].split("=");
dict[pair[0]] = unescape(pair[1]);
}
return dict;
}
...
flashvars = parseQueryString(); // catchall
flashvars.foo = parsedQuery.foo; // more explicit is probably better
...
swfobject.embedSWF(
"MyFlashThing.swf", "flashContent",
"800", "600",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
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 have created a streaming webcam with html5. At the moment I can take a picture through my web cam, but I would like to know if it is possible to choose media stream device from the list, e.g. I have two web cams I want to choose the webcam to activate. How can I do that with html5 getUserMedia() call?
Thanks!
You can get the list of web camera
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Video Camera List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<style type="text/css" media="screen">
video {
border:1px solid gray;
}
</style>
</head>
<body>
<script>
if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';
var videoSources = [];
MediaStreamTrack.getSources(function(media_sources) {
console.log(media_sources);
// alert('media_sources : '+media_sources);
media_sources.forEach(function(media_source){
if (media_source.kind === 'video') {
videoSources.push(media_source);
}
});
getMediaSource(videoSources);
});
var get_and_show_media = function(id) {
var constraints = {};
constraints.video = {
optional: [{ sourceId: id}]
};
navigator.webkitGetUserMedia(constraints, function(stream) {
console.log('webkitGetUserMedia');
console.log(constraints);
console.log(stream);
var mediaElement = document.createElement('video');
mediaElement.src = window.URL.createObjectURL(stream);
document.body.appendChild(mediaElement);
mediaElement.controls = true;
mediaElement.play();
}, function (e)
{
// alert('Hii');
document.body.appendChild(document.createElement('hr'));
var strong = document.createElement('strong');
strong.innerHTML = JSON.stringify(e);
alert('strong.innerHTML : '+strong.innerHTML);
document.body.appendChild(strong);
});
};
var getMediaSource = function(media) {
console.log(media);
media.forEach(function(media_source) {
if (!media_source) return;
if (media_source.kind === 'video')
{
// add buttons for each media item
var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
$("body").append(button);
// show video on click
$(document).on("click", "#"+media_source.id, function(e){
console.log(e);
console.log(media_source.id);
get_and_show_media(media_source.id);
});
}
});
}
</script>
</body>
</html>
In the latest Chrome Canary (30.0.1587.2) it looks like you can enable device enumeration in chrome://flags (looks like it might already be enabled) and use the MediaStreamTrack.getSources API to select the camera.
See this WebRTC bug and mailing list post for more details.