Hi sorry for the bad english
I have a question so someone ask me to check a website using google insight and it gave me this
so the google insight have a solution to put "font-display: swap" but the website has a lot of plugins and i cant find where to put the solution
You can apply this as a CSS property or add to the of the URL when importing your google fonts, see below for examples:
In CSS:
#font-face {
font-family: "Roboto";
font-display: swap;
}
Or when importing:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
Related
After reviewing https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face as well as every single Big Cartel post on the internet regarding this specific issue, I have found no luck. The code is placed at the top of the document. I have tried it with and without apostrophes, format, and the formal font name "When Regular". I have copied and pasted the code from my CSS below.
Any ideas? Thank you. !!!
Edit: When hosting locally, the font still did not work. Shouldn't the answer to this be very simple?
#font-face {
font-family: when;
src: url(https://github.com/zenblatchley/when/blob/main/When-Regular.ttf) format(truetype);
}
* {
font-family: when;
}
This morning my webpage and whole website looked totally different.
Although I didn't even touched anything. I found other people on the Google product forum who complain about the same thing. But I want a solid solution.
I use a css file from where I import the font
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
This is used on every page.
Now it seems that Google changed the font this night into a, for me, horrible looking font.
Now I found another font, which I want to download and use on my server, so this kind of google jokes never effect me anymore.
But I can't if I can do this and how.
My question is: can I download a font store it on my server and use it in my CSS?
Sure, you just need to define the font in your CSS and where it is located
You can define a font with
#font-face { font-family: 'myfont';
src: url('path/to/yourfont.ttf') format('truetype'); }
and then use it like this (with a Fallback to a default font):
.classname {
font-family: 'myfont', Arial, Helvetica, sans-serif;
}
I found a 'fast' solution for this
The 'thin' version was used here, but was not specified. Google changed the options and you need to specify with specific font version you want. In my case it was
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300);
My website looks 'normal' again :)
The Google blog forum discribes some other solution
Google blog
I am trying to add a custom font to my _template.html, but it is not rendering the font, only plain text. I tried the solution found here, but did not solve my problem.
My custom font file is in WebContent/Resources/fonts/HelveticaNeueLTStd-LtEx.otf
My CSS file is in WebContent/Resources/css/Font.css
Font.css:
#font-face {
font-family: "Martinelli Logo";
src: url("#{resource['fonts/HelveticaNeueLTStd-LtEx.otf']}");
font-weight: normal;
font-style: normal;
body{
font-family: "Martinelli Logo";
}
}
Obs.: I already tried with only src: url('fonts/HelveticaNeueLTStd-LtEx.otf');, with no luck.
_template.xtml:
<h:body>
<h:outputStylesheet library="css" name="css/Font.css" />
Hello World in custom font!
<h:body />
The final solution: apparently my browser (Chrome) was loading old cached CSS, so I wasn't being able to see the updates I was developing on my styles. Just cleaned Chrome's cache and everything was working perfectly. I just need to figure how to change that behavior on the browser, since I don't want to clean it for every change on my CSS.
Biggest facepalm ever.
EDIT:
Found the solution by opening Devtools -> Settings -> Checked Disable cache (while DevTool is open)
Now I can edit my CSS and refresh the page to normally see the results. Thanks.
I am trying to embed a font file to my tumblr blog using #font-face and Font Squirrel kit, but so far I had no luck. I also used base64 encoding for embedding the font, but neither in Safari nor Firefox I cannot get it to work.
Edit: Uploading files and using them to tumblr's static area works in Safari and for Latin script. The font I am trying to use includes characters from Old Turkic script, and I cannot get these to work. Any advice regarding the complex scripts would be appreciated.
My code is below:
#font-face {
font-family: 'orkunregular';
src: url('http://static.tumblr.com/gaobkbe/d1rn63eux/orkun-regular-webfont.eot');
}
#font-face {
font-family: 'orkunregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,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) format('woff'),
url('http://static.tumblr.com/gaobkbe/xtgn63ewo/orkun-regular-webfont.ttf') format('truetype'),
url('http://static.tumblr.com/gaobkbe/nZcn63ey6/orkun-regular-webfont.svg#orkunregular') format('svg');
font-weight: normal;
font-style: normal;
}
How to proceed from now on?
Don't try to store and serve the font files on tumblr itself. This is likely not permitted by Tumblr TOS.
Put the font files somewhere else and it will work.
What you have done so far is, you defined the font-family. That will not make the browser use it.
Add this to your current custom css.
section.post {
font-family: "orkunregular";
}
You need to apply that Font to the HTML-Elements you want to use it on.
section.post would be only your own blogposts.
if you want everything to use that font, try:
* {
font-family: "orkunregular" !important;
}
Please check the TOS of Tumblr if they allow that kind of customization, or atleast host those Fonts on a seperate webserver.
Okay, I've solved it. When generating the font kit, I chose the Unicode range of the Old Turkic script, then when used the new kit, it displayed without any problems.
Here's the blog page, http://bitigchi.tumblr.com/indiriler1
Thanks for all the answers.
I have recently struggled with achieving smooth Google Web Fonts, primarily on Windows Google Chrome.
I had previously been using the direct stylesheet code, ripped from the URL that Google Web Fonts supplies, eg., Google supplies:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:200' rel='stylesheet' type='text/css'>
So I go to the URL and use the following code
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 200;
src: local('Titillium WebThin'), local('TitilliumWeb-Thin'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v1/anMUvcNT0H1YN4FII8wpr-K9kSItTeDn2USN0q77Oh4.woff) format('woff');
}
I figured this was a cheeky way to save a little more speed rather than making a request to Google, which then appears to make another request to source the font.
I recently discovered that this was the cause of the rendering issues (see the following example for how the Windows Chrome browser renders on the Web Font page, compared to a test page I created using the process: http://imgur.com/OV2U1,ema2B)
My question is, why does the <link /> version make the font smooth, when it is sourcing the same font with my shorthand method? And also, is there any reason why I should be using this approach, which I figured would cut request times?
There are a few issues that may answer your question. The main one is that the linked URL actually displays different CSS for different browsers. So if you open it in Chrome and copy that CSS then it may not work in Internet Explorer (particularly pre version 9).
Also, you are using a font weight of 200, which is a "light" weight. The default of regular text is 400. So there is a small chance that certain browsers simply don't show the font unless you specify a font weight of 200. Something like this should help:
body {
font-family: "Titillium Web", sans-serif;
font-weight: 200;
}
Add this to your CSS-file:
#import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');