I need to get a list of all variable fonts available through the Google Fonts API.
I can get all the font names from this endpoint. There are some parameters you can add but I don't think that a variable font filter is among them:
https://www.googleapis.com/webfonts/v1/webfonts?key=API_KEY&sort=popularity
I don't think I can filter the results after making the API call. Here "Open Sans" is a variable font but I don't see anything to indicate this in the response.
{
"family": "Open Sans",
"variants": [
"300",
"regular",
"500",
"600",
"700",
"800",
"300italic",
"italic",
"500italic",
"600italic",
"700italic",
"800italic"
],
"subsets": [
"cyrillic",
"cyrillic-ext",
"greek",
"greek-ext",
"hebrew",
"latin",
"latin-ext",
"vietnamese"
],
"version": "v34",
"lastModified": "2022-09-22",
"files": {
"300": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4nY1M2xLER.ttf",
"regular": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4nY1M2xLER.ttf",
"500": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4nY1M2xLER.ttf",
"600": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4nY1M2xLER.ttf",
"700": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4nY1M2xLER.ttf",
"800": "http://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4nY1M2xLER.ttf",
"300italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVcUwaERZjA.ttf",
"italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVcUwaERZjA.ttf",
"500italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVcUwaERZjA.ttf",
"600italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVcUwaERZjA.ttf",
"700italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVcUwaERZjA.ttf",
"800italic": "http://fonts.gstatic.com/s/opensans/v34/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVcUwaERZjA.ttf"
},
"category": "sans-serif",
"kind": "webfonts#webfont"
},
There is this site which lists all variable fonts. In the developer console (F12) I saw it downloading this file:
https://fonts.google.com/metadata/fonts
This file contains all fonts. If the "axes" array of a font is not empty then it's definitely a variable font. Maybe you have to check other property names (I am not that familiar with variable fonts).
Related
I have found a few versions of my same question here , here, and here but when I try the suggested solutions I am still unsuccessful
I notice I am only able to apply inline css rules in my current extension. When I try bringing those rules into a separate css file I can't get the rules linked to the elements on the page.
I have played around mostly with the manifest.json file assuming my problem is somewhere there. I have tried including only css, matches, and js lines of the content_scripts. I have played around with different permissions. I didn't originally have the web accessible resources section.
Here is my manifest.json file as it currently looks:
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*", "file:///*/*"],
"js": ["./content.js"],
"all_frames": true
}
],
"permissions": ["tabs", "*://*/*"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extension",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
},
"web_accessible_resources": ["./content.css"]
and in my content.js file:
function addButtonElement() {
const newButton = document.createElement("button");
newButton.textContent = "Click me";
newButton.className = "buttonn";
newButton.style.background = "blue"
newButton.style.position = "relative";
newButton.style.top = "12.5em";
newButton.style.left = "50em";
newButton.style.zIndex = 8000;
newButton.style.color = "white";
newButton.style.width = "10%";
newButton.style.height = "30%";
newButton.style.borderRadius = "20px";
newButton.style.padding = "0.5em";
newButton.style.boxSizing = "border-box";
const currentButton = document.getElementById("headerMain");
document.body.insertAdjacentElement("afterbegin", newButton, currentButton);
}
document.body.onload = addButtonElement;
content.css file:
.buttonn {
border: solid 4px red !important;
}
I have other functionality in with the js file that is working, and like I said, inline css works. Not really sure why I can't seem to get rules from my CSS file to apply from that file.
one page I am trying this on is
https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab
Solved! (kind of)
I think there was maybe a caching issue on my machine...? I had been working on this late into the night yesterday and added in the !important command as one of my last steps to be sure my inline rules weren't taking precedence over the CSS.
When I came back to this project in the evening today it all worked!
The power of walking away did it again.
I am new at posting here, so not sure if best practice is to delete the question entirely, but I am tempted to leave it to remind others in the future that taking a break is sometimes the answer :)
Some of the lines added into my manifest.json file above weren't necessary to use my .css file
This is the version I have now that it is working as hoped:
{
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*"],
"js": ["./content.js"]
}
],
"permissions": ["tabs"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extention",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
}
}
We need to customize IBM Verse on prem for our corporate design. The documentation show how to add customized inline css. But that's not maintainable for larger customizations. I want to load css files, that could be generated by sass for keeping development DRY.
I tried the following in the example from the official docs:
[
{
"name": "CSS Extension Sample",
"description": "The sample shows how to customize Verse UI",
"title": "CSS Extension Sample",
"extensions": [
{
"type": "com.ibm.verse.ext.css",
"name": "CSS extension sample",
"payload": {
"url": "{extensionPath}/samples/test.css"
}
}
],
"services": ["Verse"]
}
]
And I also did some experiments with css import like this:
"payload": {
"css": "#import url('{extensionPath}/samples/test.css');"
}
with corresponding include of the file in manifest.json
"web_accessible_resources": ["page.js", "applications.json", "style.css"]
But test.css doesn't get loaded. The code itself works when using inline css:
"payload": {
"css": ".ics-scbanner {background-color:green!important;}"
}
How can I load the css file instead of inline css?
So I have been redesigning some websites just for my own usage using chrome extension.
My goal is to inject css into a website so it would be using as a main css or it would replace some main css's codes.
What I have is the fallowing:
JS:
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('styles.css');
(document.head||document.documentElement).appendChild(style);
Manifest file:
{
"name": "Extension",
"version": "0",
"description": "",
"manifest_version": 2,
"permissions": ["tabs", "https://www.youtube.com/*"],
"content_scripts": [
{
"matches": [ "https://www.youtube.com/*"],
"js": ["inject.js"],
"all_frames": true
}
],
"web_accessible_resources": ["styles.css"]
}
And of course my css file named styles.css
The problem I am having is once I load the page, it loads in an old style and then just before it finished loading my custom css hits the road and then the styles are changed of the website. How can I make so the styles for the website would be changed as soon as it starts loading the content so the changes will not be seen whatsoever.
There is a gif image to show you what I mean by that:
You don't need to do programmatic injection (which happens, by default, at "run_at": "document_idle", and that is exactly your problem).
Just change your manifest to this:
{
"name": "Extension",
"version": "0",
"description": "",
"manifest_version": 2,
"permissions": ["tabs", "https://www.youtube.com/*"],
"content_scripts": [
{
"matches": [ "https://www.youtube.com/*"],
"css": ["styles.css"],
"all_frames": true
}
]
}
If you still need to do it programmatically, then you need to add "run_at": "document_start"
I have a set of notebooks with metadata elements set at the cell level to define different sorts of activity.
For example, in the following .ipynb file there is a metadata element commentate set to true that is dynamically styled using a custom notebook extension to show a coloured background.
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#Header\n",
"\n",
"..and some markdown."
]
},
{
"cell_type": "markdown",
"metadata": {
"commentate": true
},
"source": [
"Metadata styled markdown."
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.4.0"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
I would like to generate a correspondingly styled HTML version of this notebook using nbconvert.
Is there a way I can map ipynb cell level metadata elements onto a CSS class and then associate a custom CSS file with, or embed custom CSS elements in, the generated HTML file?
Alternatively, is there a simple pattern for translating cell level metadata attributes/values to associated custom styled elements in converted HTML?
I want to write a chrome extension to force all websites to use given CSS style except Gmail page. However the following code from content scripts in manifest.json doesn't work (Gmail page will still use the style given in font.css).
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["*://mail.google.com/*"],
"css": ["font.css"]
}]
This cannot be fixed even adopting the strategy advised here by replacing exclude_matches with exclude_globs.
I know this bug existing for a while, so-called Bug #100106. Any idea on how to fix this? Or are there any alternative ways I can use to achieve my goal?
You can filter pages manually if you inject CSS from some content JavaScript code. I've just did a quick test, and the following works in Chrome 31.0.1650.63:
manifest.json:
{
"manifest_version": 2,
"name": "My Style",
"description": "Insert custom CSS",
"version": "0.1",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["font.js"],
"run_at":"document_start"
}],
"web_accessible_resources": ["font.css"]
}
font.js
if (location.hostname.indexOf(".google.com") == -1) {
var link = document.createElement("link");
link.href = chrome.extension.getURL("font.css");
link.type = "text/css";
link.rel = "stylesheet";
document.documentElement.insertBefore(link);
}
font.css
body {
color: red;
}
This way font.css script is injected into all non-Google pages.