In InDesign I use the Google Font Kadwa to generate a right arrow (→).
I load the font into my website but the arrow is too wide.
#import url('https://fonts.googleapis.com/css?family=Kadwa');
body {
font-family: 'Kadwa';
}
You see, the font is applied but the arrow is too wide →
On the Google Font page the arrow is rendered correctly.
https://fonts.google.com/specimen/Kadwa?selection.family=Kadwa
I dont get it, what I am doing wrong.
Would be nice if somebody has a solution for that.
It looks like that character is not being loaded with the font for some reason. You can actually force Google fonts to load a particular character or set of characters by including a text parameter in the request. (The characters must be url encoded.)
I've added an additional font request below that loads a font with only the arrow character. This supplements the Kadwa font that's already been loaded, and everything shows up correctly.
I've also converted the arrow character to an HTML entity (→).
#import url('https://fonts.googleapis.com/css?family=Kadwa');
#import url('https://fonts.googleapis.com/css?family=Kadwa&text=%E2%86%92');
body {
font-family: "Kadwa";
}
This should have the correct arrow →
Related
I have an email html and I would like to use font Poppins to display text in my email.
However, It's not working.
I searched and found some solutions, but it's still not working.
https://css-tricks.com/kinda-can-use-custom-fonts-html-emails/
https://mailbakery.com/blog/fonts-html-emails-limitations-solutions-industry-standards/
https://litmus.com/blog/the-ultimate-guide-to-web-fonts
Thanks for reading.
Add a Google Font to Your Template
Search for your Google font here: https://fonts.google.com.
Next, click on the font and click the Select This Font button on the
upper right.
After selecting the font, click on the Family Selected window that is
minimized at the bottom of your browser.
Make sure you're in the Embed tab, then navigate to #Import
Visit here: https://help.klaviyo.com/hc/article_attachments/115000293152/2017-05-02_14-33-08.png for example image.
Here, you will see the import URL for the font. Copy this URL. In
this example, the URL is:
https://fonts.googleapis.com/css?family=Roboto.
In your Klaviyo template, find and edit the first text block in your
email. Click on the Source button to view the raw HTML.
Then, add the following HTML. This includes the font's import URL and specifies which HTML elements will use that font:
<style type="text/css">
#import url('INSERT_FONT_URL');
p, h1, h2, h3 {
font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';
}
</style>
When you save the block, you'll see the new fonts being used.
I have a custom font imported to this page using CSS: http://roundup.amebc.ca/
When Show Hotel List is clicked in Chrome, the custom font is ignored on the second line even though it is under the same heading and styling as the line above it (ex: Downtown and Harbourfront). I haven't been able to find anything that talks about this.
Add this to your css:
.hotel-list p {
font-family: 'Calibre-SemiBold';
}
Edit: This solution worked because if you view source or inspect one of the items in question on your page, you will see that they are all in fact wrapped in <p> tags.
Your <p> tag had not yet been styled to show the font you wanted so it was falling back to the font that was set on the <body>.
Hope this makes sense - see image below
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
I'm converting my header to an .svg because it looks horrible scaled down in IE.
There is font in the .svg but I've installed the fonts via dreamweaver and the fonts work fine elsewhere.
Take a look HERE. (you'll have to shrink the browswer to under 800px width to see it) You can see "prayer Pond" written in the body with the correct font, but the header doesn't have the right font. I can't for the life of me figure out why.
You can also note that the OTHER font in the SVG image works just fine and I installed it the exact same way.
Here's the part of the .svg that deals with the font:
<text transform="matrix(0.808 0 0 1 221.228 97.4204)" fill="#B4D1E4" stroke="#B4D1E4" font-family="'ConeriaScript_Slanted'" font-size="83.2657">Prayer</text>
<text transform="matrix(0.808 0 0 1 517.98 96.3726)" fill="#B4D1E4" stroke="#B4D1E4" font-family="'ConeriaScript_Slanted'" font-size="83.2657">Pond</text>
And here's the CSS of the text lower down with the same font (that works):
.temp {
font-family: "ConeriaScript_Slanted";
font-size: xx-large;
color: #FFF;
}
Any clue what might be going on here?
The reason for this is very simple. The SVG has no idea what font "ConeriaScript_Slanted" is. If you had inlined the SVG in the page, it would, because it would know about it from the CSS in the HTML. But the SVG is being loaded as an <img> (actually a background-image), so all it knows about is what is in the SVG file itself. CSS does not cross document boundaries.
Unfortunately the fix is not as simple as adding a #font-face rule to your SVG. SVGs embedded via <img> must be self-contained. They cannot refer to external resources (for privacy reasons). You can still use #font-face but the url has to be a data-url.
See: https://stackoverflow.com/a/20587895/1292848
I have this issue, I have a font-set without documentation (icons as a font). I want to use them but I have to somehow know what are specific codes for particular symbols. Is there a way how can I retrieve it?
For example to use it as in the below example:
.icon-box {
&:before {
content: "\e088";
}
}
EDIT
We have the following files: *.eot / *.svg / *.ttf / *.woff
When you have an icon font without documentation, you can
Create an HTML document containing a suitable range of characters, with font set to the icon font. Typically, icon fonts use either a Private Use range like U+E000...U+E0FF or U+F000... or the Latin1 range U+0000...U+00FF. You may need to try different ranges.
Use a font inspector, such as OTM Light (free), provided that it can handle the font format you have.