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
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.
i want to use “Comfortaa” font in my application,to all page(like default font).i used the font using url.
like this:
<style>
#import url('https://fonts.googleapis.com/css?family=Comfortaa');
</style>
in .scss
font-family: 'Comfortaa'
but application is in offline the font did not work in my aaplication.how i can use the font in both offline and online condition.
when app is in offline it shows a italic type font.
like this
For add custom font in a application
Do following step:
Add custom font to assets/fonts folder
Add following code to app.scss file
#font-face {
font-family: 'San Francisco Light';
font-weight: normal;
font-style: normal;
src: url('../assets/fonts/SanFranciscoDisplay-Regular.otf');
}
After In theme/variables.scss file
add variable name
like this:`enter code here`
$font-family-ios-base: "San Francisco Light";
$font-family-md-base: "roboto";
First download and put the folder in src/assets/fonts and then in your theme folder write:
$font-path: "../assets/fonts";
#font-face {
font-family: GlobalFont;
src: url("../assets/fonts/Comfortaa/Comfortaa.ttf");
}
body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'GlobalFont' !important;
}
I have a simple html h1 title that works fine on desktop browsers but duplicates the font on iOS (Tested on Safari & Mercury Browser)
Preview image: http://d.pr/i/ku1I
The h1 css:
.headerInterior h1
{
width: 100%;
float: left;
color: #f2085c;
font-family: 'effBold';
font-size: 79px;
}
Does anyone had the same problem and know a solution for this?
Any help will be appreciated.
Cheers!
Try this:
Add this in your CSS class
font-weight: normal;
OR
text-shadow: 0 0 0;
This happens because the browser tries to generate the font weight thats requested if its unavailable already (h1 class in the example has default font-weight set to bold).
For instance, if we are using the following Google Fonts URL:
http://fonts.googleapis.com/css?family=PT+Serif:400,600italic
We have two ways to use this font:
.first-way{
font-family: 'PT Serif';
font-weight: 400;
}
OR
.second-way{
font-family: 'PT Serif';
font-weight: 600;
font-style: italic;
}
Using: font-weight: normal; basically defaults to the font-weight of the available font.
Further reading: http://alistapart.com/article/say-no-to-faux-bold
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.