Per these guidelines:
https://learn.microsoft.com/en-us/bingmaps/styling/map-style-sheet-entry-properties#mapelement-properties
I am trying to set the map style. All properties are working except "fontFamily"
I'm using this google font temporarily, but I have also tried 'serif', 'Times', and 'Times New Roman' and none of them show any difference.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">
var sampleStyle = {
"elements": {
"mapElement": {
"labelVisible": true,
"fontFamily": 'Rye',
//"fontFamily": 'serif',
//"fontFamily": 'Times',
//"fontFamily": 'Times New Roman',
"labelColor": "#007bff",
},
},
"settings": {
"landColor": "#F6F4E3"
},
"version": "1.0"
};
The fontFamily style option I believe is only supported by the Bing Maps UWP map control (Windows). Most of the Bing Maps styling was designed for the UWP control and only a subset of those styles were exposed in the Web SDK and static map image service. Unfortunately it doesn't look like they have clearly called out which styles are supported where in their documentation.
If you use the Map Stylesheet editor application available here https://www.microsoft.com/en-us/p/map-style-sheet-editor/9nbhtcjt72ft, it will show which options are available for the web control, static map, and UWP map control, as well as generating sample code for each.
Related
I've got my wordcloud looking pretty excellent now. But one problem I'm having is that at random times, and on random browsers, random words (up to 7) don't get the font family applied.
For instance, this is what I get on my iPhone 13:
You can see that the words "Open", "Fun", "Felt", "New", "Deal", "Feels", and "Genuinely" are all appearing in a serif font.
A coworker on a desktop, using Chrome, is getting only the word "Deal" in another font. On my desktop, in FireFox, Chrome, and Safari, everything looks fine (except for a bit of cutoff along the bottom that I don't understand...yet).
I'm using the Roboto font throughout my website, but in my css I've got fallbacks. I'm not sure how to create a fallback in the WordCloud2 script though. But I'm honestly not even sure if having a fallback would help. This seems like a script glitch of some sort, but I've no idea how to track it down.
Here are the options I have set:
list: list,
FontSize: 250,
fontFamily: 'Roboto',
fontWeight: '900',
minFontSize: 10,
backgroundColor: '#fff',
color: function (word, weight) {
return weight > 9 ? '#32587d' :
['#b5c1af', '#c88362', '#e0c094'][Math.floor(Math.random() * 3)];
},
weightFactor: 19,
drawOutOfBound: false,
shrinkToFit: true,
wait: 50,
shuffle: false,
abortThreshold: 0,
abort: function noop () {},
minRotation: 0,
MaxRotation: 0,
rotationSteps: 0,
rotateRatio: 0,
classes: null,
hover: null,
click: null
Your problem is actually really simple. Not everyone has the font file for Roboto. To resolve this issue you can do one of the following.
Either add backup fonts:
fontFamily: 'Roboto, Arial, sans-serif',
or
Add the following code from google fonts so that every browser can load the font file:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
My application is built using NextJs and uses Chakra UI.
I have installed Google Fonts by following this
chakra Google fonts
npm install #fontsource/open-sans #fontsource/raleway
import { extendTheme } from "#chakra-ui/react"
const theme = extendTheme({
fonts: {
heading: "Open Sans",
body: "Raleway",
},
})
export default theme
Now I can use two different fonts,
For Body
For headings
However, how about using more fonts ?
Say I was to use different fonts for Buttons,
Different for Text.
Also within text, I want to use different fonts for Italic and underlined text portions.
How do I do that ?
It is pretty easy to add more fonts using the theme, you just need to add them in fonts: {} and then you can reference them by using the chakra variable: var(--chakra-fonts-xxx)
For example, if you want to define a font dedicated to subheader:
import { extendTheme } from "#chakra-ui/react";
const theme = extendTheme({
fonts: {
heading: "Open Sans",
subHeading: "Times New Roman",
body: "Arial Black",
},
textStyles: {
h2: {
'font-family': 'var(--chakra-fonts-subHeading)',
},
}
});
export default theme;
Now when you'll create a h2 component (<Heading as="h2">h2 text</Heading>), it will use this font.
You'll notice that unfortunately, I had to use 'font-family' instead of fontFamily (it seems to be an existing bug, same for font-weight).
To use different fonts in Buttons, you can customize Buttons components from your theme.
in const theme, the same way as fonts you need to create a components object:
const theme = extendTheme({
fonts: {
heading: "Open Sans", body: "Raleway",
},
components: {
Button: {
baseStyle: {
fontFamily: 'yourfont here'
}
}
}
})
You can do the same with other state of buttons for example _hover, _focus, _isDisabled, etc.
I'm using Workbox(V5) and in my workbox-config.js I precached the fonts (.woff and .woff2 formats) that are needed for the 3rd-party CSS styles that I'm using, by specifying this for the globPatterns property:
// workbox-config.js
module.exports = {
globDirectory: './',
globPatterns: [
'**/*.{html,ico,woff,woff2}',
],
globIgnores: [
'node_modules/**/*',
'{.,_}*/**/*',
'**/*.{md,txt}',
'Gemfile*',
'package*',
],
additionalManifestEntries: [
{
url: './manifest.webmanifest',
revision: null, // I have also precached my manifest file like this. Is it the best practice?
},
],
swDest: './sw.js',
sourcemap: false,
};
Now in the .css file of the 3rd-party, I can see that the needed fonts are being used with the #font-face rule that includes a query parameter in its URL value:
#font-face {
font-family: "bootstrap-icons";
src: url("./fonts/bootstrap-icons.woff?4601c71fb26c9277391ec80789bfde9c") format("woff"),
url("./fonts/bootstrap-icons.woff2?4601c71fb26c9277391ec80789bfde9c") format("woff2");
}
Well, if I remove the generated hash that has been added to the URL, when I run my PWA offline, the precached fonts show up just fine... But when the styles are calling the fonts with the hash, the precached fonts won't show up!
I have also tried to precache the fonts in my HTML file's head tag and the do runtimeCaching for the .woff and .woff2 formats instead of precaching them by the globPatterns property, but still no luck!
<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="font" href="./assets/styles/vendor/fonts/bootstrap-icons.woff2" type="font/woff2" crossorigin="anonymous">
So I was wondering how can we fix this problem?
Thanks a heap,
Ali
You can use the ignoreURLParametersMatching configuration option when generating your service worker to tell workbox-precaching that certain URL parameters can be ignored when checking the cache for a match.
The parameter takes an array of RegExps, and the default is [/^utm_/, /^fbclid$/], which matches some common analytics tracking parameters.
In your particular case, it sounds like the values you want to ignore are all 32 hex characters, so the following configuration should help:
// workbox-config.js
module.exports = {
ignoreURLParametersMatching: [/^[0-9a-f]{32}$/],
// ...other options go here...
};
I'm trying to add a Google Font (Mukta Malar) in my Gatsby site.
I've seen many articles on adding Google fonts to a Gatsby site and most of them seem to use this plugin: gatsby-plugin-prefetch-google-fonts.
I've used the above plugin in my site by adding it in the gatsby-config.js file as:
plugins: [
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Mukta Malar`
},
],
},
}
]
and added the font family to my css file as well:
* {
font-family: "Mukta Malar", sans-serif;
}
But the Google font is not applying to the site. Is there a hidden step that I'm missing in my code?
This plugin seems to be no longer maintained and it's part of escalade monorepo (which throws a 404 error), last commit in the core from 1 year ago.
I would suggest gatsby-plugin-google-fonts that allows you to display: swap your fonts without affecting your performance. In your case:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`mukta malar`
],
display: 'swap'
}
}
Google fonts are available on npmjs.org with the name typeface-XXXXXX representing the name of the font family on the Google fonts website.
If I want to add the Poppins font on my Web site, I just need to add it on the package.json file:
yarn add typeface-poppins
Then in my site, i can use require("typeface-poppin") to use the font:
import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
require('typeface-poppins')
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<h1 style={{fontFamily: "Poppins"}}>Hi people</h1>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
<div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
<Image />
</div>
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export default IndexPage
As other mentioned, include the fonts in your Gatsby project, this will be way faster!
Gatsby has a really great write up about this on their page actually.
https://www.gatsbyjs.com/docs/how-to/styling/using-web-fonts/
Here is a an example:
First you install the font using npm or yarn:
yarn add #fontsource/mukta-malar // npm install
#fontsource/mukta-malar
Then in your layoutfile for the page, import the font like this:
import "#fontsource/mukta-malar"
You the reference the font in css like you would do it with any google font:
font-family: 'Mukta Malar', sans-serif;
If you only need a few specific weights or variants you can also import only parts of the package like this:
import "#fontsource/mukta-malar/500.css"
this will only load weight 500 aka "medium" weight.
I'm working on a Chrome extension that injects some UI react components into a page.
The UI components come from react-mdl. Using them requires me to include a css file in the top of my project.
Unfortunately, once the css is injected into the page, the entire page's font is changed.
Is there a way to limit the scope of the css used by react-mdl such that it doesn't affect the page into which I'm injecting?
Just posting this for posterity as accepted answer deserves credit, but if anyone finds themselves in a similar predicament, here is a snippet of the code that worked for me:
// my injected code
window.addEventListener('load', () => {
const injectDiv = document.createElement('div')
const shadowRoot = injectDiv.attachShadow({ mode: 'open' })
// note inline use of webpack raw-loader, so that the css
// file gets inserted as raw text, instead of attached to <head>
// as with the webpack style-loader
shadowRoot.innerHTML = // just using template string
`
<style>${require('raw-loader!app/styles/extension-material.css')}</style>
<div id='shadowReactRoot' />
`
document.body.appendChild(injectDiv)
ReactDOM.render(
<App />,
// note you have to start your query in the shadow DOM
// in order to find your root
shadowRoot.querySelector('#shadowReactRoot')
)
})
Then, sure enough:
I think you should use the Shadow DOM API. It is good practice for those cases when you just need to append your UI component to a webpage.
https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
As mentioned in this other SO post, <link> tag is also supported, so one can simply do as follows:
const injectedDiv = document.createElement('div');
const shadowRoot = injectedDiv.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `\
<link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("bootstrap.min.css")}"></link>\
<link rel="stylesheet" type="text/css" href="${chrome.extension.getURL("whatever.css")}"></link>\
`;
document.body.appendChild(injectedDiv);
Notes:
Using chrome.extension.getURL is required for getting an extension's local resource url, see e.g. in this answer.
The linked .css resources must be declared under the web_accessible_resources property in your manifest.json (otherwise, you'll get this error)