I have issue to set helvetica neue font family globally. It gives error as: Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin.
Then I have used crossorigin="anonymous" with it but doesn't work and again gives error GET https://fonts.cdnfonts.com/css/helvetica-neue-9 net::ERR_ABORTED 503. How can I solve this issue?
In index.html I am using font inside Head tag as:
<link href="https://fonts.cdnfonts.com/css/helvetica-neue-9" rel="stylesheet" />
In index.css file I am using as:
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, "Lucida Grande";
}
Error in console:
Related
I want to replace the default font family helvetica in my Chrome-Browser derivate, as it's rendered in an unreadable fashion.
My replacement font-family of choice would be "Helvetica Neue, for which I have licensed copies.
So, inside Chrome, I use the Stylus plugin, and inject the following CSS into every website:
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Helvetica Neue");
}
However, using the Chrome developer tools, I can see that the Rendered Font property defaults back to Arial, for an element with style
element.style {
font-family: helvetica, arial, verdana, sans-serif;
}
Clearly, I am misunderstanding the local(...) argument. If, for example, I redefine
#font-face
{
font-family: helvetica;
font-style: normal;
font-weight: normal;
src: local("Impact");
}
then the changes apply (in a very ugly way). My question is thus:
What do I specify as the argument to local(...) in order to actually use my local fonts?
Additional information:
I'm on windows, my fonts are installed OS-wide to C:\Windows\Fonts.
If I drag one of the icons to a different place, I can see its filename is HelveticaNeue.ttf
The same file in the font view gets displayed as Helvetica Neue Standard
If I open the file in font preview, it displays the title Helvetica Neue (OpenType) and the font name Helvetica Neue (see attached screenshot)
Font Helvetica Neue is converted to "Helvetica Neue" when assigning to CSSStyleDeclaration.cssText
This works fine in IE and FF but not in chrome
Html
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = myFunction();
document.getElementById("demo").innerHTML = x;
function myFunction() {
var body = document.body;
var style = body.style;
style.cssText = "font-size:small;font-family:Helvetica Neue"
return style.cssText.toString();
}
</script>
</body>
</html>
Steps to reproduce the problem:
1. Save the above html code and open in Chrome browser
2. It displays : font-size: small; font-family: "Helvetica Neue";
What is the expected behavior?
It should display : font-size: small; font-family: Helvetica Neue;
What went wrong?
The Helvetica Neue is getting displayed in double quotes when assigned to .cssText.
Because of this, in our rich text editor source code mode, the "Helvetica Neue" is getting displayed "Helvetica Neue"
When assigned the value Helvetica Neue to .cssText, it should convert simply Helvetica Neue but not as "Helvetica Neue".
If there is no space in between Helvetica Neue, then it is properly converting. But we need space in between Helvetica Neue
Is there any way to get the font without quotes?
I have a website for internal use that uses the Roboto google font. Here is the code that includes it.
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">.
&
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
I've found someone at my company who's Chrome can't render this font when it is bold. I could replicate it by going to Youtube and making Roboto text bold with the inspect element. This problem does not occur on any other computers. The Chrome is up to date and has no extensions installed. I've tried closing and reopening Chrome as well as several hard refreshes. Forcing the browser to repaint with resize, CSS, or JS does not fix the issue either.
This does not dupe question Font Weight with Google Fonts Roboto, normal (400) and bold (700) work, light (300) does not. The problem occurs on both http and https versions of the site, the font is loaded with //, and I get no insecure content warnings from Chrome.
What is causing this, and is there anything I can do on the website or on the persons computer to further troubleshoot or fix this?
If you use Google Fonts
<link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">
without a fallback font like;
body {
font-family: "Roboto";
}
b, strong {
font-weight: 700;
}
You should provide that font-weight in your Google Fonts link like;
<link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css">
Or, you should provide a fallback font;
body {
font-family: "Roboto", sans-serif;
}
By doing so, if your browser can't find the font-weight: 700; Roboto font, it can use a suitable sans-serif font from your system.
In ideal situations, using a font-family to support all possible computer systems like;
body {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
will solve all of these problems.
I have a webpage that uses Google's Open Sans font. The webpage also uses an HTML entity for the trademark symbol (™).
In Internet Explorer 7, this entity is not displayed using Open Sans, it is displayed in a serif font:
Here is a short page that reproduces the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700" />
<![endif]-->
<style type="text/css">
* {
font-family: "Open Sans", Arial, sans-serif;
}
</style>
</head>
<body>
<h1>This is trademarked™</h1>
<p>This is trademarked™</p>
</body>
</html>
Using the entity ™ results in the same problem, as does using a literal ™, but oddly enough the ® entity displays correctly.
Is there anyway to get this entity to render either in Open Sans, or if that fails, in a sans-serif font?
Both Open Sans & Arial don't have entities, so your browser will default to a system font for them. Try adding some alternative system fonts in your lineup:
font-family: "Open Sans", "Helvetica Neue", Helvetica, Calibri, Arial Unicode MS, Lucida Sans Unicode, DejaVu Sans, FreeSans, sans-serif;
I am using Google's Open Sans Font in my application.
I have defined the stylesheet as instructed:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'
rel='stylesheet' type='text/css'>
I then used it on the body selector as:
body {
font-family: 'Open Sans', sans-serif;
}
I have not defined font family anywhere else. I assume that since I have defined it at the parent, the child elements will automatically inherit it.
However, if I open up the inspector for say an anchor tag in my application and see the computed styles for that tag, I find that (Chrome Latest) the "Rendered Font" says "Times New Roman 18 glyphs" - Is this correct? I was expecting it to say "Open Sans" - Is the Open Sans font not being applied?
Check out the codepen link. Its working fine for me !
.open-sans-font{
font-family: 'Open Sans', sans-serif;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<div class="open-sans-font">
Stackoverflow rocks !!!
</div>