I'm using the Roboto font in my website and it's rendering like the following in Chrome (Windows)
The font renders OK in iOS.
How can I fix this? Any help is appreciated :)
I had a similar problem.
Instead using the standard code provided by google,
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
I added a crossorigin="anonymous" property tag.
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css' crossorigin="anonymous">
Sincerely, I don't know the real reason, but it worked. Hope that works for you too.
Related
Today I noticed that font on my website mstem.net changed. I don't know why yet this font changed. In my main CSS file I have imported Google Fonts like:
#import url('https://fonts.googleapis.com/css?family=Oswald:400,900');
#import url('https://fonts.googleapis.com/css?family=Lato:400,900');
I checked for CSS code from Google Chrome Console and I noticed there is CSS rule added like:
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
I don't know where this line of code came from. When I uncheck it font comes back to normal.
Could you write me how to disable this CSS rule permanently?
I must add that I use Google Chrome Browser at Macbook with OSX 10.13.6.
Thank you for your help.
Cheers.
That CSS is coming from bootstrap.
In your header you have
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
...
...
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
Move your my-styles CSS below bootstrap for it to take precedence.
<link rel='stylesheet' id='bootstrap-css-css' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css?ver=4.1.1' type='text/css' media='all' />
<link rel='stylesheet' id='my-styles-css' href='https://mstem.net/wp-content/themes/wp-learn-marcelo/css/my-styles.css?ver=1.0' type='text/css' media='all' />
I managed to solve that problem.
I installed Insert Header and Footers WordPress Plugin and paste in the header section this Google Fonts code:
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;900&family=Oswald:wght#400;700&display=swap" rel="stylesheet">
I looked up to a file which was the problem and I found out that problem was with the normilze.css file. I don't know if it was added with the newest WP version automatically or in some other way but it has broken my website.
It's only problem with visability of css. There are a lot of answers in google, but since yesterday I've checked all of them and I still didn't solve my problem...
My project structure in eclipse looks like this:
Only in one file I have relation to css - in header.jsp:
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/bootstrap/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/main.css"/>
This path should be fine. What could be the problem?
In jsp also you can use the Html tags freely so just use
<link rel ="stylesheet" type="text/css" href="src/resources/css1/bootstrap/bootstrap.css">
i think this should work, see that you are not making spelling mistakes or Capital/small alphabet mistakes.
On the following site the titles (.post-header) should look like in this picture (Google Font: Cookie). If i analyze it, it seems to take the code but doesnt work. Can you help?
http://www.vintagemaedchen.de
The CSS file of the font is missing. You have to insert the following line into the <head> area:
<link href='https://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
Im working on Wordpress website.
I got problem with Google fonts.
Im using this code:
<link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=4.1.1' type='text/css' media='all' />
But sometimes font is not working and its replaced by some serif font which is not in CSS as fallback.
It only happens on customers PC Chrome browser. :)
Thanks
M.
I think you should try with decoded href, just like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,600,400&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.