How to successfully incorporate Google fonts into an HTML email for Outlook

Hey everyone – I've come across multiple websites discussing this issue, but I'm still struggling to get it right. I'm trying to incorporate a Google font (specifically, Fira Sans) into an HTML email so that it shows up correctly in Outlook.

When I open the .html file in a browser, it looks fine (although this might be because I have the fonts installed locally), but once I paste it into Outlook, it defaults to Helvetica.

Below is the code I've gathered from different sources, but I still haven't been able to make it work:

IN HEAD (Tried two different approaches)

1.

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic" type="text/css">

<style type="text/css">
    @import url(https://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic);
</style>

IN BODY

<td width=300 valign=bottom style="width:225.0pt; padding:0in 5.4pt 0in 5.4pt; font-family: 'Fira Sans', Helvetica , Arial, sans-serif;">
<p class=MsoNormal><i><span style="font-size:22.0pt; font-family:'Fira Sans', Arial, Helvetica, sans-serif !important; font-weight:500!important; color:#7030A0; font-style:italic;"><font face="'Fira Sans', Helvetica, Arial, sans-serif;">Joining Together</font></span></i></p>
</td>

Thank you!

htmlcssemailoutlook

Answer №1

Please double check your URL. You can choose from one of the following options:

<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,500;1,500&display=swap');
</style>

OR

<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,500;1,500&display=swap" rel="stylesheet">

Answer №2

Outlook for Windows does not fully support web fonts, such as Google fonts, but it does recognize the @font-face declaration. However, it cannot load the remote font file and will default to a serif font, even if a different font is specified in the stack. This is because Outlook uses a different mechanism for fallback fonts, utilizing properties like mso-generic-font-family and mso-font-alt. For more information on @font-face support in Outlook, you can visit Can I email and learn about these specific properties here.

To workaround this issue, you can use conditional comments to hide font declarations from Outlook. Here's an example:

<!--[if !mso]><!-->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Fira+Sans:300,500,500italic" type="text/css">
<!--<![endif]-->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The variable $_FILE fails to retrieve the file, resulting in PHP displaying an undefined variable error

I am facing an issue where I am unable to get the image file sent from an HTML form to insert it into a database. The other variables are being posted successfully, as I have checked them by echoing, but the image file is not getting posted. I suspect that ...

phphtml

having difficulty applying border color to input when clicked

Is there a way to change the border color of an input field on an onClick event? In my scenario, if the 'Other' radio button is selected and a user attempts to save without entering any value in the input field, I want the border color of the in ...

javascriptjquerycss

Is it feasible to activate the calendar widget by simply clicking anywhere within the input field?

I've been working on a custom React component for a date picker, and I'm facing an issue. I want the calendar widget to open whenever a user clicks anywhere inside the input field, not just on the arrow icon. However, no matter what I try, the ca ...

htmlreactjsinputdatepicker

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

javascripthtmlcssreactjs

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

javascripthtmlcsscss-transitions

Effortless sliding panel that appears on hover and vanishes when mouse is moved away

I am in the process of creating a menu for my website that utilizes linkbuttons which trigger additional linkbuttons to slide down upon hover. The desired effect is a smooth sliding panel that appears when hovering over the linkbutton, and disappears when ...

javascriptjqueryhtmlcss

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked. <script> $(document).ready(function (){ $("#content").load("content/index_content.php"); $('a').click(function(){ $ ...

jqueryhtmlcss

Storing past entries in a local storage using JavaScript

Currently, I am developing a JavaScript program that involves 3 input boxes. The program is designed to display whatever is typed into each input box on the page. To store and re-display previous submissions, I have implemented local storage. However, I en ...

javascripthtmlcsslocal-storagestringify

Hover over the text to reveal its content

I am currently in the process of developing a website that features interactive images with text appearing when hovered over. This concept is inspired by the functionality on the nowthisnews.com site. Despite my efforts, I have been unable to get this fea ...

htmlcss

It is impossible to add a new element between two existing elements that share the same parent

I'm attempting to place an <hr> tag between the first and second .field-container. Because they have the same parent, I thought using element1.parentNode.insertBefore(element2, ...) would be the solution. However, it is not working as expected a ...

javascripthtml

Enhance your website with a multi-column Pure CSS drop-down menu

Can anyone help me with this issue I'm facing? I am struggling to add a second column to the main "Authorized Brands" menu, and when I tried to break it up, it affected the rest of the columns due to the width being set at 1000px. This is the code I ...

htmlcssdrop-down-menumultiple-columns

What are some solutions for resolving differences in the display of pseudo elements between Macbooks and Windows desktops?

Greetings! I successfully converted an XD file to HTML and CSS code. I tested it on my Windows PC, but I haven't had the chance to test it on a Macbook yet. Details: I implemented a button with a pseudo element to show a right arrow on the right side ...

htmlcss

Create a uniform Bootstrap 5 album grid showcasing various text lengths for a visually cohesive display

Currently, I have designed a bootstrap album which can be viewed here: https://getbootstrap.com/docs/5.0/examples/album/ However, the text displayed in my album varies in length, resulting in an uneven layout like this: https://i.sstatic.net/Qwrnx.png ...

phpcssbootstrap-5

The transfer of information through HTTP

I have been exploring the inner workings of HTTP servers and clients to better understand how data is transmitted. Despite reading numerous articles on the topic, I still have some lingering questions that remain unanswered. I would like to walk through th ...

javascripthtmlsocketshttpserver-side

Picture not displaying properly in alternative browsers

While working on a simple website using html and css, I encountered an issue where my logo was not displaying for users on different browsers. Here is the image description Below is the HTML code: <section id="header"> <div class=& ...

htmlcssimage

PHP code to display "ed elements that do not adjust height"

A php script is being utilized to scan a directory and populate a gallery with all the images. Within the <div id="content"> tag, the function <?php create_gallery("path"); ?> loads all the images. The issue arises when the height of the <d ...

javascriptphphtmlcss

What are the best ways to ensure text stays center aligned and prevent position absolute elements from overlapping?

I'm currently working on a project that involves center-aligning the page title within the parent div. However, I have run into an issue with an overlapping back button when the page title is too long due to its absolute positioning. Can anyone provid ...

htmlcss

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

htmltwitter-bootstrapcssflexbox

leveraging Excel input for data manipulation in Java

I am looking to create a code that will help me generate a line of flight using data from an Excel spreadsheet. The process involves calculating the time between flights, ensuring the plane has enough time on the ground before taking off again, and determi ...

javaphphtmlsqlexcel

Ensure that the columns are consistently displayed on a single row

On larger screens, everything displays correctly. However, when viewing on a phone, the issue arises. I want these two columns to always stay on one row, but currently they stack on mobile devices. How can I ensure that they resize and remain on the same ...

htmlcssbootstrap-5