diff --git a/src/cards/ha-weather-card.js b/src/cards/ha-weather-card.js
index 163663923f..bb87f7f9e5 100644
--- a/src/cards/ha-weather-card.js
+++ b/src/cards/ha-weather-card.js
@@ -1,6 +1,8 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
+import { computeStateName } from "../common/entity/compute_state_name";
+
 import "../components/ha-card";
 import "../components/ha-icon";
 
@@ -106,7 +108,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       <ha-card>
         <div class="header">
           [[computeState(stateObj.state, localize)]]
-          <div class="name">[[stateObj.attributes.friendly_name]]</div>
+          <div class="name">[[computeName(stateObj)]]</div>
         </div>
         <div class="content">
           <div class="now">
@@ -271,6 +273,10 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
     return localize(`state.weather.${state}`) || state;
   }
 
+  computeName(stateObj) {
+    return this.config.name || computeStateName(stateObj);
+  }
+
   showWeatherIcon(condition) {
     return condition in this.weatherIcons;
   }