PowerShell web request to fonts.googleapis.com result differs from browser request - powershell

I'm requesting a certain font from the google API using the PowerShell's Invoke-WebRequest.
But when I use the browser (chrome) to request the file's content it shows me an entirely different result.
I also tried immitating Chrome in PS request, but the result stays the same.
The font is located here https://fonts.googleapis.com/css?family=Roboto:300,400,500
and I used this command in PS:
Invoke-WebRequest 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' -OutFile ./roboto.css -UserAgent ([Microsoft.PowerShell.Commands.PSUserAgent]::Chrome)
Which gives me this file:
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc-.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
}
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc-.woff) format('woff');
}
But in the browser this file gets displayed:
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
#font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Can somebody enlighten me as to why this happens?
Is this also happening on your end?


Replacing [PSUserAgent]::Chrome with the UA string from a recent version of Chrome appears to work:
$userAgentChrome104Windows10 = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36'
Invoke-WebRequest -Uri 'https://fonts.googleapis.com/css?family=Roboto:300,400,500' -OutFile ./roboto.css -UserAgent $userAgentChrome104Windows10

Related

NextJS export - how to include font correctly

I am hosting a website on a server where NodeJs is not available. I am using npm run export and deploying the content of the out folder on the server.
I managed to fixed the issues for serving CSS, JS and images but I cannot figure out how to serve the fonts.
I am importing the fonts as follows in globals.css and it works locally:
#font-face {
font-family: "Roboto Light";
src: url('../public/fonts/Roboto-Light.ttf');
}
#font-face {
font-family: "Roboto Black";
src: url('../public/fonts/Roboto-Black.ttf');
}
#font-face {
font-family: "Due Credit Regular";
src: url('../public/fonts/Due-Credit-Regular.otf');
}
#font-face {
font-family: "Otamendi";
src: url('../public/fonts/Otamendi.ttf');
}
#font-face {
font-family: "Compacta Regular";
src: url('../public/fonts/Compacta-Regular.ttf');
}
I tried this solution but it did not work.

I am going to introduce my solution.
First, you need to place font files(*.ttf, *.woff) in public directory. Assuming that your font files take place in /public/fonts.
/public
/fonts
Roboto-Bold.ttf
Roboto-Bold.woff
Roboto-Bold.woff2
Roboto-Italic.ttf
Roboto-Italic.woff
Roboto-Italic.woff2
Roboto-Regular.ttf
Roboto-Regular.woff
Roboto-Regular.woff2
Second, create fontstyle.css in /public/fonts and write content like below.
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Italic.woff2') format('woff2'),
url('./Roboto-Italic.woff') format('woff'),
url('./Roboto-Italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Bold.woff2') format('woff2'),
url('./Roboto-Bold.woff') format('woff'),
url('./Roboto-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}
#font-face {
font-family: 'Roboto';
src: url('./Roboto-Regular.woff2') format('woff2'),
url('./Roboto-Regular.woff') format('woff'),
url('./Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
Third, import your fontstyle.css in your root component or application component.
index.js
import 'public/fonts/fontstyle.css';
...
Or if you already configured jsconfig.json in the root directory of your project, declare public directory and use it.
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
...
"#public/*": [
"public/*"
],
}
}
}
index.js
import '#public/fonts/fontstyle.css';
...
Then you can use Roboto font family in your components.
global.css
.myoddbtn{
font-family: Roboto;
font-size: 14px;
font-weight:400;
}
TestButton.jsx
export default function TestButton(){
return (
<button className="myoddbtn">
Font-family:Roboto
</button>
)
}

Try removing the '../public' part of your links: your js bundle will be in a different folder in production.

Tried the other answers here without success. Ultimately the issue for me was that the paths during 'next export' get rewritten everywhere but in the css files. And that unfortunately did not get solved by the proposed solutions.
However I ended up using the solution to another similar In another Stack Overflow question found here This solution uses replace-in-file to rewrite the paths in css also.
Just wanted to leave an answer here for anyone who finds this question first like me.

Ionic 2 large tab icon not displaying correctly in iOS

I have a large icon in a tabbar that is positioned at the top. When I try to enlarge an icon to around 1.5em it partly appears cut off from view. I tried making the .tabbar height larger and increased z-index but the icon is still cut off from view - see below image
This does not happen on Android. The icon is viewable in correct size
Bug with iOS larger iOS tabbar
Tabs.html
<ion-tabs [ngClass]="my_custom_class" selectedIndex="1" tabsPlacement="top" no-shadow no-border no-border-top no-border-bottom >
<ion-tab [root]="tab1Root" tabTitle="" tabIcon="icon-controller-stop" (ionSelect)="changeCustomClass('tabbar_normal')" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="" tabIcon="icon-circle" (ionSelect)="changeCustomClass('tabbar_transp')" ></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="" tabIcon="icon-triangle-up" (ionSelect)="changeCustomClass('tabbar_normal')"></ion-tab>
</ion-tabs>
Custom theme/icons.scss
Problem happens with standard ionic icons also
#font-face {
font-family: 'icomoon';
src: url('../assets/fonts/icomoon.eot?b6z7qh');
src: url('../assets/fonts/icomoon.eot?b6z7qh#iefix') format('embedded-opentype'),
url('../assets/fonts/icomoon.ttf?b6z7qh') format('truetype'),
url('../assets/fonts/icomoon.woff?b6z7qh') format('woff'),
url('../assets/fonts/icomoon.svg?b6z7qh#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size:0.55em;
padding:0.1em;
z-index: 999999;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-ios-icon-circle:before,
.ion-ios-icon-circle-outline:before
{
content: "\e900";
font-size:1.7em;
}

Font Awesome and CSS pseudoelements - some unicode characters don't work

I'm using FA and :before to use icons instead of bullets.
Some unicode characters work, and some don't. For example, f004 (heart), f005 (star), and f2dc (snowflake) work. But f001 (music), f008 (film), and f046 (check) don't work.
I'm using FA 5.0.6 Free.
#font-face {
font-family: 'awe506';
src: url("../fontawesome506/fa-regular-400.eot");
src: url("../fontawesome506/fa-regular-400.eot?#iefix") format("embedded-opentype"),
url("../fontawesome506/fa-regular-400.woff2") format("woff2"),
url("../fontawesome506/fa-regular-400.woff") format("woff"),
url("../fontawesome506/fa-regular-400.ttf") format("truetype"),
url("../fontawesome506/fa-regular-400.svg#fontawesome") format("svg");
}
.bulletsamples ul {
list-style-type: none;
padding-left: 0;
margin-left: 2em;
}
.bulletsamples li {
position: relative;
padding-left: 2em;
margin-bottom: 10px;
}
.bulletsamples li:before {
position: absolute;
top: 0;
left: 0;
font-family: awe506;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.stars li:before {
content: "\f005"; /*THIS WORKS*/
color: blue;
}
.stars li:before {
content: "\f008"; /*THIS DOESN'T WORK*/
color: blue;
}
No - I don't have two .stars li:before rules in my CSS - I've added this for illustration.
On the FA website (https://fontawesome.com/icons?d=listing&m=free) I filtered the list to only show icons included in the free set.
Also - the icons are hollow - I followed the instructions on FA's site and set font-weight to 900 for solid icons and it made no difference.
Thanks in advance - Cath

Doesn't look like u+f008 has a glyph in that font/version; it is simply not present.
According to https://fontawesome.com/icons?d=gallery&q=film you would need to use the solid version instead of the regular one (which is "Pro" only). This goes for u+f001 as well. u+f046 has apparently been moved at some point to u+f14a.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#font-face {
font-family: awe506;
src: url(fa-solid-900.woff);
}
.stars {
font-family: awe506;
}
.stars li:before {
/*content: '';*/
content: '\f005';
color: blue;
}
.stars li:after {
/*content: '';*/
content: '\f008';
color: blue;
}
</style>
</head>
<body>
<ul class="stars">
<li>foo</li>
<li>bar</li>
</ul>
</body>
</html>

add custom font simsun in jsPDF

I need export pdf with chinese letters, and write code as below link says:
Custom font faces in jsPDF?
and my code:
css:
#font-face {
font-family: SimSun;
font-weight: normal;
font-style: normal;
src: url("./simsun.ttc");
}
body{
font-family: 'SimSun';
}
js:
pdf.addFont('SimSun', 'SimSun', 'normal','StandardEncoding');
pdf.setFont('SimSun');
pdf.text(20, 20, '西溪园区 5号楼 1F');
pdf.save('TestSVG.pdf');
And as someone said that, i have confirmed that addFont is public:
API.addFont = function(postScriptName, fontName, fontStyle) {
addFont(postScriptName, fontName, fontStyle, 'StandardEncoding');
};
And i also find the postScriptName of 'Simsun' is SimSun.
http://mirror.sars.tw/FreeBSD_Chinese_HOWTO/simsun.html
Can somebody tell me why?

You're trying to load a truetype collection, not a truetype font. Current versions of CSS do not support font collections, so unpack your collection and then load the individual fonts, instead.
#font-face {
font-family: SimSun;
font-weight: normal;
font-style: normal;
src: url("./simsunregular.ttf");
}
#font-face {
font-family: SimSun;
font-weight: bold;
font-style: normal;
src: url("./simsunbold.ttf");
}
...etc...
body{
font-family: 'SimSun';
}

#font-face not working in mobile Webkit

I'm having trouble getting #font-face to behave in any mobile Webkit browser I've tested--Safari on an iPhone 3GS, the default Android 2.2 browser, and Dolphin browser on Android.
It works in all desktop browsers, from IE7 to IE9, FF3.5, Safari 4, and Opera.
The fonts and CSS are from FontSquirrel:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot');
src: local('☺'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'LatinModernRoman10Bold';
src: url('../fonts/lmroman10-bold-webfont.eot');
src: local('☺'),
url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'LatinModernRoman10BoldItalic';
src: url('../fonts/lmroman10-bolditalic-webfont.eot');
src: local('☺'),
url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
font-weight: normal;
font-style: normal;
}
I've checked the SVG ID in the SVG font source, and they all match up.
Could it be because I've got some letter-spacing rules later on in the CSS?
Thanks!

As it turns out, the syntax was wrong. I stumbled across this solution via twitter:
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
It worked perfectly. Just checked in all major browsers, and my fonts show up, including on Android and iOS.
Now, my CSS reads like so:
#font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/League_Gothic-webfont.eot#') format('eot'),
url('../fonts/League_Gothic-webfont.woff') format('woff'),
url('../fonts/League_Gothic-webfont.ttf') format('truetype'),
url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'LatinModernRoman10Bold';
src: url('../fonts/lmroman10-bold-webfont.eot#') format('eot'),
url('../fonts/lmroman10-bold-webfont.woff') format('woff'),
url('../fonts/lmroman10-bold-webfont.ttf') format('truetype'),
url('../fonts/lmroman10-bold-webfont.svg#webfonthCDr6KZk') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'LatinModernRoman10BoldItalic';
src: url('../fonts/lmroman10-bolditalic-webfont.eot#') format('eot'),
url('../fonts/lmroman10-bolditalic-webfont.woff') format('woff'),
url('../fonts/lmroman10-bolditalic-webfont.ttf') format('truetype'),
url('../fonts/lmroman10-bolditalic-webfont.svg#webfontegrLi3sm') format('svg');
font-weight: normal;
font-style: normal;
}
Glad to know there's a better bulletproof solution out there than the dang smileyface hack.
Hope this helps somebody!

According to http://caniuse.com/woff, Android 2.3, 4, 4.1, 4.2 and 4.3 do not support woff fonts. So you must add ttf as well. I am testing on Android 4.1 and 4.2 and woff seemed to be ok! But on 4.0.3, I had to add tff fonts.
See this link http://sanchez.org.ph/use-host-and-download-google-fonts-on-your-own-website/ to see how to download ttf fonts from Google.