search

rapi-doc / RapiDoc

RapiDoc -WebComponent for OpenAPI Spec
https://rapidocweb.com
MIT License
1.71k stars 285 forks source link

How to load fonts from CDN ? #20

Closed croudet closed 5 years ago

croudet commented 5 years ago

This is more a question than an issue. I am loading rapidoc from unpkg:

...
<body>
    <!-- Top navigation placeholder -->
    <rapi-doc id='rapidoc' show-header='false' theme='dark' layout='row'>
    </rapi-doc>
    <script src='https://unpkg.com/rapidoc@4.2.4/dist/rapidoc-min.js'></script>
...

And I saw that fonts are loaded from where index.html is served:

http://localhost:8080/rapidoc
https://unpkg.com/rapidoc@4.2.4/dist/rapidoc-min.js
http://localhost:8080/rapidoc-regular.woff2
http://localhost:8080/rapidoc-semi-bold.woff2

Is it possible to have the fonts taken from unpkg?

Thanks

mrin9 commented 5 years ago

Since it is a web-component and to simplify things, we bundle every thing in one file, putting fonts inside the bundle and using it from there will increase its size, block rendering longer, reduces flexibility to change fonts.

Having said that, RapiDoc uses some web-safe fonts, so even if you dont have the fonts, it will fall back on the font that most likely your OS would have.

However, in case you would like to get fonts from a CDN or would like to use a Font that matches your brand/style-guide then you can define your own font face or use some cdn service like shown below

<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">

and then

use the attributes regular-font and mono-font 

 <rapi-doc 
      spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
      heading-text="My Rounded Font !!!" 
      regular-font="'Varela Round', 'Arial Rounded MT Bold', 'Helvetica Rounded' "
 > </rapi-doc>

there is an example on this, check it out in action here and the code for it is here