Add &display=swap to google font urls

R/utils.R

@@ -110,7 +110,8 @@ google_font <- function(family, ..., languages = NULL) {
         base,
         gsub(" ", "+", family),
         if (!is.null(weights)) paste0(":", weights),
-        if (!is.null(languages)) paste0("&subset=", languages)
+        if (!is.null(languages)) paste0("&subset=", languages),
+        "&display=swap"
       )
     ),
     class = "google_font"

inst/resources/template.css

@@ -18,10 +18,10 @@
 {{#xaringanthemer_version}} *  Version: {{xaringanthemer_version}}{{/xaringanthemer_version}}
  *
  * ------------------------------------------------------- */
-@import url({{text_font_url}});
-@import url({{header_font_url}});
-@import url({{code_font_url}});
-{{#extra_font_imports}}{{extra_font_imports}}{{/extra_font_imports}}
+@import url({{{text_font_url}}});
+@import url({{{header_font_url}}});
+@import url({{{code_font_url}}});
+{{#extra_font_imports}}{{{extra_font_imports}}}{{/extra_font_imports}}
 
 :root {
   /* Fonts */
@@ -79,7 +79,7 @@ h1, h2, h3 {
 .remark-slide-content {
   background-color: var(--background-color);
   font-size: {{text_font_size}};{{#background_image}}
-  background-image: url({{background_image}});{{#background_size}}
+  background-image: url({{{background_image}}});{{#background_size}}
   background-size: {{background_size}};{{/background_size}}{{#background_position}}
   background-position: {{background_position}};{{/background_position}}{{/background_image}}
   padding: {{padding}};
@@ -140,7 +140,7 @@ a, a > code {
 }
 .title-slide {
   background-color: var(--title-slide-background-color);{{#title_slide_background_image}}
-  background-image: url("{{title_slide_background_image}}");{{/title_slide_background_image}}{{#title_slide_background_size}}
+  background-image: url("{{{title_slide_background_image}}}");{{/title_slide_background_image}}{{#title_slide_background_size}}
   background-size: {{title_slide_background_size}};{{/title_slide_background_size}}{{#title_slide_background_position}}
   background-position: {{title_slide_background_position}};{{/title_slide_background_position}}
 }

tests/testthat/css/duo-header_bg.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/duo.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/duo_accent.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/duo_accent_inverse.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/mono_accent.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/mono_accent_inverse.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/mono_dark.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/mono_light-header_bg.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/mono_light.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/solarized_dark-header_bg.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/solarized_dark.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/solarized_light.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/css/xaringan.css

@@ -18,9 +18,9 @@
  *  Version: a.b.c.d.eeee
  *
  * ------------------------------------------------------- */
-@import url(https://fonts.googleapis.com/css?family=Noto+Serif);
-@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i);
-@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700);
+@import url(https://fonts.googleapis.com/css?family=Noto+Serif&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Cabin:600, 600i&display=swap);
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400, 700&display=swap);
 
 
 :root {

tests/testthat/google-font-print.txt

@@ -1,3 +1,3 @@
 Family:  Josefin Sans 
 Weights: 400,400i,600i,700 
-URL:     https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600i,700
+URL:     https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,600i,700&display=swap

tests/testthat/test-write_extra_css.R

@@ -3,8 +3,8 @@ import <- function(x) paste0("@import url(", x, ");")
 # test_that("list2fonts()", {})
 
 describe("list2fonts()", {
-  lato_url <- "https://fonts.googleapis.com/css?family=Lato"
-  worksans_url <- "https://fonts.googleapis.com/css?family=Work+Sans"
+  lato_url <- "https://fonts.googleapis.com/css?family=Lato&display=swap"
+  worksans_url <- "https://fonts.googleapis.com/css?family=Work+Sans&display=swap"
 
   it("handles a list or c() of font urls", {
     expect_equal(