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.
Related
Currently I am building a website with nuxt-js. For the back-end of site I am using strapi headless CMS. In article pages of the site I get data (text of articles) from rich text capability of strapi database. So I don't need to define html tags to load the content correctly. The main language of the site is Persian, but there are some English words between sentences. For better design and showing content I used two font-family in my website. The font1 variable in my CSS file is referenced to a Persian font-family and the font2 is referenced to an English font-family. When I use this code in my CSS file:
#app {
font-family: var(--font1), var(--font2);
}
I get this result in the browser page:
As you could see the number 5 in the text is rendered in Persian language (correct format), but the number 8 in laravel-8 word also is rendered in Persian (wrong format). If I change the code to this one:
#app {
font-family: var(--font2), var(--font1);
}
I get the reverse result:
As you could notice none of the above results are correct. If I used html tags in my pages, I could wrap that words in for example span tags and define custom CSS for them. But in my case I don't use html tags and they are rendered automatically by strapi. So how could I fix this issue in my website? Is there any CSS property or any other trick that could solve this problem?
With the help of #nuxtjs/markdownit package, I finally found this solution. After adding that package according to its documentation, we must add html: true in its configuration as the code below:
nuxt.config.js file:
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
injected: true,
html: true,
},
So the texts that we insert in strapi rich-text data could have html tags like span inside. So I can wrap my English words to a span tag with the class of englishText like the text below:
strapi rich text:
در میان ویژگیهایی که در CSS برای تعریف کردن 5 استایل استفاده میشوند، شاید یکی از جذابترین و البته گستردهترین آنها <span class="englishText">laravel-8</span> باشد.
Then when we use this.$md.render(this.text); in our nuxt app (suppose that this.text is the data that contains rich-text from strapi) and use that text in our template part, If we define the englishText class in our CSS as the code below:
span.englishText {
/* font2 is the English font and font1 is the Persian font */
font-family: var(--font2), var(--font1);
}
We could get the correct result as this one:
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 →
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.
Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari