I am trying to use font Orator Std but it does not appear corretly.
more,
when I tested the code on local server, font size was near to what I want in image here, when tested on jsfiddle, font size changes for element and position also change. any reason for this?
why hr does not appear in yellow
How to last to character in vuvua specific color?
JSFIDDLE : http://jsfiddle.net/ewGXv/
I want my page to look similar to :
The problem you have is that the font is not a standard font available on any system. To include a non-standard font you will to reference that font and force it be downloaded if not available.
For example, to use a font from Google's Font API you can:
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'PT Sans Narrow', sans-serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Sample text</div>
</body>
</html>
If you specifically need Orator and it is not available for hosted loading at a service like Google's Font API, then you will need to download and host it yourself.
ADDED:
Although not perfect this is 90% of what you need. I'll leave you to tweak the layout and styling to your needs. A rough example of the layout
Andy
Related
I have a wabpage (HTML) that uses different ttf fonts loaded using #font-face{} in the cascading stylesheet. But, I find that one of the fonts is smaller than the rest. I have Katex loaded in the same page to render the math.
The problem that I am facing is that, since I do not know how to set a suitable size for each font, when I set a particular font size a for elements where I use font A, and b for elements where I use font B, the font also affects the Katex renders of math equations. So if the font A was by default very small, I need to over-ride the default font size and make it much larger to make it look ok, but then the larger font affects the math equations rendered by Katex and makes them extra large!
So my question is:
How can I set different sizes for different fonts in the #font-face{} itself, so that using a particular font doesn't affect the other elements and JS renderers like Katex.
I wanted something like:
#font-face {
font-family:myFamily;
src:url(locationOfTtfFont);
font-size:medium;
}
#font-face {
font-family:myFont2;
src:url(locationOfTtf2);
font-size:larger;
}
But, I couldn't get the above to work. Also, looking at the Font Face Rule #w3schools.com, I found that font-size was not in the list of allowed descriptors. Never the less, in the same W3 Schools article, I found another font-descriptor: font-stretch, but that didn't work either.
Katex uses a default font size of 1.2xem where em is the size of the em of the surrounding text's font. i.e. it renders slightly bigger to help make sub and superscripts more readable.
The problem in the question is that therefore the equations' font size changes with the various fonts in use, one of which renders naturally smaller than another so needs to have its size increased - thus making the equations too large.
It is possible to fix the Katex font size, making it independent of the surrounding text's size, by including a font-size setting in the head of the document.
This may of course cause a different problem, for example if it was required to have much smaller Katex in a footnote so I am not sure it is a full answer to the question. Here's the snippet in case the code is useful for trying different settings out.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex#0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>
<style>
.katex {
font-size: 20px;
}
p {
margin: 20px;
}
</style>
</head>
<body>
<div style="text-align:center;font-size: 20px;">
The equations' font-size has been set by including:<br><p style="text-align:center"><style>
.katex {
font-size: 20px;
}
</style></p> in the head of the document after everything else.
<br>-------------------
<p style="font-size: 20px;">
This text has font-size: 20px and here is the equation
<div id="eqn1" style="text-align: center;"></div>
</p>
-------------------
<p style="font-size: 16px;">
This text has font-size: 16px but the equation size is the same as above
<div id="eqn2" style="text-align: center;"></div>
</p>
</div>
<script>
function start() {
katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn1"), {
throwOnError: false
});
katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById("eqn2"), {
throwOnError: false
});
}
window.onload=start;
</script>
</body>
</html>
I'm using a google font in my react project, and whenever I open up my site, there is a very noticeable split second where my text that uses the font initially loads with a seemingly different font, then changes to the correct font right after.
What is happening here? And how do I prevent this from happening?
Loading font in public/index.html
<link
href="https://fonts.googleapis.com/css2family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
adding the font to a class in src/index.css
.bg-header {
font-family: "Bebas Neue", sans-serif;
color: darkorange;
text-decoration: underline;
position: absolute;
bottom: 10%;
left: 5%;
font-size: 75px;
}
html tag in react component
<h5 className="bg-header">{getHeader()}</h5>
We can use the ‘Preload’ resource hint to tell the browser that we want our font files to start downloading right away, not after the CSS is parsed. This helps loading the font faster.
Most major browsers support preload and other resource hints (Firefox is also currently in development to add this). Adding this to your HTML would look like this:
<link rel="preload" as="font" type="font/woff2"
href="<FONT LOCATION>" crossorigin>
Machmetrics
CSS: font-display
If you really don't want the font to swap you can use:
body {
font-display: block;
}
Or probably a more user-friendly way is:
body {
font-display: fallback;
}
However, this can hurt your rankings in search engines and you should read up on why the fonts are set to swap by default. The default setting for the font-display property is auto.
You can read about the CSS font-display property here https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/font-display.
Google Fonts display property
In your google fonts import, you can actually specify the font-display setting in the font URL:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
Notice the display=swap part of the URL.
Other resources
These articles will also be very helpful:
https://css-tricks.com/font-display-masses/
https://developers.google.com/web/updates/2016/02/font-display
Is the following true:
I set the font-family on an element to sans-serif. My (Chrome) sans-serif font is Helvetica. There is a chance this web-page, when opened in another browser with a potentially different operating system, will render a different font-family as its sans-serif font-family may be different to mine e.g. cailbri
A font-family like Helvetica is a universal font-family that renders the same (dimensions) in all browsers.
The best way to ensure that the same font is used in all browsers is not by just setting the font-family to a generic value (like sans-serif), but rather using the #import or <link rel="stylesheet" href="font.css" /> in your HTML code. In the href part of the link, and after the #import, you would place the URL to your font. For example, if I want to use the font "Ubuntu" (which is also a name of a Linux distro), and this font is served by Google Fonts, do this:
CSS:
#import url(https://fonts.googleapis.com/css2?family=Ubuntu&display=swap)
HTML:
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet" />
You can then in your CSS (for the "Ubuntu" font) do this:
font-family: "Ubuntu", sans-serif; /* It is always smart to add the type of font at the end. In this case, sans-serif */
This ensures that all browsers that read HTML and CSS can use this font, and that it will not vary across common browsers.
The first one is true. Actually, sans-serif is a large family of fonts. If the user (1) doesn't have the font you wanted in their computer, or (2) the user set their preferred font in their browser settings, the font will be different.
The second one may be true, but an extreme example is, the user deletes the Helvetica font from their computer. Some of the ways to avoid the problem is (1) set a fallback font, or (2) request a font on-line, like font.googleapis.com.
The <head> tag in my html file contains this link call:
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
Then I go on to say:
<style>
body {
font-family: 'Lato', sans-serif;
}
.textTime {
font-weight: 700;
}
</style>
Then my body goes on to say this:
<div class="textTime">
from 6am to 6am
</div>
It gets rendered like so:
However, if I change the font-weight property to font-weight: 400; instead of 700, it gets rendered like so:
So my problem is, the font is getting rendered as Lato, only if the weight is 400, not 700, then it gets rendered as something else.
The way it's doing this is because it's using CSS2, not CSS3, and I can't change this.
How can I solve this issue?
When using custom font's you need to add each font type for each weight you are going to use.
The reason you are seeing a broken version of Lato or another font is you either have another font defined for those font weights or you are seeing the browsers render version of Lato which will be based on the Lato 400 and up or down scaled depending and it will look nothing like how you intended.
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.